react-native 搜索关键字并改变关键字样式

蔚落 2021-09-18 03:00 395阅读 0赞

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%'\}\}>

<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>

<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'\}\}>

</View>

<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 (

<Text style=\{frontStyle\}>\{value\}</Text>

</View>

);

return (

\{frontValue\}

<Text style=\{delimiterStyle\}>\{delimiter\}</Text>

\{behindValue\}

</Text>

</View>

);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70]: /images/20210908/810aafd86a554e95b2a849024f605050.png

react-native 搜索关键字并改变关键字样式

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【实现搜索结果中搜索内容关键字高亮】

相关 Linux 在 vi 中搜索关键字

相关 JavaRestClient操作Elasticsearch关键字搜索(match)

相关 this 关键字 static关键字

相关 Selenium打开浏览器并搜索关键字

相关 elasticsearch如何支持全文关键字搜索

相关关键字搜索

相关 linux 关键字搜索文件

相关 react-native 搜索关键字并改变关键字样式

相关 solr搜索关键字高亮显示