الفرق بين المراجعتين ل"ReactNative/switch"
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
سطر 116: | سطر 116: | ||
* [https://reactnative.dev/docs/switch صفحة Switch في توثيق React Native الرسمي.] | * [https://reactnative.dev/docs/switch صفحة Switch في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
+ | [[تصنيف:React Native Component]] |
المراجعة الحالية بتاريخ 14:02، 9 أكتوبر 2021
مكون لإدخال قيمة منطقية.
هذا مكوّن متحكم فيه يتطلب دالة رد نداء باسم 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
.
النوع | مطلوب |
---|---|
قيمة منطقيّة | لا |