الفرق بين المراجعتين لصفحة: «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. | ||
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/picker تجربة حية]): | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React, { useState } from "react"; | |||
selectedValue={ | import { View, Picker, StyleSheet } from "react-native"; | ||
const App = () => { | |||
const [selectedValue, setSelectedValue] = useState("java"); | |||
return ( | |||
<View style={styles.container}> | |||
<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>enabled</code> === | |||
إذا كانت قيمتُها القيمةَ <code>false</code>، فسيُعطَّل الانتقاء، أي أنّ المستخدم لن يستطيع التحديد. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
!المنصة | |||
|- | |- | ||
| | |قيمة منطقيّة | ||
|لا | |لا | ||
|Android | |||
|} | |} | ||
===<code> | === <code>itemStyle</code> === | ||
نمط لتطبيقه على كل تسميّة (label) من تسميات العناصر. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
!المنصة | |||
|- | |- | ||
| | |[[ReactNative/text style props|أنماط النص (text styles)]] | ||
|لا | |لا | ||
|iOS | |||
|} | |} | ||
===<code> | === <code>mode</code> === | ||
على Android، تُحدِّد كيفيّة عرض عناصر التحديد عند نقر المستخدم على المنتقي: | |||
* <code>'dialog'</code>: إظهار مربّع حوار (modal dialog). هذه هي القيمة الافتراضيّة. | |||
* <code>'dropdown'</code>: عرض قائمة منسدلة مرتبطة بعرض المنتقي. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
!المنصة | |||
|- | |- | ||
| | |('dialog', 'dropdown') | ||
|لا | |لا | ||
|Android | |||
|} | |} | ||
===<code>onValueChange</code>=== | |||
دالة رد نداء تُستدعى بالمعاملات التالية عند تحديد عنصر ما: | |||
* <code>itemValue</code>: الخاصية <code>value</code> الخاصة بالعنصر المُحدَّد. | |||
* <code>itemPosition</code>: فهرس العنصر المُحدَّد في مكوّن الانتقاء هذا. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |دالة | ||
|لا | |لا | ||
|} | |} | ||
===<code> | === <code>prompt</code> === | ||
سلسلة نصيّة تُمثِّل مَحثَّ (prompt) المنتقي، تُستخدَم على Android في وضع الحوار (dialog mode) كعنوان لمربّع الحوار. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 65: | سطر 95: | ||
!المنصة | !المنصة | ||
|- | |- | ||
| | |سلسلة نصية | ||
|لا | |لا | ||
|Android | |Android | ||
|} | |} | ||
===<code> | ===<code>selectedValue</code>=== | ||
قيمة مطابقة لقيمة أحد العناصر. يمكن أن تكون سلسلة نصيّةً أو عددًا صحيحًا. | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |أي نوع | ||
|لا | |لا | ||
|} | |} | ||
===<code> | ===<code>style</code>=== | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |pickerStyleType | ||
|لا | |لا | ||
|} | |} | ||
===<code> | ===<code>testID</code>=== | ||
يُستخدَم لتحديد موقع العرض هذا في الاختبارات الشاملة (end-to-end tests). | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| | |سلسلة نصية | ||
|لا | |لا | ||
|} | |} | ||
== مصادر == | ==مصادر== | ||
* [https:// | * [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).
النوع | مطلوب |
---|---|
سلسلة نصية | لا |