الفرق بين المراجعتين ل"ReactNative/segmentedcontrolios"
سطر 1: | سطر 1: | ||
− | = | + | = SegmentedControlIOS = |
سطر 6: | سطر 6: | ||
يُستخدم المكوّن <code>SegmentedControlIOS</code> لإظهار الواجهة UISegmentedControl على منصّة iOS. | يُستخدم المكوّن <code>SegmentedControlIOS</code> لإظهار الواجهة UISegmentedControl على منصّة iOS. | ||
− | === | + | === تغيير الدليل المختار برمجيًا === |
− | يمكن تغيير الدليل مباشرة (on the fly) وذلك بإسناد الخاصيّة <code>selectedIndex</code> لمتغير | + | يمكن تغيير الدليل مباشرة (on the fly) وذلك بإسناد الخاصيّة <code>selectedIndex</code> لمتغير الحالة، ثم تغيير قيمة هذا المتغيّر. |
'''ملاحظة:''' يحتاج متغيّر الحالة للتحديث حالما يختار المستخدم القيمة ويغيّر الدليل كما هو موضّح بالمثال التالي. | '''ملاحظة:''' يحتاج متغيّر الحالة للتحديث حالما يختار المستخدم القيمة ويغيّر الدليل كما هو موضّح بالمثال التالي. | ||
− | == | + | == مثال == |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React, { useState } from "react"; | import React, { useState } from "react"; | ||
سطر 47: | سطر 47: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | == | + | == الخاصيّات (Props) == |
− | موروثة من | + | موروثة من خاصيّات المكوّن <code>[[ReactNative/view#.D8.A7.D9.84.D8.AE.D8.A7.D8.B5.D9.8A.D8.A7.D8.AA|View]]</code>. |
− | === <code> | + | === <code>enabled</code> === |
إذا كانت قيمتها <code>false</code> فلن يستطيع المستخدم التفاعل مع واجهة التحكم. القيمة الافتراضية <code>true</code>. | إذا كانت قيمتها <code>false</code> فلن يستطيع المستخدم التفاعل مع واجهة التحكم. القيمة الافتراضية <code>true</code>. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 60: | سطر 60: | ||
|} | |} | ||
− | === <code> | + | === <code>momentary</code> === |
إذا كانت قيمتها <code>true</code> فلن يبقى القطاع (segment) المختار مرئيًا. وتستمر الدالة <code>onValueChange</code> بعملها كالمعتاد. | إذا كانت قيمتها <code>true</code> فلن يبقى القطاع (segment) المختار مرئيًا. وتستمر الدالة <code>onValueChange</code> بعملها كالمعتاد. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 70: | سطر 70: | ||
|} | |} | ||
− | === <code> | + | === <code>onChange</code> === |
الدالة التي تُستدعى عند نقر المستخدم على القطاع. حيث يُمرر لها الحدث كمعامل. | الدالة التي تُستدعى عند نقر المستخدم على القطاع. حيث يُمرر لها الحدث كمعامل. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 80: | سطر 80: | ||
|} | |} | ||
− | === <code> | + | === <code>onValueChange</code> === |
الدالة التي تُستدعى عند نقر المستخدم على القطاع. حيث يُمرر لها قيمة القطاع كمعامل. | الدالة التي تُستدعى عند نقر المستخدم على القطاع. حيث يُمرر لها قيمة القطاع كمعامل. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 90: | سطر 90: | ||
|} | |} | ||
− | === <code> | + | === <code>selectedIndex</code> === |
قيمة الدليل التي ستُختار في خاصيّة <code>props.values</code> للقطاع. | قيمة الدليل التي ستُختار في خاصيّة <code>props.values</code> للقطاع. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 100: | سطر 100: | ||
|} | |} | ||
− | === <code> | + | === <code>selectedIndex</code> === |
لون تمييز لوحة التحكم. | لون تمييز لوحة التحكم. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 111: | سطر 111: | ||
'''ملاحظة:''' غير مدعومة على المنصات iOS +13. | '''ملاحظة:''' غير مدعومة على المنصات iOS +13. | ||
− | === <code> | + | === <code>selectedIndex</code> === |
مسميات (labels) مفاتيح قطاع التحكم بالترتيب. | مسميات (labels) مفاتيح قطاع التحكم بالترتيب. | ||
{| class="wikitable" | {| class="wikitable" | ||
سطر 121: | سطر 121: | ||
|} | |} | ||
− | == | + | == مصادر == |
− | * [https:// | + | * [https://reactnative.dev/docs/segmentedcontrolios صفحة SegmentedControlIOS ''' '''في توثيق React Native الرسمي.] |
مراجعة 16:38، 18 ديسمبر 2020
SegmentedControlIOS
مهملة: استخدم @react-native-community/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
}
});
الخاصيّات (Props)
موروثة من خاصيّات المكوّن View
.
enabled
إذا كانت قيمتها false
فلن يستطيع المستخدم التفاعل مع واجهة التحكم. القيمة الافتراضية true
.
النوع | مطلوب |
---|---|
قيمة منطقية (bool) | لا |
momentary
إذا كانت قيمتها true
فلن يبقى القطاع (segment) المختار مرئيًا. وتستمر الدالة onValueChange
بعملها كالمعتاد.
النوع | مطلوب |
---|---|
قيمة منطقية (bool) | لا |
onChange
الدالة التي تُستدعى عند نقر المستخدم على القطاع. حيث يُمرر لها الحدث كمعامل.
النوع | مطلوب |
---|---|
دالة (function) | لا |
onValueChange
الدالة التي تُستدعى عند نقر المستخدم على القطاع. حيث يُمرر لها قيمة القطاع كمعامل.
النوع | مطلوب |
---|---|
دالة (function) | لا |
selectedIndex
قيمة الدليل التي ستُختار في خاصيّة props.values
للقطاع.
النوع | مطلوب |
---|---|
عدد (number) | لا |
selectedIndex
لون تمييز لوحة التحكم.
النوع | مطلوب |
---|---|
سلسلة نصية (string) | لا |
ملاحظة: غير مدعومة على المنصات iOS +13.
selectedIndex
مسميات (labels) مفاتيح قطاع التحكم بالترتيب.
النوع | مطلوب |
---|---|
مصفوفة نصية (array of string) | لا |