الفرق بين المراجعتين ل"ReactNative/segmentedcontrolios"
رقية-بورية (نقاش | مساهمات) |
رقية-بورية (نقاش | مساهمات) ط (مراجعة) |
||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:المكون SegmentedControlIOS في ReactNative}}</noinclude> | <noinclude>{{DISPLAYTITLE:المكون SegmentedControlIOS في ReactNative}}</noinclude> | ||
− | <blockquote>'''مهملة:''' | + | <blockquote>'''مهملة:''' يمكن استخدام [https://github.com/react-native-segmented-control/segmented-control <code>segmented-control</code>] كذلك. |
</blockquote> | </blockquote> | ||
يُستخدم المكوّن <code>SegmentedControlIOS</code> لتصيير الواجهة UISegmentedControl على منصّة iOS. | يُستخدم المكوّن <code>SegmentedControlIOS</code> لتصيير الواجهة UISegmentedControl على منصّة iOS. | ||
__toc__ | __toc__ | ||
− | + | === تغيير الدليل المختار برمجيًا === | |
− | يمكن تغيير الدليل | + | يمكن تغيير الدليل مباشرةص (on the fly) وذلك بإسناد الخاصيّة <code>selectedIndex</code> لمتغير حالة، ثم تغيير قيمة هذا المتغيّر مع ملاحظة ضرورة تحديث متغيّر الحالة عند اختيار المستخدم قيمة، ويغيّر الدليل كما هو موضّح بالمثال التالي. |
== مثال == | == مثال == | ||
سطر 43: | سطر 43: | ||
== الخاصيات == | == الخاصيات == | ||
− | موروثة من الخاصيات [ | + | موروثة من الخاصيات <code>[[ReactNative/view|View]]</code>. |
=== <code>enabled</code> === | === <code>enabled</code> === | ||
− | لن يستطيع المستخدم التفاعل مع واجهة التحكم إذا كانت قيمتها | + | لن يستطيع المستخدم التفاعل مع واجهة التحكم إذا كانت قيمتها <code>false</code>، والقيمة الافتراضية <code>true</code>. |
{| class="wikitable" | {| class="wikitable" | ||
سطر 53: | سطر 53: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
− | | | + | | (bool) |
| لا | | لا | ||
|} | |} | ||
سطر 59: | سطر 59: | ||
=== <code>momentary</code> === | === <code>momentary</code> === | ||
− | لن يبقى القطاع (segment) المختار مرئيًا إذا كانت قيمتها | + | لن يبقى القطاع (segment) المختار مرئيًا إذا كانت قيمتها <code>true</code>، وتستمر الدالة <code>onValueChange</code> بعملها كالمعتاد. |
{| class="wikitable" | {| class="wikitable" | ||
سطر 65: | سطر 65: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
− | | | + | | (bool) |
| لا | | لا | ||
|} | |} | ||
سطر 83: | سطر 83: | ||
=== <code>onValueChange</code> === | === <code>onValueChange</code> === | ||
− | الدالة التي تُستدعى عندما ينقر المستخدم على القطاع، حيث يُمرر لها قيمة القطاع | + | الدالة التي تُستدعى عندما ينقر المستخدم على القطاع، حيث يُمرر لها قيمة القطاع على أساس معامل. |
{| class="wikitable" | {| class="wikitable" | ||
سطر 95: | سطر 95: | ||
=== <code>selectedIndex</code> === | === <code>selectedIndex</code> === | ||
− | قيمة الدليل التي ستُختار في خاصيّة القطاع | + | قيمة الدليل التي ستُختار في خاصيّة القطاع <code>values</code>. |
{| class="wikitable" | {| class="wikitable" | ||
سطر 127: | سطر 127: | ||
! مطلوب | ! مطلوب | ||
|- | |- | ||
− | | | + | | (array of string) |
| لا | | لا | ||
|} | |} |
مراجعة 09:04، 19 فبراير 2021
مهملة: يمكن استخدام
segmented-control
كذلك.
يُستخدم المكوّن SegmentedControlIOS
لتصيير الواجهة UISegmentedControl على منصّة iOS.
تغيير الدليل المختار برمجيًا
يمكن تغيير الدليل مباشرةص (on the fly) وذلك بإسناد الخاصيّة selectedIndex
لمتغير حالة، ثم تغيير قيمة هذا المتغيّر مع ملاحظة ضرورة تحديث متغيّر الحالة عند اختيار المستخدم قيمة، ويغيّر الدليل كما هو موضّح بالمثال التالي.
مثال
import React, { useState } from "react";
import { SegmentedControlIOS, StyleSheet, Text, View } from "react-native";
export default App = () => {
const [index, setIndex] = useState(0);
return (
<View style={styles.container}>
<SegmentedControlIOS
values={['One', 'Two']}
selectedIndex={index}
onChange={(event) => {
setIndex(event.nativeEvent.selectedSegmentIndex);
}}
/>
<Text style={styles.text}>
Selected index: {index}
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
justifyContent: "center"
},
text: {
marginTop: 24
}
});
الخاصيات
موروثة من الخاصيات View
.
enabled
لن يستطيع المستخدم التفاعل مع واجهة التحكم إذا كانت قيمتها false
، والقيمة الافتراضية true
.
النوع | مطلوب |
---|---|
(bool) | لا |
momentary
لن يبقى القطاع (segment) المختار مرئيًا إذا كانت قيمتها true
، وتستمر الدالة onValueChange
بعملها كالمعتاد.
النوع | مطلوب |
---|---|
(bool) | لا |
onChange
الدالة التي تُستدعى عندما ينقر المستخدم على القطاع، حيث يُمرر لها الحدث كمعامل.
النوع | مطلوب |
---|---|
دالة (function) | لا |
onValueChange
الدالة التي تُستدعى عندما ينقر المستخدم على القطاع، حيث يُمرر لها قيمة القطاع على أساس معامل.
النوع | مطلوب |
---|---|
دالة (function) | لا |
selectedIndex
قيمة الدليل التي ستُختار في خاصيّة القطاع values
.
النوع | مطلوب |
---|---|
عدد (number) | لا |
tintColor
لون تمييز التحكم.
النوع | مطلوب |
---|---|
سلسلة نصية (string) | لا |
ملاحظة: غير مدعومة على المنصات iOS ذات الإصدار 13 وما بعدها.
values
مسمّيات (labels) مفاتيح قطاع التحكم، بالترتيب.
النوع | مطلوب |
---|---|
(array of string) | لا |