react native shadow 2
v7.1.1
مهم
New React Native 0.76 ، الذي تم إصداره في 23 أكتوبر 2024 ، يدعم أخيرًا ظلًا متقاطعًا!
يجب أن تفضل هذه الميزة الجديدة على هذه المكتبة.
لا أستطيع إلا أن أقدر كل شيء في دعم الجميع ولطفه على مدار 4 سنوات تقريبًا والاحتفال بعد أن وصلت إلى 39 ألف أسبوعيًا و 2 مترًا من التنزيلات ؟
إذا كنت تبحث عن محترف عاطفي مع 5 سنوات من الخبرة في TypeScript و React و React Native ، فاتصل بي على [email protected]!
رد الفعل-الشادو ميت لسنوات. هذا إصدار محسّن مع المزيد من الوظائف ، ودعم TypeScript ومكتوب من نقطة الصفر. ليس مطلوبًا تحديد حجمه: يتم تطبيق الظل بذكاء على العرض الأول ثم يتم إعادة تقديمه بدقة على ما يلي.
إنه يحل القضية المحلية القديمة المتمثلة في عدم وجود نفس ظهور الظل واستخدامه لنظام Android و iOS و Web.
لن يمنحك موقع إدراك الأثير/المولود المسلح للمواد الإبلاغية عن نتائج متشابهة للغاية بين المنصتين ، للأسباب التي وصفتها هنا. كما أنها ليست قابلة للتخصيص مثل هذه المكتبة.
متوافق مع Android و iOS و Web. ومعرض!
يدعم RTL.
امنح هذه المكتبة محاولة سريعة!
ينصح أحدث إصدار من
react-native-svg، بما في ذلك إذا كنت تستخدم Expo.
npm i react-native-shadow-2
# or
yarn add react-native-shadow-2 import { Shadow } from 'react-native-shadow-2' ;
< Shadow >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ Shadow > 
< Shadow distance = { 15 } startColor = { '#eb9066d8' } endColor = { '#ff00ff10' } offset = { [ 3 , 4 ] } >
< View style = { { borderTopStartRadius : 24 , borderBottomEndRadius : 0 , borderRadius : 10 , backgroundColor : '#c454f0dd' } } >
< Text style = { { margin : 20 , fontSize : 20 } } > ? </ Text >
</ View >
</ Shadow > 
| ملكية | وصف | يكتب | تقصير |
|---|---|---|---|
| StartColor | لون التدرج الأولي للظل. | string | '#00000020' |
| endcolor | لون التدرج النهائي للظل. | string | شفافة البدء. توضيح. |
| مسافة | إلى أي مدى يذهب الظل. | number | 10 |
| الإزاحة | يتحرك الظل. سالب x يحركه اليسار/البدء ، سالب y يحركه لأعلى.يقبل قيم 'x%' .تحديد هذا سيؤدي إلى الافتراضي paintInside إلى صحيح ، لأنه السلوك المعتاد المطلوب. | [x: string | number, y: string | number] | [0, 0] |
| paintinside | ضع الظل أدناه/داخل المحتوى. يتم استخدام startColor كون ملء ، دون التدرج.مفيد عند استخدام offset أو إذا كان طفلك لديه بعض الشفافية. | boolean | false ، ولكن true إذا تم تعريف offset |
| الجانبين | الجوانب التي ستحصل على ظلالها. لا يشمل الزوايا. الجوانب غير المحددة عوائق إلى حقيقية . توضيح. | Record<'start' | 'end' | 'top' | 'bottom', boolean> | undefined |
| زوايا | الزوايا التي ستحصل على ظلالها. زوايا غير محددة عوائق إلى حقيقية . توضيح. | Record<'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd', boolean> | undefined |
| أسلوب | نمط المنظر الذي يلف أطفالك. اقرأ الملاحظات أدناه. | StyleProp<ViewStyle> | undefined |
| حاوية | نمط المنظر الذي يلف الظل وأطفالك. مفيد للهوامش. | StyleProp<ViewStyle> | undefined |
| تمتد | اجعل أطفالك ocuppy جميع المساحة الأفقية المتاحة. توضيح. | boolean | false |
| أكثر أمانًا | لن تستخدم التحجيم النسبي وتحديد المواقع على العرض الأول ولكن على ما يلي تقديم أحجام onlayout الدقيقة. مفيد إذا كان التعامل مع نصف قطر أكبر من أحجام الجانبين (مثل الدائرة) لتجنب القطع الأثرية البصرية على العرض الأول. إذا كان true ، فلن يظهر الظل في العرض الأول. | boolean | false |
| عاجز | يعطل الظل. مفيد لإعادة استخدام المكونات بسهولة لأن الظلال غير مطلوبة في بعض الأحيان. لا تزال containerStyle style مطبقة. | boolean | false |
إذا كان للظل طفل واحد ، فسوف يحصل على width height وجميع خصائص borderRadius من خاصية style الأطفال ، إذا تم تعريفها.
يمكنك أيضًا تحديد تلك الخصائص في style الظل. سيكون للخصائص المحددة هنا أولوية على تلك المحددة في style الطفل.
إذا تم height width والارتفاع في أي من هؤلاء ، فسيكون هناك فقط عرض واحد ، حيث لن يحدث التحجيم التلقائي الأول ، فقط العرض الدقيق.
يمكنك استخدام إما 'borderTopLeftRadius' أو 'borderTopStartRadius' وتغيراتها لتحديد نصف قطر الزوايا ، على الرغم من أنني أوصي بهذا الأخير كما هو معيار RTL.
إن وجود دائرة نصف قطرها أكبر من جانبه سوف يفسد الظل إذا لم يتم تعريف الأحجام. يمكنك استخدام خاصية safeRender لإظهار الظل فقط على العرض الثاني وما بعده ، عندما يكون لدينا حجم المكون الدقيق و CARII محدودة بشكل صحيح.
Radii أكبر من 2000 (Tailwind rounded-full هو 9999) قد يعطل Android.
يتم تعيين العتامة مباشرة في خصائص startColor و endColor ، في قناة ألفا. على سبيل المثال: '#0001' هو أسود شفاف تقريبًا. يمكنك أيضًا استخدام '#rrggbbaa' و 'rgba()' و 'hsla()' وما إلى ذلك.
استخدم خاصية stretch أو style={{alignSelf: 'stretch'}} في مكون الظل الخاص بك. توضيح!
يتم تصدير نوع ShadowProps ، الدعائم من مكون الظل. يمكنك القيام بما يلي:
const ShadowPresets = {
button : {
offset : [ 0 , 1 ] , distance : 1 , startColor : '#0003' ,
} as ShadowProps ,
} ;
< Shadow { ... ShadowPresets . button } > offset size ترمي أخطاء TypeScript!قم بترقية TypeScript إلى 4.0.0 على الأقل! هذين الخصائص تستخدم tuples المسمى . إذا لم تستخدم TypeScript ، فلن يحدث هذا.
