在 React Native 中，需要使用下拉选择器时，可以使用一个很方便的 NPM 包——react-native-select-picker，它是一个基于 react-native 的自定义下拉选择器组件，支持多选、单选及联动选择。
本文将指导您如何在您的 React Native 项目中集成并使用 react-native-select-picker 进行开发。
安装 react-native-select-picker
要使用 react-native-select-picker，需要先在项目中安装该 NPM 包。
在项目根目录下打开终端或命令行，并输入以下命令：
--- - -------------------------- ------
注意，如果您正在使用 yarn 包管理器，则需要使用以下命令：
---- --- --------------------------
导入 react-native-select-picker
在需要使用 react-native-select-picker 的组件中，您需要先导入 react-native-select-picker。
------ -------------- ---- -----------------------------
使用 react-native-select-picker
一般情况下，使用 react-native-select-picker 都需要设置一些必要的参数，这里以一个简单的例子进行演示。
------ ------ - -------- - ---- --------
------ - ---- - ---- ---------------
------ -------------- ---- -----------------------------
----- ------------- - -- -- -
----- --------------- ----------------- - ------------------
----- ------- - -
-
------ --------
------ --------
--
-
------ ---------
------ ---------
--
-
------ ---------
------ ---------
--
--
------ -
------
---------------
-----------------
-----------------------------
--------------------------------
--
-------
--
--
------ ------- --------------在这个例子中，我们创建了一个简单的组件，通过 useState 钩子来维护当前选中的值，将选项保存在一个数组中，随后用 RNSelectPicker 渲染出来。
props 参数：
options：数组类型，选项列表。
selectedValue：选中的目标值。
onValueChange：值变化时触发的回调函数。
placeholder：字符串类型，选择器为空时显示的默认文本。
multiple：布尔类型，设置是否为多选。
enabled：布尔类型，设置选择器是否可用。
label：字符串类型，选择器的标签。
cancelButtonText：字符串类型，取消按钮的文本。
confirmButtonText：字符串类型，确认按钮的文本。
title：字符串类型，选择器的标题。
titleStyle：对象类型，配置选择器标题的样式。
buttonStyle：对象类型，自定义按钮的样式。
backdropStyle：对象类型，自定义选择器和模态背景的样式。
textStyle：对象类型，自定义选择器文本的颜色和样式。
itemStyle：对象类型，自定义选择器项目的样式。
结语
在React Native 中使用 react-native-select-picker 还有许多其他属性和用法，并不限于使用我们在此处列出的基本选项。
尝试使用组件并自己探索吧！祝您使用愉快。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005671d81e8991b448e37cc