javascript - Searching a FlatList in React Native - Stack Overflow

admin管理员组

文章数量:1289586

I'm developing a simple app in React Native that consists of a React Navigation page, a FlatList (on that page), and I would like a simple iOS-friendly search bar to search the contents of that list (only the titles of each item). What is the quickest/easiest/most effective way to achieve this?

Thanks, Eric

I'm developing a simple app in React Native that consists of a React Navigation page, a FlatList (on that page), and I would like a simple iOS-friendly search bar to search the contents of that list (only the titles of each item). What is the quickest/easiest/most effective way to achieve this?

Thanks, Eric

• javascript
• reactjs
• react-native

Share Improve this question Follow edited Jan 13, 2018 at 20:25 Eric Phillips asked Jan 13, 2018 at 20:17 Eric PhillipsEric Phillips 50711 gold badge66 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

Depends on where you store your data. If you are using normal state, you can do the following;

1. Define a search text in state, let's say searchInput
2. Define your data in state as array of objects, let's say it has title in field title and array is called listItems
3. On your flatlist, as your data give this.state.listItems.filter(item => item.title.includes(this.state.searchInput)).

When you update your state for searchInput, your list should update accordingly.

本文标签： javascriptSearching a FlatList in React NativeStack Overflow