المكون Picker في React Native

مهمل: استعمل إحدى هذه الحزم من المجتمع بدلًا منه.

يُصيّر مكون الانتقاء الأصيل على iOS وAndroid.

إليك المثال التالي (تجربة حية):

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;

الخاصيات

يرث خاصيّات المكوّن View.

‎‎enabled‎‎

إذا كانت قيمتُها القيمةَ ‎‎false‎‎، فسيُعطَّل الانتقاء، أي أنّ المستخدم لن يستطيع التحديد.

النوع	مطلوب	المنصة
قيمة منطقيّة	لا	Android

‎‎itemStyle‎‎

نمط لتطبيقه على كل تسميّة (label) من تسميات العناصر.

النوع	مطلوب	المنصة
أنماط النص (text styles)	لا	iOS

‎‎mode‎‎

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

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

النوع	مطلوب	المنصة
‎‎('dialog', 'dropdown')‎‎	لا	Android

‎‎onValueChange‎‎

دالة رد نداء تُستدعى بالمعاملات التالية عند تحديد عنصر ما:

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

النوع	مطلوب
دالة	لا

‎‎prompt‎‎

سلسلة نصيّة تُمثِّل مَحثَّ (prompt) المنتقي، تُستخدَم على Android في وضع الحوار (dialog mode) كعنوان لمربّع الحوار.

النوع	مطلوب	المنصة
سلسلة نصية	لا	Android

‎‎selectedValue‎‎

قيمة مطابقة لقيمة أحد العناصر. يمكن أن تكون سلسلة نصيّةً أو عددًا صحيحًا.

النوع	مطلوب
أي نوع	لا

‎‎style‎‎

النوع	مطلوب
pickerStyleType	لا

‎‎testID‎‎

يُستخدَم لتحديد موقع العرض هذا في الاختبارات الشاملة (end-to-end tests).

النوع	مطلوب
سلسلة نصية	لا

مصادر

• صفحة Picker في توثيق React Native الرسمي.