react-native-scrollable-select 是一个 React Native 的滚动选择组件。借助这个包，你可以非常快速灵活地实现各种下拉选择框，非常适合用于移动端。
安装
使用 npm 安装：
npm install --save react-native-scrollable-select
使用
基础用法
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- ---------------------------------
----- --- - -- -- -
----- ------- --------- - ---------------
----- ----- - -
- ------ --- --- ------ - --
- ------ --- --- ------ - --
- ------ --- --- ------ - --
- ------ --- --- ------ - --
- ------ --- --- ------ - --
--
------ -
-------
-------------
------------------- -- ---------------------
---------------------
--
--
--
------ ------- ----
高级用法
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------ ---- ---------------------------------
----- --- - -- -- -
----- ------- --------- - ---------------
----- ------------ - -
-------------- -
---------------- ----------
------------- ---
----------------- ---
--------------- ---
------------------ ---
---------------- ---
--
----------- -
------ -------
--------- ---
----------- -------
--
---------------------- -
---------------- -------
--
------------------- -
------ ------
--
--
----- ----- - -
- ------ --- --- ------ - --
- ------ --- --- ------ - --
- ------ --- --- ------ - --
- ------ --- --- ------ - --
- ------ --- --- ------ - --
--
------ -
-------
-------------
------------------- -- ---------------------
---------------------
-------- ---------------- ------- ---------------- -- --
--------------------
----------------- ---------------- -------- ------------- -- --
---------------------------
--
--
--
------ ------- ----使用上面的代码，你可以自定义各个选项的样式，以及添加搜索框，并对选中的选项使用不同的样式进行区分。
参数
items（必填项）：可选项列表onItemPress（必填项），选中某一项时的回调函数selectedValue，选中的值style，组件的样式showSearchBox，是否显示搜索框searchBoxStyle，搜索框的样式customStyles，自定义选项和选中选项的样式
效果截图
总结
通过这篇文章，我们了解了如何使用 react-native-scrollable-select 这个组件来构建移动端的下拉选框。此外，我们还介绍了该组件的基本用法和高级用法，并提供了一些示例代码。
总之，这是一个非常实用和灵活的组件，它可以帮助开发者们快速构建出各种下拉选框，极大地提高了开发效率，值得推荐！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b6251ab1864dac67393