在React Native中使用FlatList实现搜索栏

1 回答

• 0

  使用npm install --save searchable-flatlist将库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>
              );
      }
  }
  };
  

  您可能需要稍微修改一下代码 .

  回复于 2024-04-26T22:16:54+08:00