如何在 React Native 中添加 SearchBar？

在本文中，我们将在 React-Native 中添加搜索功能。这可以看作是对 React 原生 flatlist 组件/的延续。在上述文章中，我们使用 Flatlist 组件创建了一个平面列表，让我们使用 SearchBar 组件使其可搜索。要将 SearchBar 添加到您的平面列表中，基本语法如下所示：

基本语法：

方法：上面的语法在你的应用程序中添加了一个标准的特定于平台的搜索栏，它通常是一个带有输入空间的矩形框。滚动到实现部分后，您会注意到我们添加了一个 prop 占位符，用于指定搜索栏打开时显示的默认值。此外，我们希望搜索栏以圆形边缘为轻主题，因此有以下道具。现在，当我们要搜索一个值时，我们希望在搜索栏中显示该值，为此我们从Search类中添加一个对象搜索值，默认情况下它是空的，但是当我们输入它时，它会被修改并且存储我们当前的文本输入。由于搜索值是自定义的，我们关闭自动更正选项并在搜索字段中输入文本后立即调用搜索函数。

SearchBar 中的道具：

cancelButtonProps：它指定传递给取消按钮的各种道具，这些可以自定义它的颜色、按钮样式、文本颜色等。
cancelButtonTitle：用于自定义右侧出现的取消按钮的标题。
cancelIcon：这个道具允许覆盖图标道具或使用自定义组件，这也是特定于Android平台的。
clearIcon：此道具允许覆盖图标道具或使用自定义组件。可以使用 null 或 false 等值来隐藏图标。
containerStyle： SearchBar 的容器可以使用这个属性进行风格化。
inputContainerStyle：该属性用于设置输入文本的容器的样式。
inputStyle：此属性用于对输入文本进行样式化。
leftIconContainerStyle：设置左侧图标容器的样式。
lightTheme ：此道具将主题更改为浅色主题。
loadingProps：这个道具被传递给 ActivityIndicator。
onCancel：当按下取消按钮 (iOS) 或后退图标 (Android) 时，此属性会触发回调。
onChangeText：此道具调用在文本更改时应触发的方法。
onClear：这指定了在清除输入时触发的方法。
placeholder：该道具用于设置占位符文本。
placeholderTextColor：此属性设置占位符文本的颜色。
platform：这个属性指定搜索栏的外观。可供选择的值是“default”、“ios”、“android”。
rightIconContainerStyle：我们可以使用该属性设置右侧的图标容器样式。
round ：此道具用于将 TextInput 样式更改为圆角。
searchIcon：此道具允许覆盖图标道具或使用自定义组件。使用 null 或 false 隐藏图标。
showCancel :这个道具如果设置为 true，即使在发生模糊事件后，取消按钮也将保持可见。
showLoading：这个道具显示加载ActivityIndicator效果。
underlineColorAndroid：此属性指定透明下划线颜色，而不是默认颜色。

执行：

第 1 步：打开终端并安装 expo-cli （如果尚未安装）。
```
npm install --global expo-cli
```
第2步：安装后让我们初始化一个项目，如果还没有完成。
```
expo init dummy
```
第 3 步：现在导航到您的项目。
```
cd dummy
```

文件夹结构：如果您按照上述步骤操作，您的文件夹结构应该如下所示。

示例：现在让我们看看如何使用上述方法添加搜索栏。

App.js

import React, { Component } from "react";
import { StyleSheet, Text, View, FlatList } from "react-native";
import { ListItem, SearchBar } from "react-native-elements";
import filter from "lodash.filter";
  
const DATA = [
  {
    id: "1",
    title: "Data Structures",
  },
  {
    id: "2",
    title: "STL",
  },
  {
    id: "3",
    title: "C++",
  },
  {
    id: "4",
    title: "Java",
  },
  {
    id: "5",
    title: "Python",
  },
  {
    id: "6",
    title: "CP",
  },
  {
    id: "7",
    title: "ReactJs",
  },
  {
    id: "8",
    title: "NodeJs",
  },
  {
    id: "9",
    title: "MongoDb",
  },
  {
    id: "10",
    title: "ExpressJs",
  },
  {
    id: "11",
    title: "PHP",
  },
  {
    id: "12",
    title: "MySql",
  },
];
  
const Item = ({ title }) => {
  return (
    
      {title}
    
  );
};
  
const renderItem = ({ item }) => ;
class Search extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: DATA,
      error: null,
      searchValue: "",
    };
    this.arrayholder = DATA;
  }
  
  searchFunction = (text) => {
    const updatedData = this.arrayholder.filter((item) => {
      const item_data = `${item.title.toUpperCase()})`;
      const text_data = text.toUpperCase();
      return item_data.indexOf(text_data) > -1;
    });
    this.setState({ data: updatedData, searchValue: text });
  };
  
  render() {
    return (
      
         this.searchFunction(text)}
          autoCorrect={false}
        />
         item.id}
        />
      
    );
  }
}
  
export default Search;
  
const styles = StyleSheet.create({
  container: {
    marginTop: 30,
    padding: 2,
  },
  item: {
    backgroundColor: "#f5f520",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
});

运行应用程序：现在，通过运行以下命令启动服务器

npm run web

您可以从 Expo Go 应用程序扫描生成的 QR 码并获取此输出。

输出：

参考： https://reactnativeelements.com/docs/searchbar/