Реализация панели поиска с использованием FlatList в React Native

Question

Я разрабатываю приложение React Native, которое состоит из FlatList.Я отослал эту статью, https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6, чтобы использовать компонент FlatList для моего приложения.

Я хотел бы реализовать панель поиска для поиска содержимого этого списка (с использованием заголовков каждого элемента) и автоматической визуализации содержимого в соответствии с текстом поиска.Как я могу сделать это без использования каких-либо библиотек?

Спасибо за вашу помощь!

Answer 1

Установите библиотеку Searchable Flatlist внутри пустой папки, используя npm install --save searchable-flatlist
Откройте папку node_module, созданную в указанной выше папке, скопируйте папку searchable-flatlist и вставьте ее в папку node_module вашего проекта

Затем следуйте этому фрагменту кода:

import SearchableFlatlist from "searchable-flatlist";
import {Button, Input, Container, Header, Content, Card, CardItem, Body, Item, Icon} from 'native-base';

        export default class App extends Component {
        state = { searchTerm: "", data:"empty" };

        render() {  
        if(this.state.data== "empty"){
            return (
              <View ><ActivityIndicator size="large" color="#0000ff" /> </View>
                  );
              }
              else{
        return (

        <View style={sContainer}>
                <Card style={{backgroundColor: "#dddddda1"}}>
                <Header searchBar rounded>
                  <Item>
                    <Icon name="ios-search" />
                    <Input placeholder="Search" 
                    onChangeText={searchTerm => this.setState({ searchTerm })}    
                    />
                    <Icon name="ios-people" />
                  </Item>
                  <Button transparent>
                    <Text>Search</Text>
                  </Button>
                </Header>

                <SearchableFlatlist
                  searchProperty={"email"}
                  searchTerm={this.state.searchTerm}
                  data={this.state.customersBox}
                  containerStyle={{ flex: 1 }}
                  renderItem={({ item }) => 
                   <ListItem
                    roundAvatar
                    title={`${item.name.first} ${item.name.last}`}
                    subtitle={item.email}
                    avatar={{ uri: item.picture.thumbnail }}
        +            containerStyle={{ borderBottomWidth: 0 }}
                  />  
        }
             // item.name.first specifies the value to filter with
                  keyExtractor={item => item.name.first}
                  ItemSeparatorComponent={Separator}
                />
                </Card>
              </View>
            );
    }
}
};

Возможно, вам придется немного изменить код.