CodeKitHubКакво представлява този инструмент?
В React Native сенките не са платформено независими по подразбиране. iOS използва четири отделни style свойства (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 е налично и платформено независимо style свойство boxShadow, използващо същия синтаксис като в CSS.
Защо да го използвате?
- Вижте визуален преглед на живо, докато настройвате отместване, замъгляване, непрозрачност и цвят — вместо да гадаете стойности и да пресъздавате приложението си, за да проверите.
- Получете едновременно свойствата за сянка на iOS, elevation за Android и по-новия платформено независим низ boxShadow, за да не се налага да търсите три различни API.
- Elevation е отделен контрол (не се изчислява автоматично от замъгляването/непрозрачността), защото съответствието между elevation и външния вид на сянката в Android не е директен превод от свойствата за сянка на iOS — предвидено е да го настроите визуално така, че да съвпада, а този инструмент ви позволява да правите точно това, едно до друго.
- Безплатно, мигновено и готово за копиране като единен style обект.
Как да го използвате
- Регулирайте отместването по X/Y, радиуса на замъгляване, непрозрачността и цвета на сянката — полето за преглед се обновява на живо.
- Отделно настройте числото elevation за Android, докато визуално не съвпадне с желаната от вас сила на сянката.
- Натиснете „Copy“, за да копирате целия style обект, включително свойствата за 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, за да получите визуално подобна сила, но перфектно съвпадение по пиксели между платформите не е възможно с класическите API за shadow/elevation.
Какво представлява свойството boxShadow и мога ли да го използвам вместо тях?
boxShadow е по-ново, наистина платформено независимо style свойство (добавено в React Native 0.74, налично при New Architecture), което използва същия синтаксис на низ като box-shadow в CSS и работи идентично както на iOS, така и на Android. Ако версията на React Native и архитектурата на приложението ви го поддържат, можете да използвате само това едно свойство вместо четирите отделни iOS свойства плюс elevation — проверете версията на RN и статуса на New Architecture, преди да разчитате на него в продукция.
Защо shadowRadius е равен на половината от стойността на замъгляването, която зададох?
Прегледът на живо използва CSS box-shadow, при който стойността на замъгляването се разпростира приблизително два пъти по-надалеч, отколкото shadowRadius на iOS за същото число. Генерираният код задава shadowRadius на половината от стойността на вашето замъгляване, така че сянката, която виждате в прегледа, да съвпада с това, което iOS реално рендерира — ако бяхте копирали стойността на замъгляването директно, сянката на iOS щеше да изглежда забележимо по-мека и по-голяма от прегледа.
Трябва ли ми Platform.select, за да приложа тези стилове?
Не — безопасно е да поставите iOS свойствата shadow* и elevation на Android заедно в един style обект, точно както прави генерираният код: всяка платформа просто игнорира свойствата на другата. Platform.select си струва да се добавя само ако искате наистина различен дизайн на сянката за всяка платформа, а не само за да избегнете предупреждения (такива няма).
Зададох elevation, но сянката на Android все още не се появява — защо?
Двете най-чести причини: изгледът няма backgroundColor (сянката elevation на Android се хвърля от непрозрачния фон на изгледа, така че прозрачен изглед не хвърля нищо), или родителски елемент има overflow: 'hidden' и изрязва сянката. Задайте на изгледа плътен цвят на фона и проверете настройките за overflow на елементите-предци, преди да приемете, че стойността на elevation е грешна.