الفرق بين المراجعتين لصفحة: «ReactNative/appearance»
لا ملخص تعديل |
لا ملخص تعديل |
||
| سطر 2: | سطر 2: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import { Appearance } from 'react-native'; | import { Appearance } from 'react-native'; | ||
</syntaxhighlight> | </syntaxhighlight>تظهِر وحدة <code>Appearance</code> معلومات حول تفضيلات المظهر الخاصة بالمستخدم، مثل نظام الألوان المفضل (فاتح أو داكن).<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]. | * '''في الويب''': واجهة برمجة تطبيقات الوحدة <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> | ||
| سطر 13: | سطر 13: | ||
const colorScheme = Appearance.getColorScheme(); | const colorScheme = Appearance.getColorScheme(); | ||
if (colorScheme === 'dark') { | if (colorScheme === 'dark') { | ||
// | // استخدم نظام الألوان الداكن | ||
} | } | ||
</syntaxhighlight>يُتاح نظام الألوان على الفور، ولكن ذلك قد يتغير (مثل تغيير نظام الألوان المجدول في النهار أو الليل). يجب أن يحاول أيُّ منطق أو أنماط مصيَّرة ومعتمدة على نظام ألوان المستخدم المفضل استدعاءَ هذه الدالة عند كل تصيير، بدلًا من تخزين القيمة مؤقتًا. يمكنك مثلًا استخدام خطّاف <code>useColorScheme</code> React لأنه يوفّر ويشترك في تحديثات نظام الألوان، أو يمكنك استخدام أنماط مضمَّنة بدلاً من ضبط قيمة في <code>StyleSheet</code>. | </syntaxhighlight>يُتاح نظام الألوان على الفور، ولكن ذلك قد يتغير (مثل تغيير نظام الألوان المجدول في النهار أو الليل). يجب أن يحاول أيُّ منطق أو أنماط مصيَّرة ومعتمدة على نظام ألوان المستخدم المفضل استدعاءَ هذه الدالة عند كل تصيير، بدلًا من تخزين القيمة مؤقتًا. يمكنك مثلًا استخدام خطّاف <code>useColorScheme</code> React لأنه يوفّر ويشترك في تحديثات نظام الألوان، أو يمكنك استخدام أنماط مضمَّنة بدلاً من ضبط قيمة في <code>StyleSheet</code>. | ||
=== التوابع === | === مرجع التوابع === | ||
==== <code>getColorScheme()</code> ==== | ==== <code>getColorScheme()</code> ==== | ||
مراجعة 00:54، 25 يونيو 2021
الوحدة 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') {
// استخدم نظام الألوان الداكن
}
يُتاح نظام الألوان على الفور، ولكن ذلك قد يتغير (مثل تغيير نظام الألوان المجدول في النهار أو الليل). يجب أن يحاول أيُّ منطق أو أنماط مصيَّرة ومعتمدة على نظام ألوان المستخدم المفضل استدعاءَ هذه الدالة عند كل تصيير، بدلًا من تخزين القيمة مؤقتًا. يمكنك مثلًا استخدام خطّاف useColorScheme React لأنه يوفّر ويشترك في تحديثات نظام الألوان، أو يمكنك استخدام أنماط مضمَّنة بدلاً من ضبط قيمة في StyleSheet.
مرجع التوابع
getColorScheme()
static getColorScheme()
يشير هذا التابع إلى نظام الألوان المفضل للمستخدم الحالي. قد تُحدَّث القيمة لاحقًا، إما من خلال إجراء المستخدم المباشر (مثل اختيار القالب theme في إعدادات الجهاز) أو وفقًا لجدول زمني (مثل القوالب الفاتحة والداكنة التي تتبع دورة النهار / الليل).
أنظمة الألوان المدعومة:
light: يفضّل المستخدم قالب الألوان الفاتحة.
dark: يفضّل المستخدم قالب الألوان الداكنة.
null: لم يحدّد المستخدم قالب اللون المفضّل.
ملاحظة: يعيد التابع
getColorScheme()القيمةlightدائمًا عند تنقيح الأخطاء باستخدام كروم Chrome.
addChangeListener()
static addChangeListener(listener)
يضيف هذا التابع معالج أحداث يُشغَّل عند تغيير تفضيلات المظهر.
removeChangeListener()
static removeChangeListener(listener)
يزيل هذا التابع معالج الأحداث.