在 React Native 中从列表中搜索

Question

我只想知道如何在 React Native 中实现搜索功能。我有一个非常大的文本列表（在本地 js 文件中）和文本输入 space。我想让当用户输入一些东西时，他们可以从下面的列表中找到他们想要的东西。这是我的应用程序代码和屏幕截图。我是编程新手，所以请使用简单的术语 =) app screenshot

project datebase sample

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar, TextInput } from 'react-native';

import {DATA} from "../Data/AbrData";


const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const SearchScreen = ({navigator}) => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
      
    <SafeAreaView style={styles.container}>
        <TextInput
            style={{
                height: 50,
                borderColor: '#919191',
                borderWidth: 1,
                margin: 10,
                paddingLeft: 15,
                borderRadius:10
                    
            }}
            placeholder="Axtaris..."
            
        />
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
    marginBottom:75,
    

  },
  item: {
    backgroundColor: '#ededed',
    padding: 20,
    marginVertical: 2,
    marginHorizontal: 10,
    borderRadius: 20,
  },
  title: {
    fontSize: 20,
  },
});

export default SearchScreen;

Answer 1

我建议观看这个视频！我从该视频中学习了如何简单地过滤列表。很普通的js但是思路是一样的

https://www.youtube.com/watch?v=TlP5WIxVirU&ab_channel=WebDevSimplified

如果您查看该视频的回购协议，它可以归结为以下内容：

searchInput.addEventListener("input", e => {
  const value = e.target.value.toLowerCase()
  users.forEach(user => {
    const isVisible =
      user.name.toLowerCase().includes(value) ||
      user.email.toLowerCase().includes(value)
    user.element.classList.toggle("hide", !isVisible)
  })
})

每次输入发生变化（有人在搜索字段中键入内容）时，都会触发事件侦听器并将字段转换为小写并将其与您要查找的值进行比较。如果文本包含值，它将从列表中取消隐藏。它对数据集中的每个条目都执行此操作，从而将数据集过滤为您要查找的内容。

Answer 2

真快，这就是我想出来的。

import React, {useState, useEffect} from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  View,
  FlatList,
  TextInput,
} from 'react-native';

const App = () => {
  const DATA = [{title: 'lorumn ispum'}, {title: 'lorumn ispum'}];
  const [searchText, onChangeSearch] = useState('');
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    const filtered = DATA.filter(item =>
      item.title.toLowerCase().includes(searchText.toLowerCase()),
    );
    if (searchText === '') {
      return setFilteredData(DATA);
    }

    setFilteredData(filtered);
  }, [searchText]);

  const Item = ({title}) => (
    <View style={styles.item}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );

  const renderItem = ({item}) => <Item title={item.title} />;

  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        style={{
          height: 50,
          borderColor: '#919191',
          borderWidth: 1,
          margin: 10,
          paddingLeft: 15,
          borderRadius: 10,
        }}
        onChangeText={newText => onChangeSearch(newText)}
        placeholder="Axtaris..."
      />
      <FlatList
        data={filteredData}
        renderItem={renderItem}
        keyExtractor={(item, index) => item.key}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
    marginBottom: 75,
  },
  item: {
    backgroundColor: '#ededed',
    padding: 20,
    marginVertical: 2,
    marginHorizontal: 10,
    borderRadius: 20,
  },
  title: {
    fontSize: 20,
  },
});

export default App;

在 React Native 中从列表中搜索

Search from list in React Native

search

list

react-native