Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

@react-native-picker/picker

Android iOS Pickerios
Windows MacOS

Versi yang didukung

@react-native-picker/pemetik reaksi-asli Bereaksi-asli-angin
> = 2.0.0 0.61+ 0.64+
> = 1.16.0 0.61+ 0.61+
> = 1.2.0 0,60+ atau 0,59+ dengan jetifier N/a
> = 1.0.0 0,57 N/a

Memulai

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

atau

$ yarn add @react-native-picker/picker

Untuk React Native V0.60 dan di atas (Autolinking)

Sebagai [email protected] dan di atas mendukung autolinking, tidak perlu menjalankan proses tautan. Baca lebih lanjut tentang autolinking di sini. Ini didukung oleh [email protected] dan di atas.

iOS

Cocoapods di iOS membutuhkan langkah ekstra ini: 

 npx pod-install

Android

Tidak ada langkah tambahan yang diperlukan.

Windows (perluas untuk detailnya)

Windows

Penggunaan di Windows tanpa autolinking membutuhkan langkah -langkah tambahan berikut:

Tambahkan proyek ReactNativePicker ke solusi Anda.
  1. Buka solusi di Visual Studio 2019
  2. Ikon Solusi Klik Kanan di Solution Explorer> Tambah> Proyek yang Ada Pilih D:devRNTestnode_modules@react-native-pickerpickerwindowsReactNativePickerReactNativePicker.vcxproj
windows/myapp.sln

Tambahkan referensi ke ReactNativePicker ke proyek aplikasi utama Anda. Dari Visual Studio 2019:

Klik kanan Proyek Aplikasi Utama> Tambah> Referensi ... Periksa ReactNativePicker dari proyek solusi.

app.cpp

Tambahkan #include "winrt/ReactNativePicker.h" ke header yang disertakan di bagian atas file.

Tambahkan PackageProviders().Append(winrt::ReactNativePicker::ReactPackageProvider()); sebelum InitializeComponent(); .

MacOS

Cocoapods pada macOS membutuhkan langkah ekstra ini (dipanggil dari direktori macOS) 

 pod install
Bereaksi asli di bawah 0,60 (tautan dan instalasi manual)

Langkah -langkah berikut hanya diperlukan jika Anda bekerja dengan versi React Native lebih rendah dari 0,60

Sebagian besar instalasi otomatis

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

Instalasi Manual

iOS

  1. Di Xcode, di Project Navigator, Libraries klik kanan ➜ Add Files to [your project's name]
  2. Pergi ke node_modules ➜ @react-native-picker/picker dan tambahkan RNCPicker.xcodeproj
  3. Di Xcode, di Project Navigator, pilih proyek Anda. Tambahkan libRNCPicker.a ke Build Phases proyek Anda ➜ Link Binary With Libraries
  4. Jalankan Proyek Anda ( Cmd+R ) <

Android

  1. Buka File Aplikasi ( android/app/src/main/java/[...]/MainApplication.java )
  • Tambahkan import com.reactnativecommunity.picker.RNCPickerPackage; ke impor di bagian atas file
  • Tambahkan new RNCPickerPackage() ke daftar yang dikembalikan dengan metode getPackages()
  1. Tambahkan baris berikut ke 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')
  2. Masukkan baris berikut di dalam blok dependensi di android/app/build.gradle : 
      implementation project(path: ':@react-native-picker_picker')

MacOS

  1. Di Xcode, di Project Navigator, Libraries klik kanan ➜ Add Files to [your project's name]
  2. Pergi ke node_modules ➜ @react-native-picker/picker dan tambahkan RNCPicker.xcodeproj
  3. Di Xcode, di Project Navigator, pilih proyek Anda. Tambahkan libRNCPicker.a ke Build Phases proyek Anda ➜ Link Binary With Libraries
  4. Jalankan Proyek Anda ( Cmd+R ) <

Dukungan RTL

Anda perlu menambahkan android:supportsRtl="true" ke AndroidManifest.xml 

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

Penggunaan

Impor pemilih dari @react-native-picker/picker : 

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

Buat keadaan yang akan digunakan oleh Picker : 

 const [ selectedLanguage , setSelectedLanguage ] = useState ( ) ;

Tambahkan Picker seperti ini: 

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

Jika Anda ingin membuka/menutup pemetik secara terprogram di Android (tersedia dari versi 1.16.0+), lulus ref ke 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 >

Alat peraga

  • Tanaman View yang diwariskan ...
  • onValueChange
  • selectedValue
  • style
  • testID
  • enabled
  • mode
  • prompt
  • itemStyle
  • selectionColor

Referensi

Alat peraga

onValueChange

Callback untuk saat item dipilih. Ini disebut dengan parameter berikut:

  • itemValue : Prop value Item yang dipilih
  • itemPosition : Indeks item yang dipilih di pemilih ini
Jenis Diperlukan
fungsi TIDAK

selectedValue

Nilai nilai pencocokan salah satu item. Bisa menjadi string atau bilangan bulat.

Jenis Diperlukan
setiap TIDAK

style

Jenis Diperlukan
pickerstyletype TIDAK

testID

Digunakan untuk menemukan tampilan ini dalam tes ujung ke ujung.

Jenis Diperlukan
rangkaian TIDAK

enabled

Jika diatur ke false, pemilih akan dinonaktifkan, yaitu pengguna tidak akan dapat melakukan pilihan.

Jenis Diperlukan Platform
bool TIDAK Android, Web, Windows

mode

Di Android, menentukan cara menampilkan item pilihan saat pengguna mengetuk pemetik:

  • 'Dialog': Tampilkan dialog modal. Ini adalah default.
  • 'Dropdown': Menunjukkan dropdown berlabuh ke tampilan pemetik
Jenis Diperlukan Platform
enum ('dialog', 'dropdown') TIDAK Android

dropdownIconColor

Di Android, menentukan warna segitiga dropdown. Nilai input harus bernilai yang diterima oleh fungsi processColor Proses-asli.

Jenis Diperlukan Platform
ColorValue TIDAK Android

dropdownIconRippleColor

Di Android, menentukan warna riak dari dropdown segitiga. Nilai input harus bernilai yang diterima oleh fungsi processColor Proses-asli.

Jenis Diperlukan Platform
ColorValue TIDAK Android

prompt

String prompt untuk pemilih ini, digunakan pada Android dalam mode dialog sebagai judul dialog.

Jenis Diperlukan Platform
rangkaian TIDAK Android

itemStyle

Gaya untuk diterapkan pada masing -masing label item.

Jenis Diperlukan Platform
gaya teks TIDAK iOS, windows

numberOfLines

Di Android & iOS, digunakan untuk memotong teks dengan ellipsis setelah menghitung tata letak teks, termasuk pembungkus garis, sehingga jumlah total garis tidak melebihi angka ini. Default adalah '1'

Jenis Diperlukan Platform
nomor TIDAK Android, iOS

onBlur

Jenis Diperlukan Platform
fungsi TIDAK Android

onFocus

Jenis Diperlukan Platform
fungsi TIDAK Android

selectionColor

Jenis Diperlukan Platform
ColorValue TIDAK iOS

Metode

blur (hanya Android, LIB versi 1.16.0+)

Secara terprogram menutup pemetik

focus (hanya Android, LIB versi 1.16.0+)

Secara terprogram membuka pemetik

Pickeritemprops

Alat peraga yang dapat diterapkan pada Picker.Item individu.item

label

Nilai yang ditampilkan pada item pemilih

Jenis Diperlukan
rangkaian Ya

value

Nilai aktual pada item pemilih

Jenis Diperlukan
nomor, string Ya

color

Warna yang ditampilkan pada item Picker

Jenis Diperlukan
ColorValue TIDAK

fontFamily

Ditampilkan fontFamily pada item pemilih

Jenis Diperlukan
rangkaian TIDAK

style

Gaya untuk diterapkan pada label item individual.

Jenis Diperlukan Platform
Viewstyleprop TIDAK Android

enabled

Jika diatur ke false, item tertentu akan dinonaktifkan, yaitu pengguna tidak akan dapat membuat pilihan

@Default: Benar

Jenis Diperlukan Platform
Boolean TIDAK Android

contentDescription

Menetapkan deskripsi konten ke item pemilih

Jenis Diperlukan Platform
rangkaian TIDAK Android

Pickerios

Alat peraga

  • Tanaman View yang diwariskan ...
  • itemStyle
  • onValueChange
  • selectedValue
  • selectionColor
  • themeVariant

Referensi

Alat peraga

itemStyle

Jenis Diperlukan
gaya teks TIDAK

onValueChange

Jenis Diperlukan
fungsi TIDAK

selectedValue

Jenis Diperlukan
setiap TIDAK

selectionColor

Jenis Diperlukan Platform
ColorValue TIDAK iOS

themeVariant

Jenis Diperlukan
enum ('terang', 'gelap') TIDAK
Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua