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

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

testID

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

enabled

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

mode

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

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

dropdownIconColor

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

dropdownIconRippleColor

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

prompt

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

itemStyle

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

numberOfLines

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

onBlur

onFocus

selectionColor

方法

blur（仅 Android，库版本 1.16.0+）

以编程方式关闭选择器

focus（仅 Android，库版本 1.16.0+）

以编程方式打开选择器

PickerItemProps

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

label

Picker Item 上显示的值

value

Picker Item 上的实际值

color

Picker Item 上显示的颜色

fontFamily

Picker 项目上显示的字体系列

style

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

enabled

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

默认值：true

contentDescription

设置 Picker 项目的内容描述

PickerIOS

属性

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

参考

属性

itemStyle

onValueChange

selectedValue

selectionColor

themeVariant