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