在本文中，我们将在 React-Native 中添加搜索功能。这可以看作是 React native flatlist 组件 的延续。在上一篇文章中，我们使用 Flatlist 组件创建了一个平面列表。现在，让我们使用 SearchBar 组件为其添加搜索功能。要向你的 Flatlist 添加 SearchBar，基本语法如下所示。让我们先看一个演示视频，了解一下我们要开发的内容。
演示视频
语法
实现方法
上述语法在你的应用程序中添加了一个标准的特定于平台的搜索栏，通常是一个带有输入空间的矩形框。在滚动到实现部分时，你会注意到我们添加了一个 INLINECODE784f1c32（占位符）属性，它指定了搜索栏打开时显示的默认值。此外，为了让搜索栏具有浅色主题和圆角边缘，我们需要设置以下属性。现在，当我们想要搜索一个值时，我们希望显示在搜索栏中输入的那个值，为此我们从 INLINECODE51a6e088 类中添加一个对象搜索值（search value），默认情况下它是空的，但当我们输入时，它会被修改并存储我们当前的文本输入。由于搜索值是自定义的，我们关闭了自动更正选项，并在搜索字段中输入文本后立即调用搜索函数。
SearchBar 中的属性
描述
—
它指定传递给“取消”按钮的各种属性，可以自定义其颜色、按钮样式、文本颜色等。
它用于自定义位于右侧的取消按钮的标题。
此属性允许你覆盖 Icon 属性或使用自定义组件，此外，这特定于 Android 平台。
此属性允许你覆盖 Icon 属性或使用自定义组件。可以使用 INLINECODE4778a585 或 INLINECODE1332ef7a 等值来隐藏图标。
可以使用此属性对 SearchBar 的容器进行样式设置。
此属性用于设置输入文本的容器的样式。
此属性用于设置输入文本的样式。
设置左侧图标容器的样式。
此属性将主题更改为浅色主题。
此属性传递给 ActivityIndicator。
当按下取消按钮 (iOS) 或返回图标 (Android) 时，此属性让回调触发。
此属性调用文本更改时应触发的方法。
这指定了清除输入时要触发的方法。
此属性用于设置占位符文本。
此属性设置占位符文本的颜色。
此属性指定搜索栏的外观和感觉。可供选择的值有 "default"、"IOS"、"Android"。
我们可以使用此属性设置右侧图标容器的样式。
此属性用于将 TextInput 样式更改为圆角。
此属性允许你覆盖 Icon 属性或使用自定义组件。使用 INLINECODE3ef37fe5 或 INLINECODE2ae0bfe2 来隐藏图标。
如果将此属性设置为 true，即使在失去焦点事件后，取消按钮也将保持可见。
此属性显示加载中的 ActivityIndicator 效果。
此属性指定除默认颜色之外的透明下划线颜色。## 分步实现
步骤 1： 创建 React Native 项目
现在，使用以下命令创建一个项目。
npx create-expo-app ****app-name**** --template
> 注意：将 app-name 替换为你的应用程序名称，例如：react-native-demo-app
接下来，系统可能会要求你 选择一个模板。根据你的偏好选择一个，如下图所示。我选择了 空白（blank） 模板，因为它会生成 一个最小的应用程序，就像 JavaScript 中的空白画布一样干净。
它完成了项目创建并显示一条消息：“Your Project is ready!”（你的项目已准备就绪！），如下图所示。
!<a href="https://media.geeksforgeeks.org/wp-content/uploads/20250430102701965702/Completionofreactnativeproject.png">image
现在进入你的项目文件夹，即 react-native-demo
cd app-name
项目结构：
!<a href="https://media.geeksforgeeks.org/wp-content/uploads/20250430102911569961/folderstructureofreactnative_project.png">image
步骤 2：运行 应用程序
使用以下命令启动服务器。
npx expo start
然后，应用程序将显示一个二维码。
- 对于 Android 用户，
- 对于 Android 模拟器，按文中提到的“a” 键