如何在 react-native 中使用列表项制作搜索过滤器

Question

我一直想在这个列表项中做搜索过滤器，但我有点困惑，如果你有这方面的经验，请看看我的代码。

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;

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

Answer 1

你几乎是正确的。您成功过滤了用户，但随后在列表中呈现相同的未过滤用户。要轻松更改此设置，您可以使用组件状态。

例子

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;

Answer 2

为什么我一直在回答我自己的答案我对这个论坛感到很抱歉，我浪费了一些 space 但我认为发布这个答案会对你们中的一些人尤其是像我这样的初学者有所帮助

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

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

https://react-native-training.github.io/react-native-elements/API/lists/

欢迎再次查看

如何在 react-native 中使用列表项制作搜索过滤器

How to make search filter with list item in react-native

android

list

listview

react-native

listitem