如果你正在开发一个 React Native 应用程序，并需要一个多项选择器，那么 react-native-multiple-picker 可能就是你需要的解决方案。它能够轻松地创建能够显示数个选项的选择器。
前置条件
在使用 react-native-multiple-picker 之前，你需要确保在 React Native 环境中存在以下依赖项：
- React Native >= 0.60
- @react-native-community/picker >= 1.6.5
安装
通过在终端上运行以下命令以安装 react-native-multiple-picker：
npm install react-native-multiple-picker --save
如果你正在使用 yarn，则运行以下命令：
yarn add react-native-multiple-picker
如何使用
以下是使用 react-native-multiple-picker 的步骤：
导入 MultiplePicker 组件
import MultiplePicker from 'react-native-multiple-picker';
准备数据
准备适当的数据以传递给组件。
-- -------------------- ---- ------- ----- ---- - - - ------ ------- --- ------ ---------- -- - ------ ------- --- ------ ---------- -- - ------ ------- --- ------ ---------- -- --渲染组件
将数据作为 props 传递给组件，并为 onChange 事件添加处理函数。
<MultiplePicker data={data} onChange={(selectedValues) => { console.log(selectedValues); }} />
属性
下面是 MultiplePicker 组件的可用属性：
| 属性名 | 类型 | 说明 |
|---|---|---|
| data | Array | 必需。数据数组，用于显示在选择器中的项。带有 label 和 value 的对象数组 |
| valueKey | String | 可选。value 键的名称。默认为 'value' |
| labelKey | String | 可选。label 键的名称。默认为 'label' |
| selected | Array | 可选。一个数组，包含选定选项的 value 值数组 |
| onChange | Function(selectedValues) | 可选。当选择器的选定值更改时调用的回调函数。selectedValues 是选定的 value 值的数组 |
| title | String | 可选。选择器的标题 |
| titleStyle | Object | 可选。标题的样式 |
| itemStyle | Object | 可选。选择器中每个选项的样式 |
| selectedItemStyle | Object | 可选。已选中的选项的样式 |
| submitText | String | 可选。选择器中提交按钮的文本 |
| cancelText | String | 可选。选择器中取消按钮的文本 |
| submitButtonStyle | Object | 可选。提交按钮的样式 |
| cancelButtonStyle | Object | 可选。取消按钮的样式 |
| modalStyle | Object | 可选。选择器模态框的样式 |
| style | Object | 可选。组件的样式。 |
示例代码
下面是一个示例，演示如何使用 react-native-multiple-picker：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ----- ---------- - ---- ---------------
------ -------------- ---- -------------------------------
----- --- - -- -- -
----- ---------------- ------------------ - -------------
----- ---- - -
-
------ ------- ---
------ ----------
--
-
------ ------- ---
------ ----------
--
-
------ ------- ---
------ ----------
--
--
------ -
----- -------------------------
----- -------------------------- ------ -------- ------ --------------
---------------
-----------
-------------------------
-------------------------- -- -
----------------------------------
--
------------- --------
---------------
-------------------
----------------------------
--------------------------------------------
--------------------------------------------
--------------------------------------------
------------------------------
----------------------------------
--
----- ----------------------------------------------------- ----------
-------
--
--
----- ------ - -------------------
---------- -
----- --
---------------- -------
----------- ---------
--------------- ---------
--
------ -
--------- ---
----------- -------
------------- ---
--
---------- -
--------- ---
------ -------
--
------------------ -
--------- ---
----------- -------
------ -------
--
------------------ -
---------------- -------
-------- ---
--
------------------ -
---------------- -------
-------- ---
--
----------- -
---------------- -------- -- -- ------
--
-------------------- -
------ ------
------- ------
--
--------------- -
--------- ---
---------- ---
--
---
------ ------- ----总结
本文介绍了如何使用 npm 包 react-native-multiple-picker，在 React Native 应用程序中轻松地创建多项选择器。我们了解了如何安装 react-native-multiple-picker，并提供了示例代码。此外，还介绍了可用的组件属性列表，以帮助您开始并适应组件。
react-native-multiple-picker 在开发过程中非常有用。它可以使多选框的创建过程更加简单和快捷，并且是 React Native 开发的一个非常方便的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de1f9