الفرق بين المراجعتين لصفحة: «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>‎‎===
دالة رد نداء تُستدعى بالمعاملات التالية عند تحديد عنصر ما:
* itemValue: الخاصية value الخاصة بالعنصر المُحدَّد.
* itemPosition: فهرس العنصر المُحدَّد في مكوّن الانتقاء هذا.


=== ‎‎<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]]
[[تصنيف:React Native Component]]

المراجعة الحالية بتاريخ 14:44، 9 أكتوبر 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).

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

مصادر