React Native 实现列表模糊搜索（FlatList模糊搜索）

记录一下本地实现列表模糊搜索，效果图：

实现思路：

利用TextInput的onChangeText方法，当输入框文字改变时立即去调用自己写的数据筛选方法，修改Flatlist的data（data应该是定义在state中）。列表数据最好用map循环给每一条数据增加一个新的字段（此处用hidden解释）控制item是否显示。搜索方法中判断输入框传过来的关键字，长度大于0时，用map循环data，不符合条件的数据把hidden字段的值改为true（隐藏）；当长度等于0时，map循环data把所有item的hidden字段改为false（全部展示）。

代码如下：

输入框：

<TextInput 
	onChangeText={(value) => {
        this.searchBook(value)
    }}
    returnKeyType={'search'}
    maxLength={30}
    placeholder={'请输入关键字'}
    placeholderTextColor={'#aaa'}
    underlineColorAndroid='transparent'
    style={{
        flex: 1,
        color: '#222',
        fontSize:ScreenUtil.setSpText(12)
    }}/>
           

搜索方法：

searchBook(keyword){
		//this.state.data就是list展示的数据
        var allData = this.state.data
        if(keyword.length>0){
            allData.map((item,i) => {
            	//item.name 对应搜索的条件 此处搜索名称
                if (item.name.search(keyword) === -1){
                    item.hidden = true
                }
            })
            this.setState({data:allData})
        }else {
            allData.map((item,i) => {
                item.hidden = false
            })
            this.setState({data:allData})
        }
    }
           

渲染item时加以判断：

//renderItem
if(!item.hidden){
	return(...)
}
           

顺带记录一下给data中每一条数据增加字段的代码：

this.state.data.map((item,i) =>{
	item.hidden = false
})