react native fast shadow

؟ رد الفعل-الصيفية-الصراخ

ظلال Android سريعة وعالية الجودة لـ React Native

لماذا

React Native يدعم الظلال فقط على Android من خلال دعامة الارتفاع ولكن تحقيق التأثير المطلوب غالبًا ما يكون مستحيلًا لأنه يأتي فقط مع عدد قليل جدًا من الإعدادات المسبقة. تم إنشاء مكتبات الطرف الثالث للتحايل على هذا ولكن عند استخدامها في العديد من المشاهدات ، يمكن أن تجعلك أبطأ أو زيادة استهلاك الذاكرة بشكل كبير.

سمات

• ؟ ‍♀ سهلة الاستخدام: استبدال إسقاط للمكون <View>
• ⚡ الأداء: يمكن تطبيق الظلال على عدد كبير من المشاهدات دون أي تأثير أداء كبير. تم تحسينه لاستهلاك الذاكرة المنخفض وتقديم سريع
• ؟ قابل للتخصيص: يدعم جميع الدعائم العادية للظلال ، shadowRadius ، shadowColor ، shadowOpacity و shadowOffset
• Universal: يعمل على جميع المنصات. على iOS و Web ، <ShadowedView> هو مجرد اسم مستعار لـ <View>

ابدء

npm install react-native-fast-shadow
# or
yarn add react-native-fast-shadow

الاستخدام:

 import { ShadowedView } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { {
    shadowOpacity : 0.4 ,
    shadowRadius : 12 ,
    shadowOffset : {
      width : 5 ,
      height : 3 ,
    } ,
  } }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView > 

Shadowstyle ():

يمكن أيضًا استخدام الأداة المساعدة shadowStyle() لتسهيل إنشاء أنماط الظل والحفاظ على منصات الترحيل المتسقة . سيؤدي ذلك إلى إنشاء نفس style على النحو الوارد أعلاه ، ولكنه سيقسم نصف قطر الظل على 2 على iOS (كما هو الحال بالنسبة لبعض الأسباب ، تكون ظلال iOS كبيرة جدًا بعامل 2 عند مقارنتها بأدوات التصميم أو إلى CSS Box-shadows):

 import { ShadowedView , shadowStyle } from 'react-native-fast-shadow' ;

< ShadowedView
  style = { shadowStyle ( {
    opacity : 0.4 ,
    radius : 12 ,
    offset : [ 5 , 3 ] ,
  } ) }
>
  < Image source = { require ( './kitten.png' ) } style = { { borderRadius : 30 } } / >
< / ShadowedView > 

كيف يعمل تحت الغطاء

على Android ، يتم إنشاء Shadow Drawles مع العملية التالية (انظر ShadowFactory.java لمزيد من التفاصيل):

1. تم رسم شكل المنظر (المستطيل مع زوايا مستديرة) باللون الأسود على قماش
2. يتم تطبيق طمس غاوسي على القماش مع shadowRadius المعطى باستخدام API Renderscript
3. ثم يتم تحويل السحب إلى تسعة من القابلة للتأكد من أن زوايا الظل لن يتم تشويهها عند تغيير حجم العرض. وبهذه الطريقة ، لا يمكننا توليد سوى ظل صغير يمكن رسمه وإعادة استخدامه لجميع المشاهدات مع نفس الحدود ودائرة قطرها.
4. أخيرًا ، يتم تقديم السحب خلف محتوى العرض: إنه ملون بألوان shadowColor / shadowOpacity ويتم تعويضها وفقًا لـ shadowOffset

كيف يعمل NinePatchDrawlable (لاحظ كيف لا يتم تحريك الزوايا عند تغيير حجم السحب):

استكشاف الأخطاء وإصلاحها

ويأتي شادو-فايف-وايطا مع القيود التالية:

• إنه يعمل فقط مع مستطيلات مستديرة: على عكس تطبيق iOS <View> ، لن يعمل <ShadowedView> مع طرق عرض Freeform. وتتوقع أن تكون وجهة نظر النسل المباشر مستطيلًا مستديرًا (يصل إلى دائرة). الحلول: للعناصر المظللة <Text> ، يمكنك استخدام TextShadowRadius. بالنسبة للأشكال المعقدة ، فإن React-Itist-Androw هو أفضل خيار لك.
• يتوقع أن يملأه عرض طفله: الأمر متروك لك للتأكد من أن <ShadowedView> وأطفاله لديهم نفس الحجم ، وإلا فإن الظل سيكون أكبر من المحتوى (يمكنك التفكير في <ShadowedView> كطريقة عرض مع لون الخلفية).
• يمكن استنتاج نصف قطر الزاوية بشكل غير صحيح: نستخدم نمط <ShadowedView> أو نمط طفلها المباشر لاستنتاج نصف قطر الزاوية للتطبيق. إذا كان العرض الهرمي الخاص بك أكثر تعقيدًا ، فقد لا يتم استنتاج نصف قطر الزاوية بشكل صحيح. الحل: أعد صياغة عرض التسلسل الهرمي أو تمرير borderRadius مباشرة إلى نمط style من <ShadowedView> .
• يقتصر Shadow Radius على 25 أو أقل: يأتي هذا القيد من تأثير Blur's Renderscript. الحل: أخبرنا إذا كانت هذه مشكلة بالنسبة لك. من المحتمل أن يتم العمل حول هذا من خلال تقليل خلاف الظل قبل تطبيق تأثير الضبابية.

معيار

يقارن الجدول التالي استهلاك الذاكرة لـ react-native-fast-shadow و React-Native-Androw و React-Native-SHADOW-2 عند تقديم 100 150 × 200PT <Image> على بكسل 2 مع ظل نصف قطرها 12pt. تم بناء التطبيق باستخدام تبديل Debug و Hermes.

لا ظل	رد الفعل-الشادو -2	رد الفعل-أندرو	رد الفعل-الصيفية-الصراخ
117 ميغابايت (المرجع)	430 ميجابايت (+313 ميجابايت)	403MB (+286 ميجابايت)	123 ميجابايت (+6 ميجابايت)