React Native 是以 React 为基础的移动应用开发框架，而绝大多数 React Native 应用都离不开 npm 包。在这篇文章中，我们将会聚焦于一款重要的 npm 包——react-native-choices，它能为 React Native 应用实现一些强大的多选框组件。
1. 安装 react-native-choices
安装 react-native-choices 十分简单，只需要在终端中输入以下命令：
npm install --save react-native-choices
安装成功后，你就可以愉快地开始在你的 React Native 应用中使用该组件！
2. 示例
让我们来看一下如何使用 react-native-choices。下面的代码给出了一个简单的示例，它展示了该组件的一些基本功能。该组件的名称是 CustomizedMultiSelect，我们将使用它通过一个列表展示多项可供选择的选项。这样，用户就可以从这些选项中选择其中的几项。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ --------------------- ---- -----------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
-------------- ---
------ -
- ------ ------------ ------ ----------- --
- ------ ------------- ------ ------------ --
- ------ ---------- ------ --------- -
-
--
-
------------------ - --------------- -- -
--------------- ------------- ---
-
-------- -
----- - -------------- ----- - - -----------
------ -
------
-------- -------- --- ----- ------ ----------
----------------------
--------------------------------------------
-----------------------------
-------------
--
-------
--
-
-该示例创建了一个独立的 CustomizedMultiSelect 组件并通过它生成一个可供选择的列表。当用户进行选择时，该组件会通过 onSelectionsChange 事件将选中的选项返回给应用程序。
3. 自定义样式
react-native-choices 允许你通过简单的 CSS 样式表修改自定义多选框的外观。在 CustomizedMultiSelect 组件的 props 对象中，你可以传递一个随意的 style 对象或样式表，从而增强你应用程序的外观和体验。
在下面的示例中，我们使用两个自定义样式来修改选项列表和选项选择器中每个元素的外观：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ --------------------- ---- -----------------------
----- --- ------- --------------- -
---
-------- -
----- - -------------- ----- - - -----------
-- -----
----- ------------- - -------
----- ----------- - -
------------- -
---------------- --------------
--
------------- -
---------------- --------------
--
--------- -
---------------- -------
--
---------------- -
------ -------
-
--
------ -
------
-------- -------- --- ----- ------ ----------
----------------------
--------------------------------------------
-----------------------------
-------------
--------------------
--
-------
--
-
-4. 结论
在这篇文章中，我们一起学习了如何使用 react-native-choices 包建立在 React Native 之上的多选框组件。我们通过实际操作展示了这个组件的基本用法和如何自定义它的样式。借助 react-native-choices，在你的 React Native 应用程序中加入一个漂亮的、易于使用的、可大幅改进用户交互体验的多选框组件，是非常容易的！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8381e8991b448d9150