الفرق بين المراجعتين لصفحة: «ReactNative/usecolorscheme»

مراجعة 00:08، 22 يونيو 2021

الخطّاف useColorScheme

import { useColorScheme } from 'react-native';

يوفّر الخطّاف useColorScheme الخاص بمكتبة React ويشترك في تحديثات نظام الألوان من الوحدة Appearance. تشير القيمة المُعادة إلى نظام الألوان المفضل للمستخدم الحالي. قد تحدَّث القيمة لاحقًا، إما من خلال إجراء المستخدم المباشر (مثل اختيار القالب theme في إعدادات الجهاز) أو وفقًا لجدول زمني (مثل القوالب الفاتحة والداكنة التي تتبع دورة النهار أو الليل).

أنظمة الألوان المدعومة

"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.

مصادر

صفحة useColorScheme في توثيق React Native الرسمي.

@@ سطر 2: / سطر 2: @@
 <syntaxhighlight lang="javascript">
 import { useColorScheme } from 'react-native';
-</syntaxhighlight>يوفّر خطّاف <code>useColorScheme</code> React ويشترك في تحديثات نظام الألوان من وحدة المظهر. تشير قيمة الإرجاع إلى نظام الألوان المفضل للمستخدم الحالي. قد يتم تحديث القيمة لاحقًا ، إما من خلال إجراء المستخدم المباشر (مثل اختيار الموضوع في إعدادات الجهاز) أو وفقًا لجدول زمني (مثل السمات الفاتحة والداكنة التي تتبع دورة النهار / الليل).
+</syntaxhighlight>يوفّر الخطّاف <code>useColorScheme</code> الخاص بمكتبة React ويشترك في تحديثات نظام الألوان من الوحدة <code>[[ReactNative/appearance|Appearance]]</code>. تشير القيمة المُعادة إلى نظام الألوان المفضل للمستخدم الحالي. قد تحدَّث القيمة لاحقًا، إما من خلال إجراء المستخدم المباشر (مثل اختيار القالب theme في إعدادات الجهاز) أو وفقًا لجدول زمني (مثل القوالب الفاتحة والداكنة التي تتبع دورة النهار أو الليل).
-أنظمة الألوان المتوافقة #
+=== أنظمة الألوان المدعومة ===
+<code>"light"</code>: يفضل المستخدم قالب لون فاتح.
-"فاتح": يفضل المستخدم مظهر اللون الفاتح.
+<code>"dark"</code>: يفضل المستخدم  قالب لون داكن.
-"داكن": يفضل المستخدم سمة اللون الداكن.
+<code>null</code>: لم يحدّد المستخدم قالب اللون المفضل.
-خالية: لم يشر المستخدم إلى سمة اللون المفضلة.
+'''ملاحظة''': سيعيد هذا الخطاف دائمًا <code>"light"</code> عند تفعيل منقّح أخطاء Chrome نظرًا للقيود التقنية حاليًا.
-ملاحظة: نظرًا للقيود التقنية حاليًا ، عند تمكين مصحح أخطاء Chrome ، سيعود هذا الخطاف دائمًا "light".
+=== مثال ===
+<syntaxhighlight lang="javascript">
+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;
+</syntaxhighlight>يمكنك العثور على مثال كامل يوضح استخدام هذا الخطاف ضمن سياق React لإضافة الدعم للقوالب الفاتحة والداكنة لتطبيقك في <code>[https://github.com/facebook/react-native/blob/master/packages/rn-tester/js/examples/Appearance/AppearanceExample.js AppearanceExample.js]</code>.
+== مصادر ==
+* [https://reactnative.dev/docs/usecolorscheme صفحة useColorScheme في توثيق React Native الرسمي.]