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