الفرق بين المراجعتين ل"ReactNative/picker"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (مراجعة)
سطر 1: سطر 1:
−
<noinclude>{{DISPLAYTITLE: Picker في React Native}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:المكون Picker في React Native}}</noinclude><blockquote>'''مهمل''': استعمل إحدى [https://reactnative.directory/?search=picker هذه الحزم من المجتمع] بدلًا منه.</blockquote>يُصيّر مكون الانتقاء الأصيل على iOS وAndroid.
  
−
يُصيّر مكون الانتقاء الأصيل على iOS وAndroid. مثال:
+
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/picker تجربة حية]):
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
−
<Picker
+
import React, { useState } from "react";
−
   selectedValue={this.state.language}
+
import { View, Picker, StyleSheet } from "react-native";
−
  style={{height: 50, width: 100}}
+
 
−
  onValueChange={(itemValue, itemIndex) =>
+
const App = () => {
−
    this.setState({language: itemValue})
+
   const [selectedValue, setSelectedValue] = useState("java");
−
  }>
+
  return (
−
  <Picker.Item label="Java" value="java" />
+
    <View style={styles.container}>
−
  <Picker.Item label="JavaScript" value="js" />
+
      <Picker
−
</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>
 
</syntaxhighlight>
 
== الخاصيات ==
 
== الخاصيات ==
 
يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>.
 
يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>.
−
===‎‎<code>onValueChange</code>‎‎===
 
−
دالة رد نداء تُستدعى بالمعاملات التالية عند تحديد عنصر ما:
 
−
 
−
* <code>itemValue</code>: الخاصية <code>value</code> الخاصة بالعنصر المُحدَّد.
 
−
* <code>itemPosition</code>: فهرس العنصر المُحدَّد في مكوّن الانتقاء هذا.
 
  
 +
=== ‎‎<code>enabled</code>‎‎ ===
 +
إذا كانت قيمتُها القيمةَ ‎‎<code>false</code>‎‎، فسيُعطَّل الانتقاء، أي أنّ المستخدم لن يستطيع التحديد.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
 +
!المنصة
 
|-
 
|-
−
|دالة
+
|قيمة منطقيّة
 
|لا
 
|لا
 +
|Android
 
|}
 
|}
  
−
===‎‎<code>selectedValue</code>‎‎===
+
=== ‎‎<code>itemStyle</code>‎‎ ===
−
قيمة مطابقة لقيمة أحد العناصر. يمكن أن تكون سلسلة نصيّةً أو عددًا صحيحًا.
+
نمط لتطبيقه على كل تسميّة (label) من تسميات العناصر.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
 +
!المنصة
 
|-
 
|-
−
|أي نوع
+
|[[ReactNative/text style props|أنماط النص (text styles)]]
 
|لا
 
|لا
 +
|iOS
 
|}
 
|}
  
−
===‎‎<code>style</code>‎‎===
+
=== ‎‎<code>mode</code>‎‎ ===
 +
على Android، تُحدِّد كيفيّة عرض عناصر التحديد عند نقر المستخدم على المنتقي:
 +
 
 +
* ‎‎<code>'dialog'</code>‎‎: إظهار مربّع حوار (modal dialog). هذه هي القيمة الافتراضيّة.
 +
* ‎‎<code>'dropdown'</code>‎‎: عرض قائمة منسدلة مرتبطة بعرض المنتقي.
 +
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
 +
!المنصة
 
|-
 
|-
−
|pickerStyleType
+
|‎‎('dialog', 'dropdown')‎‎
 
|لا
 
|لا
 +
|Android
 
|}
 
|}
 +
===‎‎<code>onValueChange</code>‎‎===
 +
دالة رد نداء تُستدعى بالمعاملات التالية عند تحديد عنصر ما:
 +
 +
* <code>itemValue</code>: الخاصية <code>value</code> الخاصة بالعنصر المُحدَّد.
 +
* <code>itemPosition</code>: فهرس العنصر المُحدَّد في مكوّن الانتقاء هذا.
  
−
===‎‎<code>testID</code>‎‎===
 
−
يُستخدَم لتحديد موقع العرض هذا في الاختبارات الشاملة (end-to-end tests).
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
 
|-
 
|-
−
|سلسلة نصية
+
|دالة
 
|لا
 
|لا
 
|}
 
|}
  
−
===‎‎<code>enabled</code>‎‎===
+
=== ‎‎<code>prompt</code>‎‎ ===
−
إذا كانت قيمتُها القيمةَ ‎‎<code>false</code>‎‎، فسيُعطَّل الانتقاء، أي أنّ المستخدم لن يستطيع التحديد.
+
سلسلة نصيّة تُمثِّل مَحثَّ (prompt) المنتقي، تُستخدَم على Android في وضع الحوار (dialog mode) كعنوان لمربّع الحوار.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 65: سطر 95:
 
!المنصة
 
!المنصة
 
|-
 
|-
−
|قيمة منطقيّة
+
|سلسلة نصية
 
|لا
 
|لا
 
|Android
 
|Android
 
|}
 
|}
  
−
===‎‎<code>mode</code>‎‎===
+
===‎‎<code>selectedValue</code>‎‎===
−
على Android، تُحدِّد كيفيّة عرض عناصر التحديد عند نقر المستخدم على المنتقي:
+
قيمة مطابقة لقيمة أحد العناصر. يمكن أن تكون سلسلة نصيّةً أو عددًا صحيحًا.
−
 
 
−
* ‎‎<code>'dialog'</code>‎‎: إظهار مربّع حوار (modal dialog). هذه هي القيمة الافتراضيّة.
 
−
* ‎‎<code>'dropdown'</code>‎‎: عرض قائمة منسدلة مرتبطة بعرض المنتقي.
 
−
 
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
−
!المنصة
 
 
|-
 
|-
−
|‎‎<code>enum('dialog', 'dropdown')</code>‎‎
+
|أي نوع
 
|لا
 
|لا
−
|Android
 
 
|}
 
|}
  
−
===‎‎<code>prompt</code>‎‎===
+
===‎‎<code>style</code>‎‎===
−
سلسلة نصيّة تُمثِّل مَحثَّ (prompt) المنتقي، تُستخدَم على Android في وضع الحوار (dialog mode) كعنوان لمربّع الحوار.
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
−
!المنصة
 
 
|-
 
|-
−
|سلسلة نصية
+
|pickerStyleType
 
|لا
 
|لا
−
|Android
 
 
|}
 
|}
  
−
===‎‎<code>itemStyle</code>‎‎===
+
===‎‎<code>testID</code>‎‎===
−
نمط لتطبيقه على كل تسميّة (label) من تسميات العناصر.
+
يُستخدَم لتحديد موقع العرض هذا في الاختبارات الشاملة (end-to-end tests).
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
−
!المنصة
 
 
|-
 
|-
−
|أنماط النص (text styles)
+
|سلسلة نصية
 
|لا
 
|لا
−
|iOS
 
 
|}
 
|}
  
−
== مصادر ==
+
==مصادر==
−
* [https://facebook.github.io/react-native/docs/picker صفحة Picker في توثيق React Native الرسمي.]
+
* [https://reactnative.dev/docs/picker صفحة Picker في توثيق React Native الرسمي.]
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]

مراجعة 14:40، 29 سبتمبر 2021

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

يُصيّر مكون الانتقاء الأصيل على 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).

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

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/picker&oldid=31337"