المكون Switch في React Native
مكون لإدخال قيمة منطقية.
هذا مكوّن متحكم فيه يتطلب دالة رد نداء باسم onValueChange تُحدِّث قيمة الخاصيّة value ليعكس المُكوّن ما قام به المستخدم. إذا لم تُحدَّث قيمة الخاصيّة value، فسيستمر المكوّن في تصيير قيمة الخاصيّة value المُعطاة بدلًا من النتيجة المتوقعة لما قام به المستخدم.
مثال
إليك المثال التالي (تجربة حية):
import React, { useState } from "react";
import { View, Switch, StyleSheet } from "react-native";
const App = () => {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
return (
<View style={styles.container}>
<Switch
trackColor={{ false: "#767577", true: "#81b0ff" }}
thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={isEnabled}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});
export default App;
الخاصيات
يرث خاصيّات المكوّن View.
disabled
إذا كانت قيمتُها القيمةَ true، فلن يتمكن المستخدم من تبديل المُحوِّلة (switch). القيمة الافتراضية هي القيمة false.
| النوع | مطلوب |
|---|---|
| قيمة منطقيّة | لا |
ios_backgroundColor
لونٌ مُخصّص للخلفية على نظام التشغيل iOS. يمكن رؤية لون الخلفية هذا عندما تكون قيمة المحوّلة false أو عندما تكون المحوّلة مُعطلة (وتكون المحوّلة شفافة).
| النوع | مطلوب |
|---|---|
| لون | لا |
onChange
تُستدعى عندما يحاول المستخدم تغيير قيمة المحوّلة. تستقبل حدث التغيير كمعامل. إذا كنت ترغب في استقبال القيمة الجديدة فقط، فاستخدم onValueChange بدلاً من ذلك.
| النوع | مطلوب |
|---|---|
| دالة | لا |
onValueChange
تُستدعى عندما يحاول المستخدم تغيير قيمة المحوّلة. تستقبل القيمة الجديدة كمعامل. إذا كنت ترغب في استقبال حدثٍ عوضًا عن ذلك، فاستخدم onChange.
| النوع | مطلوب |
|---|---|
| دالة | لا |
thumbColor
لون قبضة التحويل الأماميّة. إذا عُيِّنت قيمة لهذه الخاصيّة على نظام التشغيل iOS، فستفقد قبضة التحويل ظِلّها.
| النوع | مطلوب |
|---|---|
| لون | لا |
trackColor
ألوان مُخصّصة لمسار المحوّلة.
ملاحظة على iOS: عندما تكون قيمة المحوّلة القيمةَ false، فإنّ المسار ينكمش إلى الحد. إذا أردت تغيير لون الخلفية المكشوفة من طرف المسار المنكمش، فاستخدم الخاصيّة ios_backgroundColor.
| النوع | مطلوب |
|---|---|
| كائن: {false: color, true: color} | لا |
value
قيمة المُحوِّلة. إذا كانت القيمةَ true، فهذا يعني أن المُحوِّلة في وضع التشغيل. القيمة الافتراضية هي false.
| النوع | مطلوب |
|---|---|
| قيمة منطقيّة | لا |