Android 如何使用react native中的列表项设置搜索筛选器

我一直想在此列表项中设置搜索过滤器，但我有点困惑，如果您对此有经验，请查看我的代码

import React, { Component } from 'react'; 
import {   Text,   View,   ScrollView,   TextInput, } from 'react-native'; 
import { List, ListItem } from 'react-native-elements'; 
import { users } from '../config/data';

class Feed extends Component {   constructor(props){
    super(props);
    this.state = {
      user:'',
    }   }   onLearnMore = (user) => {
    this.props.navigation.navigate('Details', { ...user });   };

  filterSearch(text){
    const newData = users.filter((item)=>{
      const itemData = item.name.first.toUpperCase()
      const textData = text.toUpperCase()
      return itemData.indexOf(textData)>-1
    })
    this.setState({
      text:text
    })   }

  render() {
    return (
      <ScrollView>
        <TextInput
            onChangeText={(text) => this.filterSearch(text)}
            value={this.state.text}
          />
        <List>
          {users.map((user) => (
            <ListItem
              key={user.login.username}
              roundAvatar
              avatar={{ uri: user.picture.thumbnail }}
              title={`${user.name.first.toUpperCase()} ${user.name.last.toUpperCase()}`}
              subtitle={user.email}
              onPress={() => this.onLearnMore(user)}
            />
          ))}
        </List>
      </ScrollView>
    );   } }

export default Feed;

import React，{Component}来自'React'；
从“react native”导入{Text，View，ScrollView，TextInput，}；
从“react native elements”导入{List，ListItem}；
从“../config/data”导入{users}；
类提要扩展组件{构造函数（props）{
超级（道具）；
此.state={
用户：“”，
}}onLearnMore=（用户）=>{
navigate（'Details'，{…user}）；}；
过滤器搜索（文本）{
const newData=users.filter（（项）=>{
const itemData=item.name.first.toUpperCase（）
const textData=text.toUpperCase（）
返回itemData.indexOf（textData）>-1
})
这是我的国家({
文本：文本
})   }
render（）{
返回(
this.filterSearch（文本）}
值={this.state.text}
/>
{users.map（（用户）=>(
this.onLearnMore（用户）}
/>
))}
);   } }
导出默认提要；

---

我一直在网上冲浪，但我发现大部分讨论的是listview，而不是react native elements中的列表项，帮帮我

你几乎是对的。您已成功筛选用户，但在列表中呈现相同的未筛选用户。要轻松更改此设置，可以使用组件状态

示例

import React, { Component } from 'react'; 
import {   Text,   View,   ScrollView,   TextInput, } from 'react-native'; 
import { List, ListItem } from 'react-native-elements'; 
import { users } from '../config/data';

class Feed extends Component {   
  constructor(props){
    super(props);
      this.state = {
        user:'',
        users: users // we are setting the initial state with the data you import
      }
  }   

  onLearnMore = (user) => {
    this.props.navigation.navigate('Details', { ...user });
  };

  filterSearch(text){
    const newData = users.filter((item)=>{
      const itemData = item.name.first.toUpperCase()
      const textData = text.toUpperCase()
      return itemData.indexOf(textData)>-1
    });
    this.setState({
      text:text,
      users: newData // after filter we are setting users to new array
    });
  }

  render() {
    // rather than mapping users loaded from data file we are using state value
    return (
      <ScrollView>
        <TextInput
            onChangeText={(text) => this.filterSearch(text)}
            value={this.state.text}
          />
        <List>
          {this.state.users.map((user) => (
            <ListItem
              key={user.login.username}
              roundAvatar
              avatar={{ uri: user.picture.thumbnail }}
              title={`${user.name.first.toUpperCase()} ${user.name.last.toUpperCase()}`}
              subtitle={user.email}
              onPress={() => this.onLearnMore(user)}
            />
          ))}
        </List>
      </ScrollView>
    );   } }

export default Feed;

import React，{Component}来自'React'；
从“react native”导入{Text，View，ScrollView，TextInput，}；
从“react native elements”导入{List，ListItem}；
从“../config/data”导入{users}；
类提要扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：“”，
用户：用户//我们正在使用您导入的数据设置初始状态
}
}   
onLearnMore=（用户）=>{
this.props.navigation.navigate（'Details'，{…user}）；
};
过滤器搜索（文本）{
const newData=users.filter（（项）=>{
const itemData=item.name.first.toUpperCase（）
const textData=text.toUpperCase（）
返回itemData.indexOf（textData）>-1
});
这是我的国家({
文本：文本，
users:newData//filter之后，我们将用户设置为新数组
});
}
render（）{
//我们使用的不是映射从数据文件加载的用户，而是状态值
返回(
this.filterSearch（文本）}
值={this.state.text}
/>
{this.state.users.map（（user）=>(
this.onLearnMore（用户）}
/>
))}
);   } }
导出默认提要；

为什么我总是回答自己的答案 很抱歉，我浪费了一些空间 但我认为发布这个答案会帮助你们中的一些人，特别是像我这样的初学者

    import React, {Component} from 'react';
import { StyleSheet, Text, View, ListView, TouchableHighlight, TextInput} from 'react-native';
import { List, ListItem } from 'react-native-elements';
import { users } from '../config/data';

export default class Feed extends Component {
  constructor(props){
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2})
    this.state = {
      dataSource: ds.cloneWithRows(users),
      text:'',
    }
  }
  onLearnMore = (rowData) => {
    this.props.navigation.navigate('Details', { ...rowData });
  };
  renderRow(rowData){
    return(
        <ListItem
          key={rowData.login.username}
          roundAvatar
          avatar={{ uri: rowData.picture.thumbnail }}
          title={`${rowData.name.first.toUpperCase()} ${rowData.name.last.toUpperCase()}`}
          subtitle={rowData.email}
          onPress={() => this.onLearnMore(rowData)}
        />
    );
  }
  filterSearch(text){
      const newData = users.filter(function(item){
          const itemData = item.email.toUpperCase()
          const textData = text.toUpperCase()
          return itemData.indexOf(textData) > -1
      })
      this.setState({
          dataSource: this.state.dataSource.cloneWithRows(newData),
          text: text
      })
  }

  render() {
    return (
      <View style={{flex:1}}>
        <TextInput
          onChangeText={(text) => this.filterSearch(text)}
          value={this.state.text}
          />
        <ListView
          enableEmptySections={true}
          style={{marginHorizontal:10}}
          renderRow={this.renderRow.bind(this)}
          dataSource={this.state.dataSource}
        />
      </View>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、列表视图、TouchableHighlight、TextInput}；
从“react native elements”导入{List，ListItem}；
从“../config/data”导入{users}；
导出默认类提要扩展组件{
建造师（道具）{
超级（道具）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）
此.state={
数据源：ds.cloneWithRows（用户），
文本：“”，
}
}
onLearnMore=（行数据）=>{
this.props.navigation.navigate（'Details'，{…rowData}）；
};
renderRow（行数据）{
返回(
this.onLearnMore（rowData）}
/>
);
}
过滤器搜索（文本）{
const newData=users.filter（函数（项）{
const itemData=item.email.toUpperCase（）
const textData=text.toUpperCase（）
返回itemData.indexOf（textData）>-1
})
这是我的国家({
dataSource:this.state.dataSource.cloneWithRows（newData），
文本：文本
})
}
render（）{
返回(
this.filterSearch（文本）}
值={this.state.text}
/>
);
}
}

只需比较问题代码和答案代码 最后，我通过阅读下面的链接得到了答案

---

欢迎再次查看

我在另一个问题中写下了这个解决方案：@MetehanSenol谢谢你的参考