在 FlatList 上使用 React Native 搜索过滤器 - Javascript

概述

在 React Native 应用程序中，FlatList 是一个非常常用的组件，用于展示列表数据。有时候，我们需要给数据添加搜索过滤功能，使得用户可以方便地查找所需数据。

本文将介绍如何在 FlatList 上使用 React Native 实现搜索过滤器。

实现步骤

创建页面

首先，我们需要创建一个页面，包括一个 FlatList 组件、一个搜索框和一个搜索按钮。

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, FlatList } from 'react-native';

const DATA = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Peter' },
  { id: 3, name: 'Mark' },
  { id: 4, name: 'Lisa' },
  { id: 5, name: 'Mary' },
];

const ListItem = ({ item }) => (
  <View style={{ padding: 10 }}>
    <Text>{item.name}</Text>
  </View>
);

const SearchFilter = () => {
  const [searchText, setSearchText] = useState('');
  const [searchData, setSearchData] = useState(DATA);

  const handleSearch = () => {
    const filteredData = DATA.filter((item) => item.name.includes(searchText));
    setSearchData(filteredData);
  };

  return (
    <View style={{ padding: 10 }}>
      <View style={{ padding: 10 }}>
        <TextInput
          style={{ borderWidth: 1, borderColor: '#ccc', padding: 10 }}
          placeholder="Search"
          value={searchText}
          onChangeText={setSearchText}
          onSubmitEditing={handleSearch}
        />
        <TouchableOpacity
          style={{ backgroundColor: 'blue', padding: 10, borderRadius: 5, marginTop: 10 }}
          onPress={handleSearch}
        >
          <Text style={{ color: '#fff' }}>Search</Text>
        </TouchableOpacity>
      </View>
      <FlatList
        data={searchData}
        renderItem={ListItem}
        keyExtractor={(item) => item.id.toString()}
      />
    </View>
  );
};

export default SearchFilter;

实现搜索功能

接下来，我们需要实现搜索功能。在搜索框中输入文本，点击搜索按钮即可触发搜索函数。搜索函数通过 filter 方法筛选出符合条件的数据，然后更新 FlatList 的数据源。

const handleSearch = () => {
  const filteredData = DATA.filter((item) => item.name.includes(searchText));
  setSearchData(filteredData);
};

显示列表数据

最后，我们需要在 FlatList 中展示数据。可以自定义一个 ListItem 组件用于渲染 FlatList 的每一项数据。在 renderItem 中传入这个组件即可。

const ListItem = ({ item }) => (
  <View style={{ padding: 10 }}>
    <Text>{item.name}</Text>
  </View>
);

<FlatList
  data={searchData}
  renderItem={ListItem}
  keyExtractor={(item) => item.id.toString()}
/>

总结

在 React Native 应用程序中，使用 FlatList 展示列表数据是很常见的操作。给数据添加搜索过滤功能也是提高用户体验的一项常见操作。本文介绍了如何在 FlatList 上使用 React Native 实现搜索过滤器。

完整代码：https://github.com/NancyLv/SearchFilter。

欢迎大家提供意见和建议，谢谢！