مولّد الظلال لـ React Native — كود iOS + Android مع معاينة مباشرة

يعمل الظل في React Native بشكل مختلف على كل منصة: يقرأ iOS خصائص shadowColor وshadowOffset وshadowOpacity وshadowRadius، بينما يتجاهل Android كل ذلك تمامًا ويحتاج بدلًا منه إلى رقم elevation منفصل. اضبط الظل بصريًا هنا وانسخ كائن الأنماط الذي يغطي كلا النظامين، بالإضافة إلى سلسلة boxShadow الجديدة المشتركة بين المنصتين للتطبيقات التي تستخدم New Architecture.

ما هي هذه الأداة؟

في React Native، الظلال ليست مشتركة بين المنصتين افتراضيًا. يستخدم iOS أربع خصائص أنماط منفصلة (shadowColor، وshadowOffset الذي يحتوي على width/height، وshadowOpacity من 0 إلى 1، وshadowRadius للتحكم في التمويه)، وهذه تُترجم إلى نفس آلية الظل CoreAnimation التي يستخدمها box-shadow على الويب. أما نظام View الأصلي في Android فلا يدعم أشكال ظلال حرة إطلاقًا — يدعم فقط elevation، وهو رقم واحد ينتج ظلًا ثابتًا بأسلوب Material Design بناءً على مدى "ارتفاع" العنصر الظاهري.

هذا يعني أن الظل الذي يبدو صحيحًا على iOS باستخدام shadowRadius/shadowOpacity لن يظهر إطلاقًا على Android ما لم تحدد أيضًا قيمة elevation، ولن يتطابق الاثنان أبدًا بدقة البكسل لأن شكل ظل elevation ليس قابلًا للتخصيص كما هو الحال في iOS. اعتبارًا من React Native 0.74 مع تفعيل New Architecture، أصبحت متاحة أيضًا خاصية أنماط boxShadow المشتركة بين المنصتين، وتستخدم نفس صياغة CSS.

لماذا تستخدمها؟

شاهد معاينة بصرية مباشرة أثناء تعديل الإزاحة والتمويه والشفافية واللون — بدلًا من تخمين القيم وإعادة بناء التطبيق للتحقق منها.
احصل على خصائص ظل iOS، وelevation الخاص بـ Android، وسلسلة boxShadow الجديدة المشتركة بين المنصتين دفعة واحدة، دون الحاجة للبحث في ثلاثة واجهات برمجية مختلفة.
elevation عنصر تحكم منفصل (لا يُحسب تلقائيًا من التمويه/الشفافية) لأن العلاقة بين elevation ومظهر الظل في Android ليست ترجمة مباشرة لخصائص ظل iOS — يجب ضبطها بصريًا لتتطابق، وهذه الأداة تتيح لك فعل ذلك بمقارنة الاثنين جنبًا إلى جنب.
مجانية وفورية وجاهزة للنسخ ككائن أنماط واحد.

كيفية الاستخدام

اضبط الإزاحة X/Y، ونصف قطر التمويه، والشفافية، ولون الظل — يتحدّث مربع المعاينة مباشرة.
اضبط رقم elevation الخاص بـ Android بشكل منفصل حتى يتطابق بصريًا مع قوة الظل المطلوبة.
انقر على "Copy" لنسخ كائن الأنماط الكامل، متضمنًا خصائص iOS وelevation الخاص بـ Android وسلسلة boxShadow.
الصق الكائن في StyleSheet الخاص بمكوّنك — ادمجه مع أنماط العرض الحالية.

مثال

الإدخال

إزاحة (0، 4)، تمويه 8، شفافية 0.25، أسود، elevation 5

الناتج

shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'

تُضبط قيمة shadowRadius على نصف قيمة التمويه الظاهرة في المعاينة، بما يتوافق مع العلاقة العملية بين نصف قطر التمويه في CSS وshadowRadius في iOS.

الأسئلة الشائعة

لماذا لا يظهر الظل على Android؟

خصائص shadowColor/shadowOffset/shadowOpacity/shadowRadius مخصصة لنظام iOS فقط — يتجاهلها العرض الأصلي في Android تمامًا. تحتاج أيضًا إلى ضبط خاصية elevation (رقم موجب) حتى يظهر أي ظل على Android.

هل يمكن أن يبدو ظل Android مطابقًا تمامًا لظل iOS؟

ليس تمامًا — تنتج elevation شكل ظل Material Design المدمج في Android، الذي لا يمكن التحكم فيه بشكل مستقل من حيث اللون أو اتجاه الإزاحة أو التمويه كما هو الحال في iOS. يمكنك ضبط رقم elevation للحصول على قوة مشابهة بصريًا، لكن التطابق الدقيق بين المنصتين على مستوى البكسل غير ممكن باستخدام واجهات shadow/elevation التقليدية.

ما هي خاصية boxShadow وهل يمكن استخدامها بدلًا من ذلك؟

boxShadow خاصية أنماط أحدث ومشتركة بالفعل بين المنصتين (أُضيفت في React Native 0.74، متاحة مع New Architecture)، تستخدم نفس صياغة سلسلة box-shadow في CSS وتعمل بشكل مطابق على iOS وAndroid. إذا كانت نسخة React Native وبنية تطبيقك تدعمان ذلك، يمكنك استخدام هذه الخاصية وحدها بدلًا من خصائص iOS الأربع بالإضافة إلى elevation — تحقّق من نسخة RN وحالة New Architecture قبل الاعتماد عليها في الإنتاج.

لماذا تساوي shadowRadius نصف قيمة التمويه التي ضبطتها؟

تستخدم المعاينة المباشرة box-shadow من CSS، حيث تنتشر قيمة التمويه على مسافة أكبر بحوالي الضعف مقارنة بـ shadowRadius في iOS لنفس الرقم. يضبط الكود المُولّد قيمة shadowRadius على نصف قيمة التمويه لديك حتى يتطابق الظل الذي تراه في المعاينة مع ما يعرضه iOS فعليًا — لو نسخت قيمة التمويه مباشرة، لبدا الظل على iOS أكثر نعومة وحجمًا بشكل ملحوظ مقارنة بالمعاينة.

هل أحتاج إلى Platform.select لتطبيق هذه الأنماط؟

لا — من الآمن وضع خصائص shadow* الخاصة بـ iOS وelevation الخاص بـ Android معًا في كائن أنماط واحد، تمامًا كما يفعل الكود المُولّد: كل منصة تتجاهل ببساطة خصائص المنصة الأخرى. لا تستحق إضافة Platform.select إلا إذا أردت فعلًا تصميم ظلال مختلفة لكل منصة، وليس فقط لتجنّب تحذيرات (لا توجد أي تحذيرات أصلًا).

ضبطت elevation لكن الظل لا يظهر على Android — لماذا؟

أكثر سببين شيوعًا: العنصر الظاهري لا يملك backgroundColor (يُلقى ظل elevation في Android من الخلفية غير الشفافة للعنصر، لذا لا يُلقي عنصر شفاف أي ظل)، أو أن أحد العناصر الأصلية يحمل overflow: 'hidden' ويقصّ الظل. أضف لونًا صلبًا للخلفية وتحقّق من إعدادات overflow للعناصر الأصلية قبل افتراض أن قيمة elevation نفسها خاطئة.