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/

随时再次查看

如何使用react-native中的列表项进行搜索过滤

2 个答案: