过滤简单的平面列表

Question

我想通过搜索栏过滤此简单的平面列表。我该如何编码，以便无论我在输入文本上写些什么来过滤列表？您能帮我完成吗？

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, TouchableOpacity, LayoutAnimation, Image, FlatList, ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {ListItem, SearchBar} from 'react-native-elements';

export default class HomeScreen extends React.Component{
   render() {
       return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.headerTitle}>Home</Text>
            </View>
            <View style={styles.container1}>
                <Icon name={"ios-search"} style={styles.icon}/>       
                <TextInput style={styles.inputBox}
                          underlineColorAndroid='rgba(0,0,0,0)' 
                          placeholder="Procura aqui"                                                                                                                                                                                                                                                                                              
                          placeholderTextColor = "white"
                          selectionColor="black"
                          keyboardType="default"              
                          />
             </View> 
             <View style={styles.flatlist}>
              <FlatList
                data = {[
                  {key:'Tiago'},
                  {key:'Ricardo'},
                  {key:'Beatriz'},
                  {key:'Miguel'},
                  {key:'Simão'},
                  {key:'David'}
                ]}
                renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
              />
             </View>
    </View>           
    );
}
}

Answer 1

请提供该州的平面清单数据，以便您可以在搜索时进行控制。假设您想将那些结果放在与您的搜索文本匹配的顶部，则可以执行以下代码。首先将onChangeText prop添加到textinput并按如下方式处理输入。

filterItems = (search_text) => {

var items = [...this.state.data];

var filtered = [];

if (search_text.length > 0) {
  filtered = items.sort(
    (a, b) => b.includes(search_text) - a.includes(search_text),
  );

  this.setState({data: filtered});
} else {
  filtered = items.sort((a, b) => b - a);

  this.setState({data: filtered});
}

};

Answer 2

您应该为searchtext设置一个状态值，并根据该值过滤数组。组件应如下所示。

export default class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchText: '',
    };
  }

  render() {
    //Data can be coming from props or any other source as well
    const data = [
      { key: 'Tiago' },
      { key: 'Ricardo' },
      { key: 'Beatriz' },
      { key: 'Miguel' },
      { key: 'Simão' },
      { key: 'David' },
    ];

    const filteredData = this.state.searchText
      ? data.filter(x =>
          x.key.toLowerCase().includes(this.state.searchText.toLowerCase())
        )
      : data;
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>Home</Text>
        </View>
        <View style={styles.container1}>
          <Icon name={'ios-search'} style={styles.icon} />
          <TextInput
            style={styles.inputBox}
            underlineColorAndroid="rgba(0,0,0,0)"
            placeholderTextColor="white"
            selectionColor="black"
            keyboardType="default"
            onChangeText={text => this.setState({ searchText: text })}
            value={this.state.searchText}
          />
        </View>
        <View style={styles.flatlist}>
          <FlatList
            data={filteredData}
            renderItem={({ item }) => (
              <Text style={styles.item}>{item.key}</Text>
            )}
          />
        </View>
      </View>
    );
  }
}