SegmentedControlIOS في React Native

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