الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

@react-native-picker/picker

Android iOS بيكريوس
النوافذ ماكوس

الإصدارات المدعومة

@React-native-picker/picker رد الفعل React-Native-Windows
> = 2.0.0 0.61+ 0.64+
> = 1.16.0 0.61+ 0.61+
> = 1.2.0 0.60+ أو 0.59+ مع Jetifier ن/أ
> = 1.0.0 0.57 ن/أ

ابدء

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

أو

$ yarn add @react-native-picker/picker

لمفاعل React الأصلي V0.60 وما فوق (التفكير التلقائي)

كما [email protected] وما فوق يدعم الأوتوماب التلقائي ، فلا توجد حاجة لتشغيل عملية الارتباط. اقرأ المزيد عن التفكير التلقائي هنا. ويدعم هذا بواسطة [email protected] وما فوق.

iOS

يحتاج Cocoapods على iOS إلى هذه الخطوة الإضافية: 

 npx pod-install

Android

لا يلزم خطوة إضافية.

Windows (توسيع للحصول على التفاصيل)

النوافذ

يتطلب الاستخدام في النوافذ بدون توليد تلقائي الخطوات الإضافية التالية:

أضف مشروع ReactNativePicker إلى الحل الخاص بك.
  1. افتح الحل في Visual Studio 2019
  2. انقر بزر الماوس الأيمن فوق أيقونة حلول الحل في Solution 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 ، في Navigator Project ، انقر بزر الماوس الأيمن Libraries ➜ Add Files to [your project's name]
  2. انتقل إلى node_modules ➜ @react-native-picker/picker وأضف RNCPicker.xcodeproj
  3. في Xcode ، في مشروع 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 ، في Navigator Project ، انقر بزر الماوس الأيمن Libraries ➜ Add Files to [your project's name]
  2. انتقل إلى node_modules ➜ @react-native-picker/picker وأضف RNCPicker.xcodeproj
  3. في Xcode ، في مشروع Navigator ، حدد مشروعك. أضف libRNCPicker.a إلى Build Phases مشروعك ➜ Link Binary With Libraries
  4. قم بتشغيل مشروعك ( 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 : 

 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 ، الويب ، Windows

mode

على Android ، يحدد كيفية عرض عناصر التحديد عندما ينقر المستخدم على المنتقي:

  • "مربع الحوار": إظهار مربع حوار وسيط. هذا هو الافتراضي.
  • "القائمة المنسدلة": يعرض المنسدلة المرتكزة على عرض منتقي
يكتب مطلوب منصة
التعداد ("مربع الحوار" ، "المنسدلة") لا Android

dropdownIconColor

على Android ، يحدد لونث المثلث المنسدلة. يجب أن تكون قيمة الإدخال قيمة مقبولة بواسطة دالة Rection-Native processColor .

يكتب مطلوب منصة
ColorValue لا Android

dropdownIconRippleColor

على Android ، يحدد لون تموج المثلث المنسدلة. يجب أن تكون قيمة الإدخال قيمة مقبولة بواسطة دالة Rection-Native processColor .

يكتب مطلوب منصة
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

يكتب مطلوب
التعداد ("الضوء" ، "الظلام") لا
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل