数据渲染组件使用的是FaltList
import React, { Component } from 'react'
import { Text, View, FlatList, TextInput } from 'react-native'
// 首页
export default class Index extends Component {
constructor(props) {
super(props);
this.state = {
list: [], // 渲染数据
originList: [], // 原始数据
text: '' // 输入文本
}
}
componentDidMount() {
for (let index = 0; index < 20; index++) {
this.state.list.push({ id: index, name: `测试数据${index}` })
}
this.setState({
list: this.state.list,
originList: this.state.list
})
}
// 输入内容
onChangeText = (text) => {
this.setState({
text,
list: this.filterText(text)
})
}
// 关键词过滤
filterText = (text) => {
let data = this.state.originList
if (text) {
return data.filter((v) => {
return Object.keys(v).some((key) => {
return String(v[key]).toLowerCase().includes(text)
})
})
}
return data
}
render() {
return (
<View>
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={(text) => this.onChangeText(text)}
value={this.state.text}
/>
<FlatList
data={this.state.list}
renderItem={({ item, index }) => <Text key={index}>ID:{item.id} 内容：{item.name}</Text>}
/>
</View>
);
}
}
效果图
关键词过滤
