الفرق بين المراجعتين ل"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) لا

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/segmentedcontrolios&oldid=29979"