在React Native中搜索FlatList

Question

我正在React Native中开发一个简单的应用程序,它包含一个React Navigation页面,一个FlatList(在该页面上),我想要一个简单的iOS友好搜索栏来搜索该列表的内容(只有每个的标题)项目).实现这一目标的最快/最简单/最有效的方法是什么？

谢谢,埃里克

Answer 1

取决于您存储数据的位置.如果您使用的是正常状态,则可以执行以下操作:

1. 在状态中定义搜索文本,比如说searchInput
2. 将状态数据定义为对象数组,假设它在字段标题中有标题,数组名为listItems
3. 在您的平面列表中,如您的数据所示this.state.listItems.filter(item => item.title.includes(this.state.searchInput)).

更新searchInput的状态时,您的列表应相应更新.