picker下载 - picker器源代码下载

picker

其他源码

v2.10.2

下载

`@react-native-picker/picker`

安卓	ios	皮卡

视窗	macos

支持版本

@react-native-picker/picker	反应本	反应新的窗口
> = 2.0.0	0.61+	0.64+
> = 1.16.0	0.61+	0.61+
> = 1.2.0	0.60+或0.59+ jetifier	N/A。
> = 1.0.0	0.57	N/A。

入门

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

或者

$ yarn add @react-native-picker/picker

对于React Native V0.60及以上（自动链接）

由于[email protected]及更高版本支持自动链接，因此无需运行链接过程。在此处阅读有关自动链接的更多信息。这得到了[email protected]及以上的支持。

ios

iOS上的可可录需要此额外的步骤：

 npx pod-install

安卓

无需其他步骤。

Windows（扩展以获取详细信息）

视窗

在没有自动链接的情况下使用Windows的使用需要以下额外的步骤：

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

在Visual Studio 2019中打开解决方案
解决方案资源管理器中的右键单击解决方案图标> add>现有项目选择D:devRNTestnode_modules@react-native-pickerpickerwindowsReactNativePickerReactNativePicker.vcxproj

Windows/MyApp.sln

将ReactNativePicker的引用添加到您的主要申请项目中。来自Visual Studio 2019：

右键单击主应用程序>添加>参考...检查解决方案项目中的ReactNativePicker 。

app.cpp

将#include "winrt/ReactNativePicker.h"添加到文件顶部包含的标题中。

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

macos

MacOS上的可可录需要此额外的步骤（从MACOS目录调用）

 pod install

反应本机以下低于0.60（链接和手动安装）

仅当您使用一个版本的React本地版本低于0.60时，才需要以下步骤

主要是自动安装

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

手动安装

ios

在Xcode中，在项目导航器中，右键单击Libraries ➜ Add Files to [your project's name]
转到node_modules @ @react-native-picker/picker ，然后添加RNCPicker.xcodeproj
在Xcode中，在项目导航器中，选择您的项目。将libRNCPicker.a添加到您项目的Build Phases ➜ Link Binary With Libraries
运行您的项目（ Cmd+R ）<

安卓

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

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

将以下行附加到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')

在android/app/build.gradle中插入依赖项块中的以下行：

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

macos

在Xcode中，在项目导航器中，右键单击Libraries ➜ Add Files to [your project's name]
转到node_modules @ @react-native-picker/picker ，然后添加RNCPicker.xcodeproj
在Xcode中，在项目导航器中，选择您的项目。将libRNCPicker.a添加到您项目的Build Phases ➜ Link Binary With Libraries
运行您的项目（ Cmd+R ）<

RTL支持

您需要添加android:supportsRtl="true"到AndroidManifest.xml

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

用法

来自@react-native-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+版本获得），请通过Ref到Picker ：

 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上，指定了当用户在选择器上的用户点击时如何显示选择项目：

“对话框”：显示模态对话框。这是默认值。
“下拉”：显示锚定在拾取器视图的下拉菜单

类型	必需的	平台
枚举（“对话”，“下拉”）	不	安卓

`dropdownIconColor`

在Android上，指定下拉三角形的颜色。输入值应为反应本机processColor函数所接受的值。

类型	必需的	平台
色价	不	安卓

`dropdownIconRippleColor`

在Android上，指定下拉三角形的连锁颜色。输入值应为反应本机processColor函数所接受的值。

类型	必需的	平台
色价	不	安卓

`prompt`

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

类型	必需的	平台
细绳	不	安卓

`itemStyle`

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

类型	必需的	平台
文字样式	不	iOS，Windows

`numberOfLines`

在计算文本布局后，在Android＆iOS上，用来用省略号截断文本，包括线条包装，以致行总数不超过此数字。默认为“ 1”

类型	必需的	平台
数字	不	Android，iOS

`onBlur`

类型	必需的	平台
功能	不	安卓

`onFocus`

类型	必需的	平台
功能	不	安卓

`selectionColor`

类型	必需的	平台
色价	不	ios

方法

`blur` （仅Android，LIB版本1.16.0+）

编程方式关闭选择器

`focus` （仅Android，LIB版本1.16.0+）

编程开放的选择器

Pickeritemprops

可以应用于单个Picker.Item道具

`label`

在选择器项目上显示价值

类型	必需的
细绳	是的

`value`

选择器项目的实际价值

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

`color`

在选择器项目上显示颜色

类型	必需的
色价	不

`fontFamily`

在选择器物品上显示fontfamily

类型	必需的
细绳	不

`style`

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

类型	必需的	平台
ViewStyleProp	不	安卓

`enabled`

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

@default：true

类型	必需的	平台
布尔	不	安卓

`contentDescription`

将内容描述设置为Picker项目

类型	必需的	平台
细绳	不	安卓

皮卡

道具

继承的View道具...
itemStyle
onValueChange
selectedValue
selectionColor
themeVariant

参考

道具

`itemStyle`

类型	必需的
文字样式	不

`onValueChange`

类型	必需的
功能	不

`selectedValue`

类型	必需的
任何	不

`selectionColor`

类型	必需的	平台
色价	不	ios

`themeVariant`

类型	必需的
枚举（“光”，“黑暗”）	不

展开

附加信息

版本 v2.10.2
类型其他源码
更新时间 2025-05-09
大小 2.36MB
来自于 Github

picker

@react-native-picker/picker

支持版本

入门

对于React Native V0.60及以上（自动链接）

ios

安卓

视窗

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

Windows/MyApp.sln

app.cpp

macos

主要是自动安装

手动安装

ios

安卓

macos

RTL支持

用法

道具

参考

道具

onValueChange

selectedValue

style

testID

enabled

mode

dropdownIconColor

dropdownIconRippleColor

prompt

itemStyle

numberOfLines

onBlur

onFocus

selectionColor

方法

blur （仅Android，LIB版本1.16.0+）

focus （仅Android，LIB版本1.16.0+）

Pickeritemprops

label

value

color

fontFamily

style

enabled

contentDescription

皮卡

道具

参考

道具

itemStyle

onValueChange

selectedValue

selectionColor

themeVariant

`@react-native-picker/picker`

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

`onValueChange`

`selectedValue`

`style`

`testID`

`enabled`

`mode`

`dropdownIconColor`

`dropdownIconRippleColor`

`prompt`

`itemStyle`

`numberOfLines`

`onBlur`

`onFocus`

`selectionColor`

`blur` （仅Android，LIB版本1.16.0+）

`focus` （仅Android，LIB版本1.16.0+）

`label`

`value`

`color`

`fontFamily`

`style`

`enabled`

`contentDescription`

`itemStyle`

`onValueChange`

`selectedValue`

`selectionColor`

`themeVariant`