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

Question

我正在开发一个由 FlatList 组成的 React Native 应用程序。我参考了这篇文章， https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6 在我的应用程序中使用 FlatList 组件。

我想实现搜索栏来搜索该列表的内容（使用每个项目的标题）并根据搜索文本自动呈现内容。如何在不使用任何库的情况下执行此操作？

感谢您的帮助！

Answer 1

使用 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>
            );
    }
}
};

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

Answer 2

查看下面我使用 flatlist 和 TextInput 创建的示例。当您搜索项目时，项目以下拉列表的形式显示。我想这会对你有所帮助。

import React, { Component } from 'react';
import { View, Text, FlatList, TextInput, ListItem } from 'react-native';

class SearchFunction extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: [],
      value: '',
    };

    this.arrayNew = [
      { name: 'Robert' },
      { name: 'Bryan' },
      { name: 'Vicente' },
      { name: 'Tristan' },
      { name: 'Marie' },
      { name: 'Onni' },
      { name: 'sophie' },
      { name: 'Brad' },
      { name: 'Samual' },
      { name: 'Omur' },
      { name: 'Ower' },
      { name: 'Awery' },
      { name: 'Ann' },
      { name: 'Jhone' },
      { name: 'z' },
      { name: 'bb' },
      { name: 'cc' },
      { name: 'd' },
      { name: 'e' },
      { name: 'f' },
      { name: 'g' },
      { name: 'h' },
      { name: 'i' },
      { name: 'j' },
      { name: 'k' },
      { name: 'React' },
      { name: 'React native' },
      { name: 'react navigations' },
    ];
  }

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '100%',
          backgroundColor: '#CED0CE',
        }}
      />
    );
  };

  searchItems = text => {
    let newData = this.arrayNew.filter(item => {
      const itemData = `${item.name.toUpperCase()}`;
      const textData = text.toUpperCase();
    if(text.length >0 ){
      return itemData.indexOf(textData) > -1;
    }
    });
    this.setState({
      data: newData,
      value: text,
    });
  };

  renderHeader = () => {
    return (
      <TextInput
        style={{ height: 60, borderColor: '#000', borderWidth: 1 }}
        placeholder="   Type Name..."
        onChangeText={text => this.searchItems(text)}
        value={this.state.value}
      />
    );
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          padding: 25,
          width: '98%',
          alignSelf: 'center',
          justifyContent: 'center',
        }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <Text style={{ padding: 10 }}>{item.name} </Text>
          )}
          keyExtractor={item => item.name}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );
  }
}

export default SearchFunction;

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

Implementing a Search bar using FlatList in React Native

searchbar

react-native

react-native-flatlist