الفرق بين المراجعتين لصفحة: «ReactNative/segmentedcontrolios»
أنشأ الصفحة ب'SegmentedControlIOS' |
لا ملخص تعديل |
||
سطر 1: | سطر 1: | ||
SegmentedControlIOS | = '''SegmentedControlIOS''' = | ||
'''مهملة''': استخدم <code>[https://github.com/react-native-segmented-control/segmented-control @react-native-community/segmented-control]</code> بدلًا منها. | |||
يُستخدم المكوّن <code>SegmentedControlIOS</code> لإظهار الواجهة UISegmentedControl على منصّة iOS. | |||
=== '''تغيير الدليل المختار برمجيًا''' === | |||
يمكن تغيير الدليل مباشرة (on the fly) وذلك بإسناد الخاصيّة <code>selectedIndex</code> لمتغير الحالة, ثم تغيير قيمة هذا المتغيّر. | |||
'''ملاحظة:''' يحتاج متغيّر الحالة للتحديث حالما يختار المستخدم القيمة ويغيّر الدليل كما هو موضّح بالمثال التالي. | |||
== '''مثال''' == | |||
<syntaxhighlight lang="javascript"> | |||
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 | |||
} | |||
}); | |||
</syntaxhighlight> | |||
== '''الخاصيّات (Props)''' == | |||
موروثة من الخاصيّات <code>View Props</code>. | |||
=== <code>'''enabled'''</code> === | |||
إذا كانت قيمتها <code>false</code> فلن يستطيع المستخدم التفاعل مع واجهة التحكم. القيمة الافتراضية <code>true</code>. | |||
{| class="wikitable" | |||
!النوع | |||
!مطلوب | |||
|- | |||
|قيمة منطقية (bool) | |||
|لا | |||
|} | |||
=== <code>'''momentary'''</code> === | |||
إذا كانت قيمتها <code>true</code> فلن يبقى القطاع (segment) المختار مرئيًا. وتستمر الدالة <code>onValueChange</code> بعملها كالمعتاد. | |||
{| class="wikitable" | |||
!النوع | |||
!مطلوب | |||
|- | |||
|قيمة منطقية (bool) | |||
|لا | |||
|} | |||
=== <code>'''onChange'''</code> === | |||
الدالة التي تُستدعى عند نقر المستخدم على القطاع. حيث يُمرر لها الحدث كمعامل. | |||
{| class="wikitable" | |||
!النوع | |||
!مطلوب | |||
|- | |||
|دالة (function) | |||
|لا | |||
|} | |||
=== <code>'''onValueChange'''</code> === | |||
الدالة التي تُستدعى عند نقر المستخدم على القطاع. حيث يُمرر لها قيمة القطاع كمعامل. | |||
{| class="wikitable" | |||
!النوع | |||
!مطلوب | |||
|- | |||
|دالة (function) | |||
|لا | |||
|} | |||
=== <code>'''selectedIndex'''</code> === | |||
قيمة الدليل التي ستُختار في خاصيّة <code>props.values</code> للقطاع. | |||
{| class="wikitable" | |||
!النوع | |||
!مطلوب | |||
|- | |||
|عدد (number) | |||
|لا | |||
|} | |||
=== <code>'''selectedIndex'''</code> === | |||
لون تمييز لوحة التحكم. | |||
{| class="wikitable" | |||
!النوع | |||
!مطلوب | |||
|- | |||
|سلسلة نصية (string) | |||
|لا | |||
|} | |||
'''ملاحظة:''' غير مدعومة على المنصات iOS +13. | |||
=== <code>'''selectedIndex'''</code> === | |||
مسميات (labels) مفاتيح قطاع التحكم بالترتيب. | |||
{| class="wikitable" | |||
!النوع | |||
!مطلوب | |||
|- | |||
|مصفوفة نصية (array of string) | |||
|لا | |||
|} | |||
== '''مصادر''' == | |||
* [https://facebook.github.io/react-native/docs/segmentedcontrolios صفحة '''SegmentedControlIOS '''في توثيق React Native الرسمي.] |
مراجعة 08:35، 13 ديسمبر 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 Props
.
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) | لا |