react-native 搜索关键字并改变关键字样式
import React from 'react';
import {Image,TextInput,TouchableOpacity, ScrollView, FlatList,StyleSheet, Text, View } from 'react-native';
import StringDistinction from '.SearchKeywordsChangeColor';
export default class Retrieval extends React.Component{
constructor(props){
super(props)
this.state={
color:false,
ReData:[
{
type:1,
content:'4.1.1（1）蓄电池外观应无裂纹、无损伤；密封应良好，应无渗漏，安全排气阀应处于关闭状态。应无渗漏，安全排气阀应处于关闭状态。',
title:'《电气装置安装工程蓄电池施工及验收规范》',
id:'GB 50172-2012'
},
{
type:2,
content:'（三）工艺标准库 0201010504 （4）保护帽混凝土抗压强度满足设计要求。（6）保护帽顶面应留有排水坡度，顶面不得积水。',
title:'《国家电网公司输变电工程标准工艺》',
id:'GB 34565-2010'
},
{
type:1,
content:'4.1.1（1）蓄电池外观应无裂纹、无损伤；密封应良好，应无渗漏，安）蓄电电池外观无损伤；密封应良好，应无渗漏，安全排气阀应处于关闭状态。',
title:'《电气装置安装工程 高压电器施工及验收规范》',
id:'GB 50147-2010'
},
{
type:1,
content:'4.1.1（1）蓄电池外观应无裂纹、无损伤；伤；密封应良好，应无渗漏，安全排裂纹、无损伤；密封应良好，应无渗漏，安全排气阀应处于关闭状态。',
title:'《电气装置安装工程电力变压器、油浸电抗器、互感器施工及验收规范》',
id:'GB 50148-2010'
},
],
dataLis:[
{
type:1,
content:'4.1.1（1.1（1）蓄电池外观应裂纹、无损伤；密封应良好1）蓄电池外观应无裂纹、无损伤；密封应良好，应无渗漏，安全排气阀应处于关闭状态。',
title:'《电气装置安装工程蓄电池施工及验收规范》',
id:'GB 50172-2012'
},
{
type:2,
content:'（三）工艺标准库 0201010504 （4）保护帽混凝土抗压强度满足设计要求。（6）保护帽顶面应留有排水坡度，顶面不得积水。',
title:'《国家电网公司输变电工程标准工艺》',
id:'GB 50172-2012'
},
{
type:1,
content:'4.1.1（1）蓄电池外观应无裂纹、无损伤；密封应良好、无损伤；（1）蓄电池外观应无阀无裂纹、无损伤；密封应良好，应无渗漏，安全排气阀应处于关闭状态。',
title:'《电气装置安装工程 高压电器施工及验收规范》',
id:'GB 50147-2010'
},
{
type:1,
content:'状态。4.1.1（1）蓄电池外观应无裂纹、无损伤；蓄电池外观应无裂纹、无损伤；密封应良好，应无渗漏，安全排气阀应处于关闭状态。',
title:'《电气装置安装工程电力变压器、油浸电抗器、互感器施工及验收规范》',
id:'GB 50148-2010'
},
],
replaceText:''
}
}
onChanegeTextKeyword(text){
var reg = new RegExp(text,"i");
if(!text){
this.setState({
color:false,
dataLis:this.state.ReData,
replaceText:''
});
return;
}
else if(text){
let newData = [];
for (var i = 0; i < this.state.ReData.length; i++) {
let ds = this.state.ReData[i];
if(ds.title && ds.title.indexOf(text)!=-1){
newData.push(ds);
}
}
this.setState({
color:true,
dataLis:newData,
replaceText:text
});
return;
}
}
render(){
return(<View style={{width:'100%',height:'100%'}}>
<View style={{width:'100%',justifyContent:"center",alignItems:'center',backgroundColor:'white',height:60}}>
<View style={{backgroundColor:'#eee',width:'97%',flexDirection:'row',borderRadius:20,alignItems:'center',height:40}}>
<Image source={require('../../images/search.png')} style={{width:20,height:20,marginLeft:8}}/>
<TextInput underlineColorAndroid={'transparent'}
multiline={true} autoFocus={false} onChangeText={(e)=>this.onChanegeTextKeyword(e)}
style={{marginLeft:5,fontSize:13, color: '#363434',overflow:'hidden',width:'98%',height:'100%',padding:0}}
placeholder="请输入"/>
</View>
</View>
<FlatList keyExtractor={(item,index)=>index.toString()} style={{height:'100%'}} data={this.state.dataLis}
renderItem={({item,index})=>{
return(<View style={{flexDirection:'row',marginTop:8,backgroundColor:'white',width:"100%"}}>
<View style={{marginTop:5,marginLeft:5,width:40,height:40,borderRadius:20,
justifyContent:'center',alignItems:'center',backgroundColor:item.type==1?"#11A6FF":'#333'}}>
<Text style={{color:'white',fontSize:18}}>{item.type==1?'国':'企'}</Text>
</View>
<View style={{padding:10,width:"90%"}}>
<View>
<StringDistinction
value={item.title+" "+item.id}
delimiter={this.state.replaceText}
frontStyle={{ fontSize: 12, color: '#000' }}
style={{justifyContent:'flex-start',flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}
delimiterStyle={{ fontSize: 18, color: 'red' }}
behindStyle={{ fontSize: 12, color: '#000' }}
/>
</View>
<Text style={{fontSize:13,color:'#333'}}>{item.content}</Text>
</View>
</View>)
}}
/>
</View>)
}
}
搜索分割关键字并改变关键字的样式
SearchKeywordsChangeColor.js
/**
* Created 2019/2/22.
* wangweiruning
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
View,
Text,
} from 'react-native';
export default class SearchKeywordsChangeColor extends Component {
static propTypes = {
delimiter: PropTypes.string,//搜索的关键字
value: PropTypes.string,//存在关键字的字符串
};
static defaultProps = {//默认样式
style: {
alignItems: 'flex-end'
},
};
render() {
const { value, delimiter, style, frontStyle, delimiterStyle} = this.props;
let frontValue = '';
let behindValue = '';
const splits = value && delimiter && value.split(delimiter);
if (splits && splits.length) {
frontValue = splits[0];
behindValue = splits[1];
}
if (!delimiter) {
return (
<View style={[{ flexDirection: 'row' }, style]}>
<Text style={frontStyle}>{value}</Text>
</View>
);
}
return (
<View style={[{ flexDirection: 'row' }, style]}>
<Text style={frontStyle}>
{frontValue}
<Text style={delimiterStyle}>{delimiter}</Text>
{behindValue}
</Text>
</View>
);
}
}
以上是 react-native 搜索关键字并改变关键字样式 的全部内容， 来源链接： utcz.com/z/381296.html
