react native实现关键字搜索，自动刷新，使用FaltL

数据渲染组件使用的是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>
    );
  }
}

效果图