我一直想在这个列表项中添加搜索过滤器,但是有些困惑。如果您对此有经验,请查看我的代码。
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的列表项。请帮帮我!