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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (مراجعة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:المكون SegmentedControlIOS في ReactNative}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:المكون SegmentedControlIOS في ReactNative}}</noinclude>
<blockquote>'''مهملة:''' استخدم [https://github.com/react-native-segmented-control/segmented-control <code>@react-native-community/segmented-control</code>] بدلًا منها.
+
<blockquote>'''مهملة:''' يمكن استخدام [https://github.com/react-native-segmented-control/segmented-control <code>segmented-control</code>] كذلك.
 
</blockquote>
 
</blockquote>
 
يُستخدم المكوّن <code>SegmentedControlIOS</code> لتصيير الواجهة UISegmentedControl على منصّة iOS.
 
يُستخدم المكوّن <code>SegmentedControlIOS</code> لتصيير الواجهة UISegmentedControl على منصّة iOS.
 
__toc__
 
__toc__
==== تغيير الدليل المختار برمجيًا ====
+
=== تغيير الدليل المختار برمجيًا ===
  
يمكن تغيير الدليل مباشرة (on the fly) وذلك بإسناد الخاصيّة selectedIndex لمتغير حالة، ثم تغيير قيمة هذا المتغيّر. مع ملاحظة ضرورة تحديث متغيّر الحالة عند اختيار المستخدم قيمة ويغيّر الدليل كما هو موضّح بالمثال التالي.
+
يمكن تغيير الدليل مباشرةص (on the fly) وذلك بإسناد الخاصيّة <code>selectedIndex</code> لمتغير حالة، ثم تغيير قيمة هذا المتغيّر مع ملاحظة ضرورة تحديث متغيّر الحالة عند اختيار المستخدم قيمة،  ويغيّر الدليل كما هو موضّح بالمثال التالي.
  
 
== مثال ==
 
== مثال ==
سطر 43: سطر 43:
 
== الخاصيات  ==
 
== الخاصيات  ==
  
موروثة من الخاصيات [https://reactnative.dev/docs/view#props <code>View props</code>].
+
موروثة من الخاصيات <code>[[ReactNative/view|View]]</code>.
  
 
=== <code>enabled</code> ===
 
=== <code>enabled</code> ===
  
لن يستطيع المستخدم التفاعل مع واجهة التحكم إذا كانت قيمتها false، والقيمة الافتراضية true.
+
لن يستطيع المستخدم التفاعل مع واجهة التحكم إذا كانت قيمتها <code>false</code>، والقيمة الافتراضية <code>true</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 53: سطر 53:
 
! مطلوب
 
! مطلوب
 
|-
 
|-
| قيمة منطقية (bool)
+
| (bool)
 
| لا
 
| لا
 
|}
 
|}
سطر 59: سطر 59:
 
=== <code>momentary</code> ===
 
=== <code>momentary</code> ===
  
لن يبقى القطاع (segment) المختار مرئيًا إذا كانت قيمتها true، وتستمر الدالة <code>onValueChange</code> بعملها كالمعتاد.
+
لن يبقى القطاع (segment) المختار مرئيًا إذا كانت قيمتها <code>true</code>، وتستمر الدالة <code>onValueChange</code> بعملها كالمعتاد.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 65: سطر 65:
 
! مطلوب
 
! مطلوب
 
|-
 
|-
| قيمة منطقية (bool)
+
| (bool)
 
| لا
 
| لا
 
|}
 
|}
سطر 83: سطر 83:
 
=== <code>onValueChange</code> ===
 
=== <code>onValueChange</code> ===
  
الدالة التي تُستدعى عندما ينقر المستخدم على القطاع، حيث يُمرر لها قيمة القطاع كمعامل.
+
الدالة التي تُستدعى عندما ينقر المستخدم على القطاع، حيث يُمرر لها قيمة القطاع على أساس معامل.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 95: سطر 95:
 
=== <code>selectedIndex</code> ===
 
=== <code>selectedIndex</code> ===
  
قيمة الدليل التي ستُختار في خاصيّة القطاع `props.values.
+
قيمة الدليل التي ستُختار في خاصيّة القطاع <code>values</code>.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 127: سطر 127:
 
! مطلوب
 
! مطلوب
 
|-
 
|-
| مصفوفة من السلاسل النصية (array of string)
+
| (array of string)
 
| لا
 
| لا
 
|}
 
|}

مراجعة 09:04، 19 فبراير 2021

مهملة: يمكن استخدام 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.

enabled

لن يستطيع المستخدم التفاعل مع واجهة التحكم إذا كانت قيمتها false، والقيمة الافتراضية true.

النوع مطلوب
(bool) لا

momentary

لن يبقى القطاع (segment) المختار مرئيًا إذا كانت قيمتها true، وتستمر الدالة onValueChange بعملها كالمعتاد.

النوع مطلوب
(bool) لا

onChange

الدالة التي تُستدعى عندما ينقر المستخدم على القطاع، حيث يُمرر لها الحدث كمعامل.

النوع مطلوب
دالة (function) لا

onValueChange

الدالة التي تُستدعى عندما ينقر المستخدم على القطاع، حيث يُمرر لها قيمة القطاع على أساس معامل.

النوع مطلوب
دالة (function) لا

selectedIndex

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

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

tintColor

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

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

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

values

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

النوع مطلوب
(array of string) لا

مصادر