الفرق بين المراجعتين لصفحة: «ReactNative/appearance»
أنشأ الصفحة ب'== المكوّن Appearance == <syntaxhighlight lang="javascript"> import { Appearance } from 'react-native'; </syntaxhighlight>تظهر وحدة <code>Appearance</code...' |
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الوحدة Appearance في React Native}}</noinclude> | |||
<syntaxhighlight lang="javascript"> | تظهِر وحدة <code>Appearance</code> معلومات حول تفضيلات المظهر الخاصة بالمستخدم، مثل نظام الألوان المفضل (فاتح أو داكن).<syntaxhighlight lang="javascript"> | ||
import { Appearance } from 'react-native'; | import { Appearance } from 'react-native'; | ||
</syntaxhighlight> | </syntaxhighlight><blockquote>'''ملاحظات المطور''' | ||
* '''في نظام Android''': سيُربَط تفضيل نظام الألوان مع تفضيل القالب الفاتح أو [https://developer.android.com/guide/topics/ui/look-and-feel/darktheme الداكن] الخاص بالمستخدم على أجهزة Android 10 (واجهة API ذات المستوى 29) | * '''في نظام 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 | * '''في نظام 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> | </blockquote> | ||
== مثال توضيحي == | |||
يمكنك استخدام وحدة <code>Appearance</code> لتحديد تفضيل المستخدم نظام ألوان داكن أم لا:<syntaxhighlight lang="javascript"> | يمكنك استخدام وحدة <code>Appearance</code> لتحديد تفضيل المستخدم نظام ألوان داكن أم لا:<syntaxhighlight lang="javascript"> | ||
const colorScheme = Appearance.getColorScheme(); | const colorScheme = Appearance.getColorScheme(); | ||
if (colorScheme === 'dark') { | if (colorScheme === 'dark') { | ||
// | // استخدم نظام الألوان الداكن | ||
} | } | ||
</syntaxhighlight>يُتاح نظام الألوان على الفور، ولكن ذلك قد يتغير (مثل تغيير نظام الألوان المجدول في النهار أو الليل). يجب أن يحاول أيُّ منطق أو أنماط مصيَّرة ومعتمدة على نظام ألوان المستخدم المفضل استدعاءَ هذه الدالة عند كل تصيير، بدلًا من تخزين القيمة مؤقتًا. يمكنك مثلًا استخدام خطّاف <code>useColorScheme</code> React لأنه | </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]] | |||
المراجعة الحالية بتاريخ 14:12، 9 أكتوبر 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().