الفرق بين المراجعتين ل"ReactNative/usecolorscheme"
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة) |
|||
| سطر 1: | سطر 1: | ||
| − | + | <noinclude>{{DISPLAYTITLE:الدالة useColorScheme في React Native}}</noinclude> | |
| − | <syntaxhighlight lang="javascript"> | + | يوفّر الخطّاف <code>useColorScheme</code> الخاص بمكتبة React ويشترك في تحديثات نظام الألوان من الوحدة <code>[[ReactNative/appearance|Appearance]]</code>. تشير القيمة المُعادة إلى نظام الألوان المفضل للمستخدم الحالي، وقد تحدَّث القيمة لاحقًا، إما من خلال إجراء المستخدم المباشر (مثل اختيار القالب theme في إعدادات الجهاز) أو وفقًا لجدول زمني (مثل القوالب الفاتحة والداكنة التي تتبع دورة النهار أو الليل).<syntaxhighlight lang="javascript"> |
import { useColorScheme } from 'react-native'; | import { useColorScheme } from 'react-native'; | ||
| − | </syntaxhighlight> | + | </syntaxhighlight> |
| − | + | == أنظمة الألوان المدعومة == | |
| − | |||
<code>"light"</code>: يفضل المستخدم قالب لون فاتح. | <code>"light"</code>: يفضل المستخدم قالب لون فاتح. | ||
| سطر 13: | سطر 12: | ||
'''ملاحظة''': سيعيد هذا الخطاف دائمًا القيمة <code>"light"</code> عند تفعيل منقّح أخطاء Chrome نظرًا للقيود التقنية حاليًا. | '''ملاحظة''': سيعيد هذا الخطاف دائمًا القيمة <code>"light"</code> عند تفعيل منقّح أخطاء Chrome نظرًا للقيود التقنية حاليًا. | ||
| − | + | == مثال == | |
| − | <syntaxhighlight lang="javascript"> | + | إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/usecolorscheme-example تجربة حية]):<syntaxhighlight lang="javascript"> |
import React from 'react'; | import React from 'react'; | ||
import { Text, StyleSheet, useColorScheme, View } from 'react-native'; | import { Text, StyleSheet, useColorScheme, View } from 'react-native'; | ||
| سطر 41: | سطر 40: | ||
* [https://reactnative.dev/docs/usecolorscheme صفحة useColorScheme في توثيق React Native الرسمي.] | * [https://reactnative.dev/docs/usecolorscheme صفحة useColorScheme في توثيق React Native الرسمي.] | ||
| + | [[تصنيف:ReactNative]] | ||
| + | [[تصنيف:ReactNative API]] | ||
مراجعة 13:44، 6 أكتوبر 2021
يوفّر الخطّاف useColorScheme الخاص بمكتبة React ويشترك في تحديثات نظام الألوان من الوحدة Appearance. تشير القيمة المُعادة إلى نظام الألوان المفضل للمستخدم الحالي، وقد تحدَّث القيمة لاحقًا، إما من خلال إجراء المستخدم المباشر (مثل اختيار القالب theme في إعدادات الجهاز) أو وفقًا لجدول زمني (مثل القوالب الفاتحة والداكنة التي تتبع دورة النهار أو الليل).
import { useColorScheme } from 'react-native';
أنظمة الألوان المدعومة
"light": يفضل المستخدم قالب لون فاتح.
"dark": يفضل المستخدم قالب لون داكن.
null: لم يحدّد المستخدم قالب اللون المفضل.
ملاحظة: سيعيد هذا الخطاف دائمًا القيمة "light" عند تفعيل منقّح أخطاء Chrome نظرًا للقيود التقنية حاليًا.
مثال
إليك المثال التالي (تجربة حية):
import React from 'react';
import { Text, StyleSheet, useColorScheme, View } from 'react-native';
const App = () => {
const colorScheme = useColorScheme();
return (
<View style={styles.container}>
<Text>useColorScheme(): {colorScheme}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
});
export default App;
يمكنك العثور على مثال كامل يوضح استخدام هذا الخطاف ضمن سياق React لإضافة الدعم للقوالب الفاتحة والداكنة لتطبيقك في AppearanceExample.js.