ReactNative/segmentedcontrolios
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) | لا |