过滤简单的平面列表答案

【问题标题】：Filtering simple Flatlist过滤简单的平面列表
【发布时间】：2020-09-05 07:50:39
【问题描述】：

我想通过搜索栏过滤这个简单的平面列表。我如何对其进行编码，以便无论我在输入文本上写什么，它都会过滤平面列表？你能帮我完成它吗？

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

【问题讨论】：

标签： reactjs react-native search react-native-flatlist

【解决方案1】：

您应该有一个 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>
    );
  }
}

【讨论】：

真的很有帮助！如果想为每个键添加图像怎么办？我如何关联它？
同样的事情，但是你的数据数组会有另一个属性，比如 image 或 imageurl，你可以在你的 flatlist 渲染项中渲染它
例如在数据数组中我添加“key: Tiago, image: 图片名称.png”对吗？
应该是图片的url然后renderItem={({ item }) => ( {item.key} )}
图片应该是url或者你需要图片然后使用它，检查文档reactnative.dev/docs/images中的格式

【解决方案2】：

请提供该州的平面列表数据，以便您在搜索时对其进行控制。假设您想将与搜索文本匹配的结果放在顶部，您可以执行类似以下代码的操作。首先将 onChangeText 属性添加到 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});
}

};

【讨论】：