在 React Native 中，使用 Picker 组件能够让用户选择预定义的选项。然而，当我们需要一些特殊的需求时，Picker 组件就有些力不足。这时，我们可以使用 npm 包 react-native-hardskilled-picker 来满足我们的需求。
什么是 react-native-hardskilled-picker？
react-native-hardskilled-picker 是一个用于 React Native 的定制化 Picker 组件。除了基本的 Picker 功能外，react-native-hardskilled-picker 可以提供通过滚轮选择选项的功能（类似于 iOS 中的 UIPickerView），以及更多的样式和事件监听等。
使用方法
首先我们需要安装 react-native-hardskilled-picker：
--- ------- ------------------------------- ------
然后，我们可以在我们的组件中引入它：
------ ----------------- ---- ----------------------------------
现在我们就可以在组件中使用 HardSkilledPicker 了：
------------------
--------------------------------------------------
----------------------------------------
---------------------- -- ----------------------------- --------
--其中 items 是一个必需的属性，它是一个包含所有选项的字符串数组，如上述示例的 ["Apple","Banana","Cherry","Date","Grape"]。
我们还可以通过 selectedIndex 属性来指定初始化时选中的选项的下标，通过 onValueChange 属性来监听选项选中事件并更新当前选中的下标。
除此之外，HardSkilledPicker 还提供了一些其他的属性，如 textStyle 和 itemStyle 等，用于设置选项文本和整个选项样式。具体使用方法可以查看官方文档。
实现原理
react-native-hardskilled-picker 的实现原理是使用了 React Native 中的 ScrollView 组件。它将传入的所有选项都渲染成 ScrollView 内的 Text 组件。同时，它通过监听 ScrollView 的 onScrollEndDrag 事件，计算出滚动后选中的下标。最后，它在选择过程中会连续几次计算下标，以达到类似于 iOS 中 UIPickerView 的效果。
总结
通过学习 react-native-hardskilled-picker 的使用方法和实现原理，我们不仅能够解决 React Native 中 Picker 组件的不足，还能够深入了解 React Native 的一些底层原理。同时也希望在未来的使用中，我们能够更好地运用这些知识来优化我们的应用。
完整示例代码如下：
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ----------------- ---- ----------------------------------
------ ------- ----- --- ------- --------- -
------------------ -
-------------
---------- - -
-------------- -
--
-
-------- -
------ -
----- ------------- -- ----------- --------- --------------- -----------
----- ----------------- -------------------------------------------
------------------
--------------------------------------------------
----------------------------------------
---------------------- -- ----------------------------- --------
------------ --------- -- --
------------ ------- --- --
--
----- ----------------- -------- -------- ---------------------------------
-------
--
-
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056d6c81e8991b448e705c