@react-native-picker/picker

Android	iOS	PickerIOS	Windows	MacOS
<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/ca448055-c6cf-46b3-a9a8-263d69accbe0.png" width="150">	<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/478aed44-6727-46cf-8c7a-1690a06caba5.png" width="150">	<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/fb196dbc-c4fd-4e68-b140-d40cc4e5ec3a.png" width="150">	<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/1c318039-a6fb-432a-8706-5d50e6047e62.png" width="300">	<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/cda575f9-55be-4c4f-a53d-4acba1cb034e.png" width="300">

支持的版本

@react-native-picker/picker	react-native	react-native-windows
>= 2.0.0	0.61+	0.64+
>= 1.16.0	0.61+	0.61+
>= 1.2.0	0.60+ 或 0.59+ 并使用 Jetifier	不适用
>= 1.0.0	0.57	不适用

开始使用

$ npm install @react-native-picker/picker --save

或

$ yarn add @react-native-picker/picker

对于 React Native v0.60 及以上版本（自动链接）

由于 react-native@0.60 及以上版本支持自动链接，因此无需进行链接过程。 在这里阅读更多关于自动链接的信息。这也适用于 react-native-windows@0.64 及以上版本。

iOS

iOS 上的 CocoaPods 需要额外的步骤：

npx pod-install

Android

无需额外步骤。

<details> <summary>Windows（展开查看详情）</summary>

Windows

在 Windows 上不使用自动链接需要以下额外步骤：

将 ReactNativePicker 项目添加到你的解决方案中。

1. 在 Visual Studio 2019 中打开解决方案
2. 右键单击解决方案资源管理器中的解决方案图标 > 添加 > 现有项目 选择 D:\dev\RNTest\node_modules\@react-native-picker\picker\windows\ReactNativePicker\ReactNativePicker.vcxproj

windows/myapp.sln

在主应用项目中添加对 ReactNativePicker 的引用。在 Visual Studio 2019 中：

右键点击主应用项目 > 添加 > 引用... 从解决方案项目中勾选 ReactNativePicker。

app.cpp

在文件顶部包含的头文件中添加 #include "winrt/ReactNativePicker.h"。

在 InitializeComponent(); 之前添加 PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider());。

MacOS

MacOS 上的 CocoaPods 需要额外执行以下步骤（在 MacOS 目录下执行）

pod install

<details> <summary>React Native 0.60 以下版本（链接和手动安装）</summary>

以下步骤仅适用于 React Native 0.60 以下版本

大部分自动安装

$ react-native link @react-native-picker/picker

手动安装

iOS

1. 在 XCode 中，在项目导航器中，右键点击 Libraries ➜ Add Files to [你的项目名]
2. 进入 node_modules ➜ @react-native-picker/picker 并添加 RNCPicker.xcodeproj
3. 在 XCode 中，在项目导航器中，选择你的项目。将 libRNCPicker.a 添加到你项目的 Build Phases ➜ Link Binary With Libraries
4. 运行你的项目（Cmd+R）<

Android

1. 打开 应用程序 文件（android/app/src/main/java/[...]/MainApplication.java）

• 在文件顶部的导入部分添加 import com.reactnativecommunity.picker.RNCPickerPackage;
• 在 getPackages() 方法返回的列表中添加 new RNCPickerPackage()

2. 在 android/settings.gradle 文件末尾添加以下行：

   include ':@react-native-picker_picker'
   project(':@react-native-picker_picker').projectDir = new File(rootProject.projectDir, 	'../node_modules/@react-native-picker/picker/android')
   

3. 在 android/app/build.gradle 的 dependencies 块内插入以下行：

     implementation project(path: ':@react-native-picker_picker')
   

MacOS

1. 在 XCode 中，在项目导航器中，右键点击 Libraries ➜ Add Files to [你的项目名]
2. 进入 node_modules ➜ @react-native-picker/picker 并添加 RNCPicker.xcodeproj
3. 在 XCode 中，在项目导航器中，选择你的项目。将 libRNCPicker.a 添加到你项目的 Build Phases ➜ Link Binary With Libraries
4. 运行你的项目（Cmd+R）<

</details>

RTL 支持

你需要在 AndroidManifest.xml 中添加 android:supportsRtl="true"

   <application
      ...
      android:supportsRtl="true">

使用方法

从 @react-native-picker/picker 导入 Picker：

import {Picker} from '@react-native-picker/picker';

创建将被 Picker 使用的状态：

const [selectedLanguage, setSelectedLanguage] = useState();

像这样添加 Picker：

<Picker
  selectedValue={selectedLanguage}
  onValueChange={(itemValue, itemIndex) =>
    setSelectedLanguage(itemValue)
  }>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

如果你想在 Android 上以编程方式打开/关闭选择器（1.16.0+ 版本可用），请向 Picker 传递 ref：

const pickerRef = useRef();

function open() {
  pickerRef.current.focus();
}

function close() {
  pickerRef.current.blur();
}

return <Picker
  ref={pickerRef}
  selectedValue={selectedLanguage}
  onValueChange={(itemValue, itemIndex) =>
    setSelectedLanguage(itemValue)
  }>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

属性

• 继承的 View 属性...

• onValueChange
• selectedValue
• style
• testID
• enabled
• mode
• prompt
• itemStyle
• selectionColor

---

参考

属性

onValueChange

当选择一个项目时的回调函数。该函数将接收以下参数：

• itemValue：被选中项目的 value 属性
• itemPosition：被选中项目在选择器中的索引位置

类型	是否必需
函数	否

---

selectedValue

与某个项目的值相匹配的值。可以是字符串或整数。

类型	是否必需
任意	否

---

style

类型	是否必需
pickerStyleType	否

---

testID

用于在端到端测试中定位此视图。

类型	是否必需
字符串	否

---

enabled

如果设置为 false，选择器将被禁用，即用户将无法进行选择。

类型	是否必需	平台
布尔值	否	Android, Web, Windows

---

mode

在 Android 上，指定当用户点击选择器时如何显示选择项：

• 'dialog'：显示模态对话框。这是默认值。
• 'dropdown'：显示锚定到选择器视图的下拉列表

类型	是否必需	平台
枚举('dialog', 'dropdown')	否	Android

---

dropdownIconColor

在 Android 上，指定下拉三角形的颜色。输入值应为 react-native processColor 函数可接受的值。

类型	是否必需	平台
ColorValue	否	Android

---

dropdownIconRippleColor

在 Android 上，指定下拉三角形的涟漪颜色。输入值应为 react-native processColor 函数可接受的值。

类型	是否必需	平台
ColorValue	否	Android

---

prompt

此选择器的提示字符串，在 Android 的对话框模式下用作对话框的标题。

类型	是否必需	平台
字符串	否	Android

---

itemStyle

应用于每个项目标签的样式。

类型	是否必需	平台
文本样式	否	iOS, Windows

numberOfLines

在 Android 和 iOS 上，用于在计算文本布局（包括换行）后用省略号截断文本，使总行数不超过此数值。默认值为 '1'

类型	是否必需	平台
数字	否	Android, iOS

onBlur

类型	是否必需	平台
函数	否	Android

onFocus

类型	是否必需	平台
函数	否	Android

selectionColor

类型	是否必需	平台
ColorValue	否	iOS

方法

blur（仅 Android，库版本 1.16.0+）

以编程方式关闭选择器

focus（仅 Android，库版本 1.16.0+）

以编程方式打开选择器

PickerItemProps

可应用于单个 Picker.Item 的属性

label

Picker Item 上显示的值

类型	是否必需
字符串	是

value

Picker Item 上的实际值

类型	是否必需
数字，字符串	是

color

Picker Item 上显示的颜色

类型	是否必需
ColorValue	否

fontFamily

Picker 项目上显示的字体系列

类型	是否必需
string	否

style

应用于单个项目标签的样式。

类型	是否必需	平台
ViewStyleProp	否	Android

enabled

如果设置为 false，特定项目将被禁用，即用户将无法进行选择

默认值：true

类型	是否必需	平台
boolean	否	Android

contentDescription

设置 Picker 项目的内容描述

类型	是否必需	平台
string	否	Android

PickerIOS

属性

• 继承的 View 属性...
• itemStyle
• onValueChange
• selectedValue
• selectionColor
• themeVariant

---

参考

属性

itemStyle

类型	是否必需
文本样式	否

---

onValueChange

类型	是否必需
function	否

---

selectedValue

类型	是否必需
any	否

---

selectionColor

类型	是否必需	平台
ColorValue	否	iOS

---

themeVariant

类型	是否必需
enum('light', 'dark')	否