遇到一个需求是在一个文本中搜索关键字，并且高亮显示（红色字体）
在html中我们可以使用
String.split('关键字').join(<span style="color:red;">+关键字+<span>)来进行拼接
但是react native的Text是组件（component），如果使用上面的方式是会报错的
那可以使用另外一种形式进行拼接
import React, { Component } from 'react';
import {
Text,
View,
} from 'react-native';
class TestPage extends Component {
constructor(props) {
super(props);
this.state = {
data: '这里是关键字这里是关键字这里是关键字这里是关键字这里是关键字这里是关键字'
}
}
// 搜索关键字
keyword = (key) => {
let data = this.state.data // 获取文本
let newData = data.split(key) // 通过关键字的位置开始截取，结果为一个数组
return (
<Text>
{
newData.map((item,index) => {
return <Text key={index}>{item}<Text style={{color:'#a44a44'}}>{key}</Text></Text>
})
}
</Text>
)
}
// 页面
render() {
return (
<View style={styles.container}>
<Text style={{fontSize:20}}>内容<Text>Text文本可以嵌套text</Text></Text>
<View>
{
this.state.data.includes('关键字') ?
this.keyword('关键字') :
<Text>{this.state.data}</Text>
}
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f3f3f3',
justifyContent:'center',
alignItems: "center",
}
});
export defualt TestPage ;
最后实现了关键字的搜索
关键字.jpg
