picker Download - picker Source Code Download

picker

Anderer Quellcode

v2.10.2

Herunterladen

`@react-native-picker/picker`

Android	iOS	Pickerios

Fenster	Macos

Unterstützte Versionen

@React-Native-Picker/Picker	reagieren nativ	reagieren nativen stowows
> = 2.0.0	0,61+	0,64+
> = 1.16.0	0,61+	0,61+
> = 1.2.0	0,60+ oder 0,59+ mit Jetifier	N / A
> = 1.0.0	0,57	N / A

Erste Schritte

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

oder

$ yarn add @react-native-picker/picker

Für React native v0.60 und höher (Autolinking)

Als [email protected] und höher unterstützt das Autolinking nicht, dass der Verknüpfungsprozess nicht ausgeführt werden muss. Lesen Sie hier mehr über Autolinking. Dies wird von [email protected] und höher unterstützt.

iOS

Cocoapods auf iOS benötigen diesen zusätzlichen Schritt:

 npx pod-install

Android

Es ist kein zusätzlicher Schritt erforderlich.

Windows (für Details erweitern)

Fenster

Die Verwendung in Windows ohne Autolinking erfordert die folgenden zusätzlichen Schritte:

Fügen Sie das `ReactNativePicker` -Projekt Ihrer Lösung hinzu.

Öffnen Sie die Lösung in Visual Studio 2019
Klicken Sie mit der rechten Maustaste Lösungssymbol im Lösung Explorer> Add> vorhandenes Projekt auswählen D:devRNTestnode_modules@react-native-pickerpickerwindowsReactNativePickerReactNativePicker.vcxproj

Windows/myapp.sln

Fügen Sie Ihrem Hauptantragsprojekt einen Verweis auf ReactNativePicker hinzu. Von Visual Studio 2019:

Klicken Sie mit der rechten Maustaste auf Hauptanwendungsprojekt> Hinzufügen> Referenz ... ReactNativePicker von Lösungsprojekten.

app.cpp

Fügen Sie #include "winrt/ReactNativePicker.h" zu den Headern oben in der Datei hinzu.

Add PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider()); vor InitializeComponent(); .

Macos

Cocoapods on macOS benötigt diesen zusätzlichen Schritt (aus dem MacOS -Verzeichnis genannt)

 pod install

Reagieren Sie nativ unter 0,60 (Link und manuelle Installation)

Die folgenden Schritte sind nur erforderlich, wenn Sie mit einer Version von React Native unter 0,60 arbeiten

Meistens automatische Installation

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

Manuelle Installation

iOS

Klicken Sie in Xcode im Projekt Navigator mit der rechten Maustaste auf Libraries ➜ Add Files to [your project's name]
Gehen Sie zu node_modules ➜ @react-native-picker/picker und fügen Sie RNCPicker.xcodeproj hinzu
Wählen Sie in Xcode im Projekt Navigator Ihr Projekt aus. Fügen Sie libRNCPicker.a zu Build Phases Ihres Projekts hinzu. ➜ Link Binary With Libraries
Führen Sie Ihr Projekt aus ( Cmd+R ) <

Android

Öffnen Sie die Anwendungsdatei ( android/app/src/main/java/[...]/MainApplication.java .

Hinzufügen import com.reactnativecommunity.picker.RNCPickerPackage; zu den Importen oben in der Datei
Fügen Sie der von der getPackages() -Methode zurückgegebenen Liste new RNCPickerPackage() hinzu

Gehen Sie die folgenden Zeilen an android/settings.gradle an:

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

Fügen Sie die folgenden Zeilen in die Abhängigkeiten ein, blockieren Sie android/app/build.gradle :
```
  implementation project(path: ':@react-native-picker_picker')
```

Macos

Klicken Sie in Xcode im Projekt Navigator mit der rechten Maustaste auf Libraries ➜ Add Files to [your project's name]
Gehen Sie zu node_modules ➜ @react-native-picker/picker und fügen Sie RNCPicker.xcodeproj hinzu
Wählen Sie in Xcode im Projekt Navigator Ihr Projekt aus. Fügen Sie libRNCPicker.a zu Build Phases Ihres Projekts hinzu. ➜ Link Binary With Libraries
Führen Sie Ihr Projekt aus ( Cmd+R ) <

RTL -Unterstützung

Sie müssen android:supportsRtl="true" zu AndroidManifest.xml

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

Verwendung

Importieren Sie den Picker von @react-native-picker/picker :

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

Erstellen Sie Status, der vom Picker verwendet wird:

 const [ selectedLanguage , setSelectedLanguage ] = useState ( ) ;

Fügen Sie Picker so hinzu:

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

Wenn Sie Picker programmgesteuert auf Android öffnen/schließen möchten (erhältlich aus Version 1.16.0+), geben Sie Ref an Picker weiter:

 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 >

Requisiten

Erbliche View ...

onValueChange
selectedValue
style
testID
enabled
mode
prompt
itemStyle
selectionColor

Referenz

Requisiten

`onValueChange`

Rückruf für die Auswahl eines Elements. Dies wird mit den folgenden Parametern aufgerufen:

itemValue : Die value des ausgewählten Elements
itemPosition : Der Index des ausgewählten Elements in diesem Auswahler

Typ	Erforderlich
Funktion	NEIN

`selectedValue`

Wertanpassungswert eines der Elemente. Kann eine Zeichenfolge oder eine Ganzzahl sein.

Typ	Erforderlich
beliebig	NEIN

`style`

Typ	Erforderlich
pickerSyletyp	NEIN

`testID`

Wird verwendet, um diese Ansicht in End-to-End-Tests zu finden.

Typ	Erforderlich
Saite	NEIN

`enabled`

Wenn die Auswahl deaktiviert ist, kann der Benutzer keine Auswahl treffen.

Typ	Erforderlich	Plattform
bool	NEIN	Android, Web, Windows

`mode`

An Android gibt an, wie die Auswahlelemente angezeigt werden, wenn der Benutzer auf den Picker aufnimmt:

'Dialog': Zeigen Sie einen modalen Dialog an. Dies ist der Standard.
'Dropdown': Zeigt eine Dropdown -Art an, die in der Auswahlansicht verankert ist

Typ	Erforderlich	Plattform
Enum ('Dialog', 'Dropdown')	NEIN	Android

`dropdownIconColor`

Auf Android gibt die Farbe des Dropdown -Dreiecks an. Der Eingabwert sollte einen Wert sein, der durch die React-native processColor -Funktion akzeptiert wird.

Typ	Erforderlich	Plattform
ColorValue	NEIN	Android

`dropdownIconRippleColor`

Auf Android gibt die Ripple -Farbe des Dropdown -Dreiecks an. Der Eingabwert sollte einen Wert sein, der durch die React-native processColor -Funktion akzeptiert wird.

Typ	Erforderlich	Plattform
ColorValue	NEIN	Android

`prompt`

Eingabeaufforderung für diesen Auswahl, der im Dialogmodus auf Android als Titel des Dialogfelds verwendet wird.

Typ	Erforderlich	Plattform
Saite	NEIN	Android

`itemStyle`

Stil, um sich für jedes der Artikeletiketten zu bewerben.

Typ	Erforderlich	Plattform
Textstile	NEIN	iOS, Fenster

`numberOfLines`

Auf Android & iOS, das zum Abschneiden des Textes mit einer Ellipse nach dem Berechnen des Textlayouts, einschließlich Zeilenverpackung, verwendet wird, so dass die Gesamtzahl der Zeilen diese Zahl nicht überschreitet. Standard ist '1'

Typ	Erforderlich	Plattform
Nummer	NEIN	Android, iOS

`onBlur`

Typ	Erforderlich	Plattform
Funktion	NEIN	Android

`onFocus`

Typ	Erforderlich	Plattform
Funktion	NEIN	Android

`selectionColor`

Typ	Erforderlich	Plattform
ColorValue	NEIN	iOS

Methoden

`blur` (nur Android, Lib Version 1.16.0+)

Programmatisch schließt Picker

`focus` (nur Android, Lib Version 1.16.0+)

Programmatisch öffnet Picker

Pickeritemprops

Requisiten, die auf den einzelnen Picker.Item angewendet werden können.

`label`

Wert auf dem Auswahlelement angezeigt

Typ	Erforderlich
Saite	Ja

`value`

Tatsächlicher Wert im Auswahlartikel

Typ	Erforderlich
Nummer, Zeichenfolge	Ja

`color`

Angezeigte Farbe auf dem Auswahlartikel angezeigt

Typ	Erforderlich
ColorValue	NEIN

`fontFamily`

Angezeigte Schriftfamilie auf dem Picker -Element

Typ	Erforderlich
Saite	NEIN

`style`

Stil für individuelle Artikelbezeichnungen.

Typ	Erforderlich	Plattform
ViewStyleProp	NEIN	Android

`enabled`

Wenn auf False festgelegt wird, ist das spezifische Element deaktiviert, dh der Benutzer kann keine Auswahl treffen

@Default: True

Typ	Erforderlich	Plattform
boolean	NEIN	Android

`contentDescription`

Legt die Inhaltsbeschreibung in das Auswahlelement fest

Typ	Erforderlich	Plattform
Saite	NEIN	Android

Pickerios

Requisiten

Erbliche View ...
itemStyle
onValueChange
selectedValue
selectionColor
themeVariant

Referenz

Requisiten

`itemStyle`

Typ	Erforderlich
Textstile	NEIN

`onValueChange`

Typ	Erforderlich
Funktion	NEIN

`selectedValue`

Typ	Erforderlich
beliebig	NEIN

`selectionColor`

Typ	Erforderlich	Plattform
ColorValue	NEIN	iOS

`themeVariant`

Typ	Erforderlich
enum ('hell', 'dunkel')	NEIN

Expandieren

Zusätzliche Informationen

Version v2.10.2
Typ Anderer Quellcode
Aktualisierungszeit 2025-05-09
Größe 2.36MB
Kommt von Github

Ähnliche Anwendungen

Echte Meal Picker+-Software

2024-08-08

picker

@react-native-picker/picker

Unterstützte Versionen

Erste Schritte

Für React native v0.60 und höher (Autolinking)

iOS

Android

Fenster

Fügen Sie das ReactNativePicker -Projekt Ihrer Lösung hinzu.

Windows/myapp.sln

app.cpp

Macos

Meistens automatische Installation

Manuelle Installation

iOS

Android

Macos

RTL -Unterstützung

Verwendung

Requisiten

Referenz

Requisiten

onValueChange

selectedValue

style

testID

enabled

mode

dropdownIconColor

dropdownIconRippleColor

prompt

itemStyle

numberOfLines

onBlur

onFocus

selectionColor

Methoden

blur (nur Android, Lib Version 1.16.0+)

focus (nur Android, Lib Version 1.16.0+)

Pickeritemprops

label

value

color

fontFamily

style

enabled

contentDescription

Pickerios

Requisiten

Referenz

Requisiten

itemStyle

onValueChange

selectedValue

selectionColor

themeVariant

`@react-native-picker/picker`

Fügen Sie das `ReactNativePicker` -Projekt Ihrer Lösung hinzu.

`onValueChange`

`selectedValue`

`style`

`testID`

`enabled`

`mode`

`dropdownIconColor`

`dropdownIconRippleColor`

`prompt`

`itemStyle`

`numberOfLines`

`onBlur`

`onFocus`

`selectionColor`

`blur` (nur Android, Lib Version 1.16.0+)

`focus` (nur Android, Lib Version 1.16.0+)

`label`

`value`

`color`

`fontFamily`

`style`

`enabled`

`contentDescription`

`itemStyle`

`onValueChange`

`selectedValue`

`selectionColor`

`themeVariant`