如何在 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

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

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

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

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

欢迎再次查看