عرض مصدر ReactNative/appearance

<noinclude>{{DISPLAYTITLE:الوحدة Appearance في React Native}}</noinclude>
تظهِر وحدة <code>Appearance</code> معلومات حول تفضيلات المظهر الخاصة بالمستخدم، مثل نظام الألوان المفضل (فاتح أو داكن).<syntaxhighlight lang="javascript">
import { Appearance } from 'react-native';
</syntaxhighlight><blockquote>'''ملاحظات المطور'''

* '''في نظام Android''': سيُربَط تفضيل نظام الألوان مع تفضيل القالب الفاتح أو [https://developer.android.com/guide/topics/ui/look-and-feel/darktheme الداكن] الخاص بالمستخدم على أجهزة Android 10 (واجهة API ذات المستوى 29) والأحدث.
* '''في نظام iOS''': سيُربَط تفضيل نظام الألوان مع تفضيل الوضع الفاتح أو [https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/ الداكن] الخاص بالمستخدم على أجهزة iOS 13 والأحدث.
* '''في الويب''': واجهة برمجة تطبيقات الوحدة <code>Appearance</code> مستوحاة من [https://drafts.csswg.org/mediaqueries-5/ مسودة Media Queries] من W3C، حيث صُمِّم تفضيل نظام الألوان وفقًا [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme للميزة <code>prefers-color-scheme</code> الخاصة بوسائط CSS].
</blockquote>

== مثال توضيحي ==

يمكنك استخدام وحدة <code>Appearance</code> لتحديد تفضيل المستخدم نظام ألوان داكن أم لا:<syntaxhighlight lang="javascript">
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // استخدم نظام الألوان الداكن
}
</syntaxhighlight>يُتاح نظام الألوان على الفور، ولكن ذلك قد يتغير (مثل تغيير نظام الألوان المجدول في النهار أو الليل). يجب أن يحاول أيُّ منطق أو أنماط مصيَّرة ومعتمدة على نظام ألوان المستخدم المفضل استدعاءَ هذه الدالة عند كل تصيير، بدلًا من تخزين القيمة مؤقتًا. يمكنك مثلًا استخدام خطّاف <code>useColorScheme</code> React لأنه يوفّر ويشترك في تحديثات نظام الألوان، أو يمكنك استخدام أنماط مضمَّنة بدلاً من ضبط قيمة في <code>StyleSheet</code>.

== التوابع ==

===<code>getColorScheme()‎</code>===
<syntaxhighlight lang="javascript">
static getColorScheme()
</syntaxhighlight>يشير هذا التابع إلى نظام الألوان المفضل للمستخدم الحالي. قد تُحدَّث القيمة لاحقًا، إما من خلال إجراء المستخدم المباشر (مثل اختيار القالب theme في إعدادات الجهاز) أو وفقًا لجدول زمني (مثل القوالب الفاتحة والداكنة التي تتبع دورة النهار / الليل).

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

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

===<code>addChangeListener()‎</code>===
<syntaxhighlight lang="javascript">
static addChangeListener(listener)
</syntaxhighlight>يضيف هذا التابع معالج أحداث يُشغَّل عند تغيير تفضيلات المظهر.

===<code>removeChangeListener()‎</code>===
<syntaxhighlight lang="javascript">
static removeChangeListener(listener)
</syntaxhighlight>يزيل هذا التابع معالج الأحداث.<blockquote>'''تنبيه''': هذا التابع مهمل، استعمل التابع <code>remove()‎</code> مع إشتراك الحدث الذي يعيده التابع <code>addChangeListener()‎</code>.</blockquote>

== مصادر ==

* [https://reactnative.dev/docs/appearance صفحة Appearance في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native API]]