ReactNative/appearance

المكوّن Appearance

import { Appearance } from 'react-native';

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

ملاحظات المطور

• في نظام Android: سيُربَط تفضيل نظام الألوان مع تفضيل القالب الفاتح أو الداكن الخاص بالمستخدم على أجهزة Android 10 (واجهة API ذات المستوى 29) والإصدارات الأحدث.
• في نظام iOS: سيُربَط تفضيل نظام الألوان مع تفضيل الوضع الفاتح أو الداكن الخاص بالمستخدم على أجهزة iOS 13 والإصدارات الأحدث.
• في الويب: واجهة برمجة تطبيقات المكوّن Appearance مستوحاة من مسودة Media Queries من W3C، حيث صُمِّم تفضيل نظام الألوان وفقًا للميزة prefers-color-scheme الخاصة بوسائط CSS.

مثال توضيحي

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

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

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