หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

@react-native-picker/picker

Android iOS พิกเคอเรียส
หน้าต่าง แม็กอส

เวอร์ชันที่รองรับ

@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 ขึ้นไป (Autolinking)

ในฐานะ [email protected] และสูงกว่ารองรับ Autolinking ไม่จำเป็นต้องเรียกใช้กระบวนการเชื่อมโยง อ่านเพิ่มเติมเกี่ยวกับ Autolinking ที่นี่ สิ่งนี้ได้รับการสนับสนุนโดย [email protected] ขึ้นไป

iOS

Cocoapods บน iOS ต้องการขั้นตอนพิเศษนี้: 

 npx pod-install

Android

ไม่จำเป็นต้องมีขั้นตอนเพิ่มเติม

Windows (ขยายสำหรับรายละเอียด)

หน้าต่าง

การใช้งานใน windows โดยไม่ต้องใช้ Autolinking ต้องใช้ขั้นตอนพิเศษต่อไปนี้:

เพิ่มโครงการ ReactNativePicker ลงในโซลูชันของคุณ
  1. เปิดโซลูชันใน Visual Studio 2019
  2. คลิกขวาที่ไอคอนโซลูชันในโซลูชัน explorer> เพิ่ม> โครงการที่มีอยู่เลือก 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(); -

แม็กอส

Cocoapods บน MacOS ต้องการขั้นตอนพิเศษนี้ (เรียกจากไดเรกทอรี MacOS) 

 pod install
ตอบสนองพื้นเมืองต่ำกว่า 0.60 (ลิงก์และการติดตั้งด้วยตนเอง)

ขั้นตอนต่อไปนี้จำเป็นก็ต่อเมื่อคุณทำงานกับ React Native รุ่นต่ำกว่า 0.60

การติดตั้งอัตโนมัติส่วนใหญ่

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

การติดตั้งด้วยตนเอง

iOS

  1. ใน Xcode ใน Project Navigator คลิกขวา➜เพิ่ม Libraries Add Files to [your project's name]
  2. ไปที่ node_modules ➜ @react-native-picker/picker และเพิ่ม RNCPicker.xcodeproj
  3. ใน Xcode ใน Project Navigator เลือกโครงการของคุณ เพิ่ม libRNCPicker.a ลงใน Build Phases โครงการของคุณ➜ Link Binary With Libraries
  4. เรียกใช้โครงการของคุณ ( Cmd+R ) <

Android

  1. เปิดไฟล์ แอปพลิเคชัน ( android/app/src/main/java/[...]/MainApplication.java )
  • เพิ่ม import com.reactnativecommunity.picker.RNCPickerPackage; ไปยังการนำเข้าที่ด้านบนของไฟล์
  • เพิ่ม new RNCPickerPackage() ลงในรายการที่ส่งคืนโดยวิธี getPackages()
  1. ผนวกบรรทัดต่อไปนี้เข้ากับ 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. แทรกบรรทัดต่อไปนี้ภายในบล็อกการพึ่งพาใน android/app/build.gradle : 
      implementation project(path: ':@react-native-picker_picker')

แม็กอส

  1. ใน Xcode ใน Project Navigator คลิกขวา➜เพิ่ม Libraries Add Files to [your project's name]
  2. ไปที่ node_modules ➜ @react-native-picker/picker และเพิ่ม RNCPicker.xcodeproj
  3. ใน Xcode ใน Project Navigator เลือกโครงการของคุณ เพิ่ม libRNCPicker.a ลงใน Build Phases โครงการของคุณ➜ Link Binary With Libraries
  4. เรียกใช้โครงการของคุณ ( Cmd+R ) <

การสนับสนุน RTL

คุณต้องเพิ่ม android:supportsRtl="true" ไปยัง AndroidManifest.xml 

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

การใช้งาน

นำเข้า Picker จาก @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 : 

 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

พิมพ์ ที่จำเป็น
PickerTyleType เลขที่

testID

ใช้เพื่อค้นหามุมมองนี้ในการทดสอบแบบ end-to-end

พิมพ์ ที่จำเป็น
สาย เลขที่

enabled

หากตั้งค่าเป็นเท็จตัวเลือกจะถูกปิดใช้งานเช่นผู้ใช้จะไม่สามารถเลือกได้

พิมพ์ ที่จำเป็น แพลตฟอร์ม
บูล เลขที่ Android, Web, Windows

mode

บน Android ระบุวิธีการแสดงรายการที่เลือกเมื่อผู้ใช้แตะบนตัวเลือก:

  • 'กล่องโต้ตอบ': แสดงกล่องโต้ตอบแบบโมดอล นี่คือค่าเริ่มต้น
  • 'ดรอปดาวน์': แสดงการเลื่อนลงที่ทอดสมอไปยังมุมมองตัวเลือก
พิมพ์ ที่จำเป็น แพลตฟอร์ม
enum ('กล่องโต้ตอบ', 'ดรอปดาวน์') เลขที่ Android

dropdownIconColor

บน Android ระบุสีของสามเหลี่ยมดรอปดาวน์ ค่าอินพุตควรเป็นค่าที่ได้รับการยอมรับจากฟังก์ชัน processColor React-Native

พิมพ์ ที่จำเป็น แพลตฟอร์ม
colorvalue เลขที่ Android

dropdownIconRippleColor

บน Android ระบุสีระลอกคลื่นของสามเหลี่ยมแบบเลื่อนลง ค่าอินพุตควรเป็นค่าที่ได้รับการยอมรับจากฟังก์ชัน processColor React-Native

พิมพ์ ที่จำเป็น แพลตฟอร์ม
colorvalue เลขที่ Android

prompt

สตริงพรอมต์สำหรับตัวเลือกนี้ใช้กับ Android ในโหมดโต้ตอบเป็นชื่อของกล่องโต้ตอบ

พิมพ์ ที่จำเป็น แพลตฟอร์ม
สาย เลขที่ Android

itemStyle

สไตล์ที่จะนำไปใช้กับฉลากรายการแต่ละรายการ

พิมพ์ ที่จำเป็น แพลตฟอร์ม
รูปแบบข้อความ เลขที่ iOS, Windows

numberOfLines

บน Android & iOS ใช้เพื่อตัดข้อความด้วยจุดไข่ปลาหลังจากคำนวณเค้าโครงข้อความรวมถึงการพันบรรทัดเช่นจำนวนบรรทัดทั้งหมดไม่เกินจำนวนนี้ ค่าเริ่มต้นคือ '1'

พิมพ์ ที่จำเป็น แพลตฟอร์ม
ตัวเลข เลขที่ Android, iOS

onBlur

พิมพ์ ที่จำเป็น แพลตฟอร์ม
การทำงาน เลขที่ Android

onFocus

พิมพ์ ที่จำเป็น แพลตฟอร์ม
การทำงาน เลขที่ Android

selectionColor

พิมพ์ ที่จำเป็น แพลตฟอร์ม
colorvalue เลขที่ iOS

วิธีการ

blur (Android เท่านั้น, LIB เวอร์ชัน 1.16.0+)

ตัวเลือกปิดโปรแกรม

focus (Android เท่านั้น, LIB เวอร์ชัน 1.16.0+)

เปิดตัวเลือกแบบโปรแกรม

PickerItemProps

อุปกรณ์ประกอบฉากที่สามารถนำไปใช้กับ Picker.Item แต่ละคน

label

ค่าที่แสดงในรายการตัวเลือก

พิมพ์ ที่จำเป็น
สาย ใช่

value

มูลค่าจริงในรายการตัวเลือก

พิมพ์ ที่จำเป็น
จำนวนสตริง ใช่

color

แสดงสีบนรายการตัวเลือก

พิมพ์ ที่จำเป็น
colorvalue เลขที่

fontFamily

แสดง fontfamily บนรายการตัวเลือก

พิมพ์ ที่จำเป็น
สาย เลขที่

style

สไตล์ที่จะนำไปใช้กับฉลากรายการแต่ละรายการ

พิมพ์ ที่จำเป็น แพลตฟอร์ม
ViewStyleProp เลขที่ Android

enabled

หากตั้งค่าเป็นเท็จรายการเฉพาะจะถูกปิดใช้งานเช่นผู้ใช้จะไม่สามารถเลือกได้

@default: จริง

พิมพ์ ที่จำเป็น แพลตฟอร์ม
บูลีน เลขที่ Android

contentDescription

ตั้งค่าคำอธิบายเนื้อหาเป็นรายการตัวเลือก

พิมพ์ ที่จำเป็น แพลตฟอร์ม
สาย เลขที่ Android

พิกเคอเรียส

อุปกรณ์ประกอบฉาก

  • อุปกรณ์ประกอบฉาก View ที่สืบทอดมา ...
  • itemStyle
  • onValueChange
  • selectedValue
  • selectionColor
  • themeVariant

อ้างอิง

อุปกรณ์ประกอบฉาก

itemStyle

พิมพ์ ที่จำเป็น
รูปแบบข้อความ เลขที่

onValueChange

พิมพ์ ที่จำเป็น
การทำงาน เลขที่

selectedValue

พิมพ์ ที่จำเป็น
ใดๆ เลขที่

selectionColor

พิมพ์ ที่จำเป็น แพลตฟอร์ม
colorvalue เลขที่ iOS

themeVariant

พิมพ์ ที่จำเป็น
enum ('แสง', 'มืด') เลขที่
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด