الفرق بين المراجعتين ل"ReactNative/switch"
جميل-بيلوني (نقاش | مساهمات) ط |
|||
| (مراجعتان متوسطتان بواسطة مستخدمين اثنين آخرين غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
| − | <noinclude>{{DISPLAYTITLE: Switch في React Native}}</noinclude> | + | <noinclude>{{DISPLAYTITLE:المكون Switch في React Native}}</noinclude> |
مكون لإدخال قيمة منطقية. | مكون لإدخال قيمة منطقية. | ||
| − | هذا مكوّن متحكم فيه يتطلب دالة رد نداء باسم <code>onValueChange</code> تُحدِّث قيمة الخاصيّة <code>value</code> ليعكس المُكوّن ما قام به المستخدم. إذا لم تُحدَّث قيمة الخاصيّة <code>value</code>، فسيستمر المكوّن في تصيير قيمة الخاصيّة <code>value</code> المُعطاة | + | هذا مكوّن متحكم فيه يتطلب دالة رد نداء باسم <code>onValueChange</code> تُحدِّث قيمة الخاصيّة <code>value</code> ليعكس المُكوّن ما قام به المستخدم. إذا لم تُحدَّث قيمة الخاصيّة <code>value</code>، فسيستمر المكوّن في تصيير قيمة الخاصيّة <code>value</code> المُعطاة بدلًا من النتيجة المتوقعة لما قام به المستخدم. |
| + | |||
| + | == مثال == | ||
| + | إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/switch تجربة حية]):<syntaxhighlight lang="js"> | ||
| + | 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; | ||
| + | </syntaxhighlight> | ||
| + | |||
==الخاصيات== | ==الخاصيات== | ||
يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>. | يرث خاصيّات المكوّن <code>[[ReactNative/view|View]]</code>. | ||
| سطر 22: | سطر 56: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| − | |لون | + | |[[ReactNative/colors|لون]] |
|لا | |لا | ||
|} | |} | ||
| سطر 59: | سطر 93: | ||
ألوان مُخصّصة لمسار المحوّلة. | ألوان مُخصّصة لمسار المحوّلة. | ||
| − | على iOS: عندما تكون قيمة المحوّلة القيمةَ <code>false</code>، فإنّ المسار | + | '''ملاحظة على iOS''': عندما تكون قيمة المحوّلة القيمةَ <code>false</code>، فإنّ المسار ينكمش إلى الحد. إذا أردت تغيير لون الخلفية المكشوفة من طرف المسار المنكمش، فاستخدم الخاصيّة <code>ios_backgroundColor</code>. |
{| class="wikitable" | {| class="wikitable" | ||
| سطر 65: | سطر 99: | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
| − | | | + | |كائن: {false: color, true: color} |
|لا | |لا | ||
|} | |} | ||
| سطر 80: | سطر 114: | ||
== مصادر == | == مصادر == | ||
| − | * [https:// | + | * [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.
| النوع | مطلوب |
|---|---|
| قيمة منطقيّة | لا |