React Native 是一个基于 React 的移动应用开发框架，可以实现跨平台的应用开发。@react-native-community/picker 是 React Native 社区开发的一个组件库，用于构建选择器组件，可以用于选择日期、时间、下拉列表等。
在本文中，我们将介绍 @react-native-community/picker 的使用教程，包括安装、引用、样式设置、数据源等方面的内容，帮助你快速掌握这个组件的使用方法。
1. 安装与引用
要使用 @react-native-community/picker，首先需要安装对应的 npm 包，可以使用以下命令进行安装：
npm install @react-native-community/picker
安装完成后，可以在项目中引用该组件，例如：
import {Picker} from '@react-native-community/picker';2. 基本使用
使用 @react-native-community/picker 进行基本的选择器组件构建，只需要设置一个数据源（items），和一个当前选中的值（selectedValue）即可。例如：
<Picker
selectedValue={this.state.language}
onValueChange={(itemValue, itemIndex) =>
this.setState({language: itemValue})
}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>在这个示例中，我们通过设置 selectedValue 和 onValueChange 属性来指定当前选中的值，并通过设置 Picker.Item 组件的 label 和 value 属性来指定选择器的每个选项。
3. 样式设置
默认情况下，@react-native-community/picker 的样式是由系统来设置的，但是可以通过设置 style 和 itemStyle 属性来自定义组件的样式。
style 属性用于设置选择器整体的样式，例如：
-- -------------------- ---- -------
-------
--------------- --- ------ -----
-----------------------------------
-------------------------- ---------- --
------------------------ -----------
--
------------ ------------ ------------ --
------------ ------------------ ---------- --
---------在这个示例中，我们通过设置 style 属性来指定选择器的宽度和高度。
itemStyle 属性用于设置选择器中每个选项的样式，例如：
-- -------------------- ---- -------
-------
--------------- --- ------ -----
--------------------- --- ------ -------
-----------------------------------
-------------------------- ---------- --
------------------------ -----------
--
------------ ------------ ------------ --
------------ ------------------ ---------- --
---------在这个示例中，我们通过设置 itemStyle 属性来指定选择器中每个选项的字体大小和颜色。
4. 数据源设置
除了设置选择器的样式外，还可以根据实际需求设置数据源。@react-native-community/picker 的数据源可以是任何数组类型的数据，例如：
-- -------------------- ---- -------
----- --------- - -
------- ----- ------ ------
------- ----- ------ ------
------- ----- ------ ------
--
-------
--------------- --- ------ -----
----------------------------------
-------------------------- ---------- --
----------------------- -----------
--
------------------------ ------ -- -
------------ --------------------- --------------------- ----------- --
---
---------在这个示例中，我们通过设置一个 countries 数组来作为选择器的数据源，并通过数组的 map 方法将其转换为 Picker.Item 组件。
5. 总结
本文介绍了 @react-native-community/picker 的使用方法，包括安装、引用、样式设置、数据源等方面的内容。通过本文的学习，相信你已经掌握了这个组件的基本使用方法，可以在实际应用中灵活运用，帮助你开发出更加优秀的移动应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb430b5cbfe1ea0611248