الفرق بين المراجعتين ل"ReactNative/appearance"
اذهب إلى التنقل
اذهب إلى البحث
(أنشأ الصفحة ب'== المكوّن Appearance == <syntaxhighlight lang="javascript"> import { Appearance } from 'react-native'; </syntaxhighlight>تظهر وحدة <code>Appearance</code...') |
|||
| سطر 1: | سطر 1: | ||
| − | == | + | == الوحدة Appearance == |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import { Appearance } from 'react-native'; | import { Appearance } from 'react-native'; | ||
| سطر 6: | سطر 6: | ||
* '''في نظام 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> | ||
| سطر 15: | سطر 15: | ||
// Use dark color scheme | // Use dark color scheme | ||
} | } | ||
| − | </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>يزيل هذا التابع معالج الأحداث. | ||
| + | |||
| + | == مصادر == | ||
| + | |||
| + | * [https://reactnative.dev/docs/appearance صفحة Appearance في توثيق React Native الرسمي.] | ||
مراجعة 23:45، 19 يونيو 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') {
// Use dark color scheme
}
يُتاح نظام الألوان على الفور، ولكن ذلك قد يتغير (مثل تغيير نظام الألوان المجدول في النهار أو الليل). يجب أن يحاول أيُّ منطق أو أنماط مصيَّرة ومعتمدة على نظام ألوان المستخدم المفضل استدعاءَ هذه الدالة عند كل تصيير، بدلًا من تخزين القيمة مؤقتًا. يمكنك مثلًا استخدام خطّاف useColorScheme React لأنه يوفّر ويشترك في تحديثات نظام الألوان، أو يمكنك استخدام أنماط مضمَّنة بدلاً من ضبط قيمة في StyleSheet.
التوابع
getColorScheme()
static getColorScheme()
يشير هذا التابع إلى نظام الألوان المفضل للمستخدم الحالي. قد تُحدَّث القيمة لاحقًا، إما من خلال إجراء المستخدم المباشر (مثل اختيار القالب theme في إعدادات الجهاز) أو وفقًا لجدول زمني (مثل القوالب الفاتحة والداكنة التي تتبع دورة النهار / الليل).
أنظمة الألوان المدعومة:
light: يفضّل المستخدم قالب الألوان الفاتحة.
dark: يفضّل المستخدم قالب الألوان الداكنة.
null: لم يحدّد المستخدم قالب اللون المفضّل.
ملاحظة: يعيد التابع
getColorScheme()القيمةlightدائمًا عند تنقيح الأخطاء باستخدام كروم Chrome.
addChangeListener()
static addChangeListener(listener)
يضيف هذا التابع معالج أحداث يُشغَّل عند تغيير تفضيلات المظهر.
removeChangeListener()
static removeChangeListener(listener)
يزيل هذا التابع معالج الأحداث.