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.

`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)	لا

مصادر

صفحة SegmentedControlIOS في توثيق React Native الرسمي.