عرض مصدر ReactNative/picker

<noinclude>{{DISPLAYTITLE:المكون Picker في React Native}}</noinclude><blockquote>'''مهمل''': استعمل إحدى [https://reactnative.directory/?search=picker هذه الحزم من المجتمع] بدلًا منه.</blockquote>يُصيّر مكون الانتقاء الأصيل على iOS وAndroid. 

إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/picker تجربة حية]):
<syntaxhighlight lang="javascript">
import React, { useState } from "react";
import { View, Picker, StyleSheet } from "react-native";

const App = () => {
  const [selectedValue, setSelectedValue] = useState("java");
  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
      >
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
      </Picker>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    alignItems: "center"
  }
});

export default App;
</syntaxhighlight>
== الخاصيات ==
يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>.

=== ‎‎<code>enabled</code>‎‎ ===
إذا كانت قيمتُها القيمةَ ‎‎<code>false</code>‎‎، فسيُعطَّل الانتقاء، أي أنّ المستخدم لن يستطيع التحديد.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|قيمة منطقيّة
|لا
|Android
|}

=== ‎‎<code>itemStyle</code>‎‎ ===
نمط لتطبيقه على كل تسميّة (label) من تسميات العناصر.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|[[ReactNative/text style props|أنماط النص (text styles)]]
|لا
|iOS
|}

=== ‎‎<code>mode</code>‎‎ ===
على Android، تُحدِّد كيفيّة عرض عناصر التحديد عند نقر المستخدم على المنتقي:

* ‎‎<code>'dialog'</code>‎‎: إظهار مربّع حوار (modal dialog). هذه هي القيمة الافتراضيّة.
* ‎‎<code>'dropdown'</code>‎‎: عرض قائمة منسدلة مرتبطة بعرض المنتقي.

{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|‎‎('dialog', 'dropdown')‎‎
|لا
|Android
|}
===‎‎<code>onValueChange</code>‎‎===
دالة رد نداء تُستدعى بالمعاملات التالية عند تحديد عنصر ما:

* <code>itemValue</code>: الخاصية <code>value</code> الخاصة بالعنصر المُحدَّد.
* <code>itemPosition</code>: فهرس العنصر المُحدَّد في مكوّن الانتقاء هذا.

{| class="wikitable"
!النوع
!مطلوب
|-
|دالة
|لا
|}

=== ‎‎<code>prompt</code>‎‎ ===
سلسلة نصيّة تُمثِّل مَحثَّ (prompt) المنتقي، تُستخدَم على Android في وضع الحوار (dialog mode) كعنوان لمربّع الحوار.
{| class="wikitable"
!النوع
!مطلوب
!المنصة
|-
|سلسلة نصية
|لا
|Android
|}

===‎‎<code>selectedValue</code>‎‎===
قيمة مطابقة لقيمة أحد العناصر. يمكن أن تكون سلسلة نصيّةً أو عددًا صحيحًا.
{| class="wikitable"
!النوع
!مطلوب
|-
|أي نوع
|لا
|}

===‎‎<code>style</code>‎‎===
{| class="wikitable"
!النوع
!مطلوب
|-
|pickerStyleType
|لا
|}

===‎‎<code>testID</code>‎‎===
يُستخدَم لتحديد موقع العرض هذا في الاختبارات الشاملة (end-to-end tests).
{| class="wikitable"
!النوع
!مطلوب
|-
|سلسلة نصية
|لا
|}

==مصادر==
* [https://reactnative.dev/docs/picker صفحة Picker في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Component]]