在 React Native 开发中，选择器（Picker）是常见的组件之一。@cqingwang/react-native-wheel-picker 是一个 React Native 自定义选择器组件库，提供了类似 iOS 的滚轮式选择器，支持多种数据类型。
本文将会详细介绍 @cqingwang/react-native-wheel-picker 的使用方法，并提供示例代码以帮助你快速上手。
安装
通过 npm 安装 @cqingwang/react-native-wheel-picker：
npm install @cqingwang/react-native-wheel-picker --save
基本用法
在使用该组件前，需要先导入：
import WheelPicker from '@cqingwang/react-native-wheel-picker';
在界面中使用：
<WheelPicker
data={data}
onItemSelected={this.onItemSelected}
selectedItem={this.state.selectedItem}
/>其中，data 是一个数组，用于渲染 Picker 中的选择项，例如：
const data = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
onItemSelected 回调函数将在用户选择项时被触发，它接受一个参数 index，表示用户选择的是 data 数组中的哪一项。
selectedItem 是可选的，它用于设置默认选中的值，例如：
this.state = { selectedItem: 1 };高级用法
自定义样式
WheelPicker 可以通过 style 属性来设置自定义样式，例如：
<WheelPicker
data={data}
onItemSelected={this.onItemSelected}
selectedItem={this.state.selectedItem}
style={{ width: 200, height: 150 }}
/>自定义数据类型
除了字符串类型，WheelPicker 也可以渲染其他数据类型，例如数字类型：
const data = [1, 2, 3, 4, 5];
日期类型：
const data = [ new Date(2021, 0, 1), new Date(2021, 1, 1), new Date(2021, 2, 1), new Date(2021, 3, 1), new Date(2021, 4, 1), ];
动态数据更新
WheelPicker 支持动态更新数据，只需将新数据传递给 WheelPicker 组件的 data 属性即可，例如：
-- -------------------- ---- ------- ------------ ---------------------- ------------------------------------ -------------------------------------- -------- ------ ---- ------- --- -- -- ------------ - ----- ------- - ---------- ------- ---------- ----- --------------- - -- --------------- ----- -------- ------------- --------------- --- -
自定义 item 模板
如果你需要自定义每个选择项的模板，可以使用 renderItem 方法，例如：
-- -------------------- ---- -------
---------------- ------ -
------ -
----- ------------
------
--------- ---- ---------- --
-------- ------ --- ------- -- --
--
------------------------
-------
--
-
------------
----------------------
------------------------------------
--------------------------------------
----------------------------
--示例代码
下面是一个完整的 @cqingwang/react-native-wheel-picker 示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ------ ------ - ---- ---------------
------ ----------- ---- ---------------------------------------
------ ------- ----- --- ------- --------- -
------------------ -
-------------
---------- - -
----- -
-
----- --------
------ ---------------------------------------
--
-
----- ---------
------ ---------------------------------------
--
-
----- ---------
------ ---------------------------------------
--
-
----- -------
------ ---------------------------------------
--
-
----- -------------
------ ---------------------------------------
--
--
------------- --
--
--------------- - ---------------------------
------------------- - -------------------------------
--------------- - ---------------------------
-
---------------- ------ -
------ -
----- ------------
------
--------- ---- ---------- --
-------- ------ --- ------- -- --
--
------------------------
-------
--
-
--------------------- -
--------------- ------------- ----- ---
-
------------ -
----- ------- - -
-
----- ---------
------ ---------------------------------------
--
-
----- -------
------ ---------------------------------------
--
-
----- ---------
------ ---------------------------------------
--
--
----- --------------- - --
--------------- ----- -------- ------------- --------------- ---
-
-------- -
------ -
----- -------- ----- -- ----------- -------- ---
------------
----------------------
------------------------------------
--------------------------------------
----------------------------
--
------------------------------------------------------------
------- ------------- ----- ------------------------- --
-------
--
-
-结语
通过本文，你已经学会了如何使用 @cqingwang/react-native-wheel-picker 自定义选择器组件库。使用该组件可以很方便地实现和 iOS 类似的滚轮式选择器。
如果你想要进一步学习 React Native 开发，请移步官方文档：https://reactnative.cn/docs/getting-started.html。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c2d81e8991b448d9ced