在 React Native 中，Picker 是一个常用的组件，可以用于选择一组预定义的选项。在这篇文章中，我们将介绍如何使用 react-native-elements 库来实现 Picker 组件，同时提供详细的示例代码和指导意义。
安装 react-native-elements
在开始之前，需要先安装 react-native-elements。可以使用 npm 进行安装：
--- ------- ---------------------
使用 react-native-elements 的 Picker 组件
在 react-native-elements 中，Picker 组件是一个封装了原生 Picker 的高阶组件。它提供了一些额外的功能，如自定义样式、多项选择、默认值等。
首先，需要导入 Picker 组件：
------ - ------ - ---- ------------------------
然后，可以在组件中使用 Picker：
-------
----------------------------------------
-------------------------- ---------- --
----------------------------- -----------
--
------------ ------------- -- --------------- --
------------ ------------- -- --------------- --
------------ ------------- -- --------------- --
---------在上面的代码中，我们创建了一个 Picker 组件，并设置了三个选项。selectedValue 属性指定了当前选中的值，onValueChange 属性则用于监听选中值的变化。
自定义样式
react-native-elements 的 Picker 组件允许自定义样式。可以使用 style 属性来设置 Picker 的样式，同时也可以通过 itemStyle 和 textStyle 属性来设置选项的样式。
-------
------------------------ -------- ------------- ---
---------------------------- ---------
------------------ ---------
----------------------------------------
-------------------------- ---------- --
----------------------------- -----------
--
------------ ------------- -- --------------- --
------------ ------------- -- --------------- --
------------ ------------- -- --------------- --
---------在上面的代码中，我们设置了 Picker 的背景色和圆角，同时也设置了选项的背景色和文字颜色。
多项选择
如果需要实现多项选择，可以将 Picker 的 mode 属性设置为 'dropdown'，然后通过 selectedValue 属性来指定选中的值。
-------
---------------
-----------------------------------------
-------------------------- ---------- --
------------------------------ ------------------------------ ------------
--
------------ ------------- -- --------------- --
------------ ------------- -- --------------- --
------------ ------------- -- --------------- --
---------在上面的代码中，我们设置了 Picker 的 mode 属性为 'dropdown'，并将 selectedValue 属性设置为数组。当选中一个选项时，我们将其值添加到数组中。
默认值
如果需要设置 Picker 的默认值，可以将 selectedValue 属性设置为所需的值。
-------
----------------------------------------
-------------------------- ---------- --
----------------------------- -----------
--
------------ ------------- -- --------------- --
------------ ------------- -- --------------- --
------------ ------------- -- --------------- --
---------在上面的代码中，我们将 selectedValue 属性设置为组件的状态值，从而实现了默认值的设置。
总结
在本文中，我们介绍了如何使用 react-native-elements 库来实现 Picker 组件。我们讨论了如何自定义样式、实现多项选择以及设置默认值。希望这篇文章能够帮助你更好地使用 React Native 开发应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65670217d2f5e1655dfebf83