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