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

مراجعة 13:29، 6 أكتوبر 2021

تظهِر وحدة Appearance معلومات حول تفضيلات المظهر الخاصة بالمستخدم، مثل نظام الألوان المفضل (فاتح أو داكن).

import { Appearance } from 'react-native';

ملاحظات المطور
في نظام Android: سيُربَط تفضيل نظام الألوان مع تفضيل القالب الفاتح أو الداكن الخاص بالمستخدم على أجهزة Android 10 (واجهة API ذات المستوى 29) والأحدث.

في نظام iOS: سيُربَط تفضيل نظام الألوان مع تفضيل الوضع الفاتح أو الداكن الخاص بالمستخدم على أجهزة iOS 13 والأحدث.

في الويب: واجهة برمجة تطبيقات الوحدة Appearance مستوحاة من مسودة Media Queries من W3C، حيث صُمِّم تفضيل نظام الألوان وفقًا للميزة prefers-color-scheme الخاصة بوسائط CSS.

مثال توضيحي

يمكنك استخدام وحدة Appearance لتحديد تفضيل المستخدم نظام ألوان داكن أم لا:

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // استخدم نظام الألوان الداكن
}

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

التوابع

`getColorScheme()‎`

static getColorScheme()

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

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

light: يفضّل المستخدم قالب الألوان الفاتحة.
dark: يفضّل المستخدم قالب الألوان الداكنة.
null: لم يحدّد المستخدم قالب اللون المفضّل.
ملاحظة: يعيد التابع getColorScheme()‎ القيمة light دائمًا عند تنقيح الأخطاء باستخدام كروم Chrome.

`addChangeListener()‎`

static addChangeListener(listener)

يضيف هذا التابع معالج أحداث يُشغَّل عند تغيير تفضيلات المظهر.

`removeChangeListener()‎`

static removeChangeListener(listener)

يزيل هذا التابع معالج الأحداث.

تنبيه: هذا التابع مهمل، استعمل التابع remove()‎ مع إشتراك الحدث الذي يعيده التابع addChangeListener()‎.

مصادر

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

@@ سطر 1: / سطر 1: @@
-== الوحدة Appearance ==
+<noinclude>{{DISPLAYTITLE:الوحدة Appearance في React Native}}</noinclude>
-<syntaxhighlight lang="javascript">
+تظهِر وحدة <code>Appearance</code> معلومات حول تفضيلات المظهر الخاصة بالمستخدم، مثل نظام الألوان المفضل (فاتح أو داكن).<syntaxhighlight lang="javascript">
 import { Appearance } from 'react-native';
-</syntaxhighlight>تظهِر وحدة <code>Appearance</code> معلومات حول تفضيلات المظهر الخاصة بالمستخدم، مثل نظام الألوان المفضل (فاتح أو داكن).<blockquote>'''ملاحظات المطور'''
+</syntaxhighlight><blockquote>'''ملاحظات المطور'''
 * '''في نظام Android''': سيُربَط تفضيل نظام الألوان مع تفضيل القالب الفاتح أو [https://developer.android.com/guide/topics/ui/look-and-feel/darktheme الداكن] الخاص بالمستخدم على أجهزة Android 10 (واجهة API ذات المستوى 29) والأحدث.
@@ سطر 9: / سطر 9: @@
 </blockquote>
-=== مثال توضيحي ===
+== مثال توضيحي ==
 يمكنك استخدام وحدة <code>Appearance</code> لتحديد تفضيل المستخدم نظام ألوان داكن أم لا:<syntaxhighlight lang="javascript">
 const colorScheme = Appearance.getColorScheme();
@@ سطر 17: / سطر 18: @@
 </syntaxhighlight>يُتاح نظام الألوان على الفور، ولكن ذلك قد يتغير (مثل تغيير نظام الألوان المجدول في النهار أو الليل). يجب أن يحاول أيُّ منطق أو أنماط مصيَّرة ومعتمدة على نظام ألوان المستخدم المفضل استدعاءَ هذه الدالة عند كل تصيير، بدلًا من تخزين القيمة مؤقتًا. يمكنك مثلًا استخدام خطّاف <code>useColorScheme</code> React لأنه يوفّر ويشترك في تحديثات نظام الألوان، أو يمكنك استخدام أنماط مضمَّنة بدلاً من ضبط قيمة في <code>StyleSheet</code>.
-=== مرجع التوابع ===
+== التوابع ==
-==== <code>getColorScheme()‎</code> ====
+===<code>getColorScheme()‎</code>===
 <syntaxhighlight lang="javascript">
 static getColorScheme()
@@ سطر 26: / سطر 27: @@
 '''أنظمة الألوان المدعومة''':
-<code>light</code>: يفضّل المستخدم قالب الألوان الفاتحة.
+* <code>light</code>: يفضّل المستخدم قالب الألوان الفاتحة.
+* <code>dark</code>: يفضّل المستخدم قالب الألوان الداكنة.
-<code>dark</code>: يفضّل المستخدم قالب الألوان الداكنة.
+* null: لم يحدّد المستخدم قالب اللون المفضّل.<blockquote>'''ملاحظة''': يعيد التابع <code>getColorScheme()‎</code> القيمة <code>light</code> دائمًا عند تنقيح الأخطاء باستخدام كروم Chrome.</blockquote>
-null: لم يحدّد المستخدم قالب اللون المفضّل.<blockquote>'''ملاحظة''': يعيد التابع <code>getColorScheme()‎</code> القيمة <code>light</code> دائمًا عند تنقيح الأخطاء باستخدام كروم Chrome.</blockquote>
-==== <code>addChangeListener()‎</code> ====
+===<code>addChangeListener()‎</code>===
 <syntaxhighlight lang="javascript">
 static addChangeListener(listener)
 </syntaxhighlight>يضيف هذا التابع معالج أحداث يُشغَّل عند تغيير تفضيلات المظهر.
-==== <code>removeChangeListener()‎</code> ====
+===<code>removeChangeListener()‎</code>===
 <syntaxhighlight lang="javascript">
 static removeChangeListener(listener)
-</syntaxhighlight>يزيل هذا التابع معالج الأحداث.
+</syntaxhighlight>يزيل هذا التابع معالج الأحداث.<blockquote>'''تنبيه''': هذا التابع مهمل، استعمل التابع <code>remove()‎</code> مع إشتراك الحدث الذي يعيده التابع <code>addChangeListener()‎</code>.</blockquote>
 == مصادر ==
 * [https://reactnative.dev/docs/appearance صفحة Appearance في توثيق React Native الرسمي.]
+[[تصنيف:ReactNative]]
+[[تصنيف:ReactNative API]]