如何在 FLatList 中实现 Sraech bar react native

Question

我正在尝试在 FlatList 中添加搜索栏，这里从 API 获取数据并填充到 FlatList 中，但我必须过滤该列表，因为它可能包含许多数据。所以请帮助我。我尝试了几个例子，但出现错误，所以有时什么都没有发生。请看看并帮助

 import React, { Component } from 'react';
    import { View, Text, TextInput,   
    FooterTab,Button,TouchableOpacity, ScrollView, StyleSheet,
     ActivityIndicator ,Header,FlatList} from 'react-native';
     import {Icon} from 'native-base';
    import { createStackNavigator } from 'react-navigation';  
    import { SearchBar } from 'react-native-elements';   

  export default  class RenderList extends Component {
  static navigationOptions = {
    title: 'Selected Item',
    header: null,
  };
  constructor() {
    super();
    this.state = {
      data: null,
      loading: true,
      search: '',
    };
  }

  componentDidMount() {
    this.createViewGroup();
  }

  createViewGroup = async () => {
    try {
      const response = await fetch(
        'http://Dsenze/userapi/grouphier/viewgroup',
        {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            password: 'admin',
            username: 'admin',
            viewall: 'false',
            id: [4],
            startlimit: '0',
            valuelimit: '10',
          }),
        }
      );

      const responseJson = await response.json();

      const { groupData } = responseJson;

      this.setState({
        data: groupData,
        loading: false,
      });
    } catch (e) {
      console.error(e);
    }
  };

  clickedItemText(clickedItem) {
    this.props.navigation.navigate('Item', { item: clickedItem });
  }
  updateSearch = search => {
    this.setState({ search });
  };
  keyExtractor = ({ id }) => id.toString();
  keyExtractor = ({ name }) => name.toString();

  renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      activeOpacity={0.4}
      onPress={() => {
        this.clickedItemText(item);
      }}>
      <Text>Hospital Id {item.id}</Text>
      <Text>Hospital Name {item.name}</Text>
    </TouchableOpacity>
  );

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


  render_FlatList_header = () => {

    var header_View = (

    <View style={styles.header_footer_style}>

      <Text style={styles.textStyle}> FlatList Header </Text>

    </View>

    );

    return header_View ;

  };

  render() {
    const { loading, data } = this.state;


    return (
      <ScrollView>
        <View style={styles.container1}>

          {this.state.loading ? (
            <ActivityIndicator size="large" />

          ) :

          (
            <FlatList 
              data={data}
              renderItem={this.renderItem}
             keyExtractor={this.keyExtractor}
             ItemSeparatorComponent={this.renderSeparator}
             ListHeaderComponent={this.render_FlatList_header}

            />
          )}
        </View>
      </ScrollView>
    );
  }
}  

谢谢...

Answer 1

因此，您需要保留数据的原始值，然后您可以根据关键输入对其进行过滤，并将状态设置为显示在您的平面列表中。 例如，在更改文本时，如果输入您过滤掉对象的匹配子字符串并将其放入一个新数组中并将其设置在filterByValue 数组中，该数组将显示在平面列表中。

onSearchInputChange = (text) => {
    const filterByValue = this.state.data.filter(x => 
     x.name.toLowerCase().includes(text.toLowerCase()));
    this.setState({
      searchText: text,
      filterByValue
    });
  }

然后将flatlist的数据作为

<FlatList 
   data={filterByValue}
   renderItem={this.renderItem}
   keyExtractor={this.keyExtractor}
   ItemSeparatorComponent={this.renderSeparator}
   ListHeaderComponent={this.render_FlatList_header}
/>

对于工作示例，试试这个 https://snack.expo.io/rJY0gYlIV