pickerダウンロード - pickerソースコードのダウンロード

picker

その他のソースコード

v2.10.2

ダウンロード

`@react-native-picker/picker`

アンドロイド	iOS	ピカリオ

Windows	macos

サポートされているバージョン

@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	jetifierを使用した0.60+または0.59+	n/a
> = 1.0.0	0.57	n/a

はじめる

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

または

$ yarn add @react-native-picker/picker

ReactネイティブV0.60以上の場合（自動リンク）

[email protected]以上が自動リンクをサポートしているため、リンクプロセスを実行する必要はありません。自動リンクの詳細については、こちらをご覧ください。これは、 [email protected] [email protected]以上でサポートされています。

iOS

iOSのcocoapodsには、この余分なステップが必要です。

 npx pod-install

アンドロイド

追加のステップは必要ありません。

Windows（詳細については展開）

Windows

自動リンクなしのWindowsでの使用には、次の追加手順が必要です。

`ReactNativePicker`プロジェクトをソリューションに追加します。

Visual Studio 2019でソリューションを開きます
ソリューションエクスプローラーのソリューションアイコンを右クリック>追加>既存のプロジェクトを選択する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未満のネイティブ（リンクと手動インストール）

次の手順は、0.60未満のNative Nativeのバージョンで作業している場合にのみ必要です。

主に自動インストール

$ 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 ）<を実行します

アンドロイド

Open Applicationファイル（ android/app/src/main/java/[...]/MainApplication.java ）

import com.reactnativecommunity.picker.RNCPickerPackage;ファイルの上部にあるインポートに
getPackages()メソッドによって返されたリストにnew RNCPickerPackage()を追加します

次の行を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+から入手可能）、 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`

アイテムの1つの値の一致値。文字列または整数にすることができます。

タイプ	必須
どれでも	いいえ

`style`

タイプ	必須
PickerStyLeType	いいえ

`testID`

エンドツーエンドのテストでこのビューを見つけるために使用されます。

タイプ	必須
弦	いいえ

`enabled`

falseに設定されている場合、ピッカーは無効になります。つまり、ユーザーは選択を行うことができません。

タイプ	必須	プラットフォーム
ブール	いいえ	Android、Web、Windows

`mode`

Androidで、ユーザーがピッカーをタップするときに選択アイテムを表示する方法を指定します。

「ダイアログ」：モーダルダイアログを表示します。これがデフォルトです。
「ドロップダウン」：ピッカービューに固定されたドロップダウンが表示されます

タイプ	必須	プラットフォーム
enum（「ダイアログ」、「ドロップダウン」）	いいえ	アンドロイド

`dropdownIconColor`

Androidでは、ドロップダウントライアングルの色を指定します。入力値は、React-Native processColor関数によって受け入れられる値である必要があります。

タイプ	必須	プラットフォーム
ColorValue	いいえ	アンドロイド

`dropdownIconRippleColor`

Androidでは、ドロップダウントライアングルのリップル色を指定します。入力値は、React-Native processColor関数によって受け入れられる値である必要があります。

タイプ	必須	プラットフォーム
ColorValue	いいえ	アンドロイド

`prompt`

ダイアログのタイトルとしてダイアログモードでAndroidで使用されるこのピッカーのプロンプト文字列。

タイプ	必須	プラットフォーム
弦	いいえ	アンドロイド

`itemStyle`

各アイテムラベルに適用するスタイル。

タイプ	必須	プラットフォーム
テキストスタイル	いいえ	iOS、Windows

`numberOfLines`

Android＆iOSでは、ラインラッピングを含むテキストレイアウトを計算した後、erlypsisでテキストを切り捨てるために使用されます。デフォルトは「1」です

タイプ	必須	プラットフォーム
番号	いいえ	Android、iOS

`onBlur`

タイプ	必須	プラットフォーム
関数	いいえ	アンドロイド

`onFocus`

タイプ	必須	プラットフォーム
関数	いいえ	アンドロイド

`selectionColor`

タイプ	必須	プラットフォーム
ColorValue	いいえ	iOS

方法

`blur` （Androidのみ、LIBバージョン1.16.0+）

プログラムでピッカーを閉じます

`focus` （Androidのみ、libバージョン1.16.0+）

プログラムでピッカーを開きます

pickeritemprops

個々のPicker.Itemに適用できる小道具

`label`

ピッカーアイテムに表示された値

タイプ	必須
弦	はい

`value`

ピッカーアイテムの実際の値

タイプ	必須
番号、文字列	はい

`color`

ピッカーアイテムに表示された色

タイプ	必須
ColorValue	いいえ

`fontFamily`

ピッカーアイテムにフォントファミリーを表示します

タイプ	必須
弦	いいえ

`style`

個々のアイテムラベルに適用するスタイル。

タイプ	必須	プラットフォーム
ViewStyleProp	いいえ	アンドロイド

`enabled`

falseに設定した場合、特定のアイテムが無効になります。つまり、ユーザーは選択を行うことができません

@default：本当です

タイプ	必須	プラットフォーム
ブール	いいえ	アンドロイド

`contentDescription`

コンテンツの説明をピッカーアイテムに設定します

タイプ	必須	プラットフォーム
弦	いいえ	アンドロイド

ピカリオ

小道具

継承されたView小道具...
itemStyle
onValueChange
selectedValue
selectionColor
themeVariant

参照

小道具

`itemStyle`

タイプ	必須
テキストスタイル	いいえ

`onValueChange`

タイプ	必須
関数	いいえ

`selectedValue`

タイプ	必須
どれでも	いいえ

`selectionColor`

タイプ	必須	プラットフォーム
ColorValue	いいえ	iOS

`themeVariant`

タイプ	必須
enum（ 'light'、 'Dark'）	いいえ

拡大する

追加情報

バージョン v2.10.2
タイプその他のソースコード
更新時間 2025-05-09
サイズ 2.36MB
から Github

picker

@react-native-picker/picker

サポートされているバージョン

はじめる

ReactネイティブV0.60以上の場合（自動リンク）

iOS

アンドロイド

Windows

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`