Как реализовать Sraech bar в FLatList реагировать на родную

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 
   data={filterByValue}
   renderItem={this.renderItem}
   keyExtractor={this.keyExtractor}
   ItemSeparatorComponent={this.renderSeparator}
   ListHeaderComponent={this.render_FlatList_header}
/>

. Для рабочего примера попробуйте это https://snack.expo.io/rJY0gYlIV