Reactjs 过滤简单平面列表

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

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

从“React”导入React；
从“react native”导入{样式表、文本、视图、安全区域视图、文本输入、TouchableOpacity、布局动画、图像、平面列表、滚动视图}；
从“反应本机矢量图标/离子图标”导入图标；
从“react native elements”导入{ListItem，SearchBar}；
导出默认类主屏幕扩展React.Component{
render（）{
返回(
家
{item.key}
/>
);
}
}

请提供该州的平面列表数据，以便您在搜索时对其进行控制。假设您希望将那些与搜索文本匹配的结果放在顶部，您可以执行类似于以下代码的操作。首先将

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

---

})

请提供来自该州的平面列表数据，以便在搜索时控制它。假设您希望将那些与搜索文本匹配的结果放在顶部，您可以执行类似于以下代码的操作。首先将

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

---

})

您应该为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>
    );
  }
}

导出默认类主屏幕扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索文本：“”，
};
}
render（）{
//数据也可以来自道具或任何其他来源
常数数据=[
{键：'Tiago'}，
{key:'Ricardo'}，
{key:'Beatriz'}，
{key:'Miguel'}，
{键：'Simão'}，
{键：'大卫'}，
];
const filteredData=this.state.searchText
？数据过滤器（x=>
x、 key.toLowerCase（）.includes（this.state.searchText.toLowerCase（））
)
：数据；
返回(
家
this.setState（{searchText:text}）}
值={this.state.searchText}
/>
(
{item.key}
)}
/>
);
}
}

您应该为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>
    );
  }
}

导出默认类主屏幕扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索文本：“”，
};
}
render（）{
//数据也可以来自道具或任何其他来源
常数数据=[
{键：'Tiago'}，
{key:'Ricardo'}，
{key:'Beatriz'}，
{key:'Miguel'}，
{键：'Simão'}，
{键：'大卫'}，
];
const filteredData=this.state.searchText
？数据过滤器（x=>
x、 key.toLowerCase（）.includes（this.state.searchText.toLowerCase（））
)
：数据；
返回(
家
this.setState（{searchText:text}）}
值={this.state.searchText}
/>
(
{item.key}
)}
/>
);
}
}

这真的很有帮助！如果要向每个键添加图像，该怎么办？我如何关联它？同样的事情，但您的数据数组将有另一个属性，如image或imageurl，您可以在平面列表呈现项中呈现它例如，在数据数组中，我添加“key:Tiago，image:name of the image.png”对吗？应该是图像的url，然后renderItem={（{item}）=>（{item.key}图像应该是url，或者你应该需要图像，然后使用它，检查文档中的格式它真的很有用！如果要向每个键添加图像，该怎么办？我如何关联它？同样的事情，但您的数据数组将有另一个属性，如image或imageurl，您可以在平面列表呈现项中呈现它例如，在数据数组中，我添加“key:Tiago，image:name of the image.png”对吗？应该是图像的url，然后renderItem={（{item}）=>（{item.key}图像应该是url，或者您应该需要图像，然后使用它，检查文档中的格式