React Native 是一种 JavaScript 框架，可以将代码转换为原生 iOS 和 Android 应用程序。React Native 提供了很多常用的组件，但有时也需要使用第三方库来帮助开发。在本文中，我们将介绍如何使用 npm 包 react-native-scroll-picker，它可以帮助我们创建可滚动的选择器。
安装
首先，使用 npm 安装 react-native-scroll-picker：
npm install react-native-scroll-picker --save
安装完毕后，需要使用“link”命令链接库：
react-native link react-native-scroll-picker
接下来，运行应用程序以使更改生效。
用法
在此 npm 包中，我们将使用 ScrollView 和 Text 组件（也可以用自己的组件）来创建一个可滚动的选择器。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----------- ---- - ---- ---------------
------ ------------ ---- -----------------------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
-------------- ---
--------- -
---- ---- ---- ---- ---- ---- ---- ---- ---- -----
----- ----- ----- ----- ----- ----- ----- ----- ----- -----
----- ----- ----- ----- ----- ----- ----- ----- ----- -----
----- ----- ----- ----- ----- ----- ----- ----- ----- -----
----- ----- ----- ----- ----- ----- ----- ----- ----- ----
-
--
-
-------- -
------ -
----- -------- ---------- -- ---
----------- ------------------------ ----------- -------- -- -----------
-------------
--------------------------------
----------------------------------------
---------------------- ------ -- -
---------------
-------------- -----
---
--
-------------------
-----------------
-----------------------------
---------------
--------------------------
------------------------
---------------------- ------ ----- --
--
-
------------------------------ ------ -- -
------ -
----- ----------- -------- -------- -- ---
----- -------- ------ ------ ----------------
---------
--
-
-------------
-------
--
-
-
------ ------- ----dataSource 属性表示我们要在滚动选择器中显示的数据，selectedIndex 属性将选择器默认选中值一开始初始化（也可在 onValueChange 方法中随时更新），onValueChange 方法是选择器选中数据值的回调事件，wrapperHeight 和 wrapperWidth 表示选择器的高度和宽度。
itemHeight 属性表示选择器中单个数据项的高度，highlightColor 表示选择器中被高亮显示的区域的背景色，highlightBorderWidth 表示被高亮显示的区域的边界宽度，activeItemTextStyle 属性表示选中数据值的样式。
结论
使用 npm 包 react-native-scroll-picker 来创建可滚动的选择器非常简单。在本文中，我们了解了如何安装库，以及如何使用该库。我们使用 ScrollView 和 Text 组件创建了一个示例，该示例显示了如何在这个选择器中显示数据，如何选中数据，如何更改样式等。在此基础上，您可以创建自己的选择器，并根据您的需要加以扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5e51ab1864dac67137