الفرق بين المراجعتين ل"ReactNative/segmentedcontrolios"

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

المراجعة الحالية بتاريخ 14:45، 9 أكتوبر 2021

مهمل: اسخدم أي من هذه الحزم من المجتمع بدلًا منه.

يُستخدم المكوّن 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

قيمة الدليل props.values التي ستُختار في خاصيّة القطاع values.

النوع مطلوب
عدد (number) لا

tintColor

لون تمييز التحكم.

النوع مطلوب
سلسلة نصية (string) لا

ملاحظة: غير مدعومة على المنصات iOS ذات الإصدار 13 وما بعدها.

values

مسمّيات (labels) مفاتيح قطاع التحكم، بالترتيب.

النوع مطلوب
مصفوفة من سلاسل نصية (array of string) لا

مصادر