React Native Shadow Generator — iOS + Android код, приказ уживо

Сенка у React Native-у функционише другачије на свакој платформи: iOS чита shadowColor, shadowOffset, shadowOpacity и shadowRadius, док их Android потпуно игнорише и уместо тога захтева посебан број elevation. Подесите сенку овде визуелно и копирајте style објекат који покрива обе платформе, плус новији, међуплатформски boxShadow стринг за апликације на New Architecture.

Šta je ovaj alat?

У React Native-у сенке по подразумеваним подешавањима нису међуплатформске. iOS користи четири одвојена style својства (shadowColor, shadowOffset са width/height, shadowOpacity од 0 до 1 и shadowRadius за замућење), која одговарају истој CoreAnimation сенци коју користи box-shadow на вебу. Андроидов систем View-а уопште не подржава произвољне облике сенке — подржава само elevation, један број који производи фиксну Material Design сенку у зависности од тога колико „високо" изглед изгледа да лебди.

То значи да сенка која изгледа исправно на iOS-у помоћу shadowRadius/shadowOpacity уопште неће бити приказана на Андроиду ако не подесите и elevation, а њих две никада неће изгледати идентично на нивоу пиксела, јер облик сенке elevation није прилагодљив на начин на који је то случај код iOS-а. Од React Native 0.74, уз омогућену New Architecture, доступно је и међуплатформско style својство boxShadow, које користи исту синтаксу као CSS.

Zašto ga koristiti?

Погледајте приказ уживо док подешавате померај, замућење, провидност и боју — уместо да нагађате вредности и изнова правите апликацију да бисте проверили.
Добијте одједном iOS својства сенке, Android elevation и новији међуплатформски boxShadow стринг, тако да не морате да тражите три различита API-ја.
Elevation је посебна контрола (не израчунава се аутоматски из замућења/провидности) јер мапирање Андроидовог elevation у изглед сенке није директан превод iOS својстава сенке — потребно је да га визуелно подесите како би одговарало, а овај алат вам то омогућава да радите једно поред другог.
Бесплатно, тренутно и спремно за копирање као јединствен style објекат.

Kako se koristi

Подесите померај X/Y, радијус замућења, провидност и боју сенке — оквир за преглед се ажурира уживо.
Одвојено подесите Андроидов број elevation док визуелно не одговори намераваној јачини сенке.
Кликните на „Copy" да бисте копирали читав style објекат, укључујући iOS својства, Android elevation и boxShadow стринг.
Налепите објекат у StyleSheet своје компоненте — распоредите га или спојите са постојећим стиловима view-а.

Primer

Unos

Померај (0, 4), замућење 8, провидност 0.25, црна, elevation 5

Rezultat

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 радијус замућења у пракси односи на iOS shadowRadius.

Često postavljana pitanja

Зашто се моја сенка не приказује на Андроиду?

Својства shadowColor/shadowOffset/shadowOpacity/shadowRadius су само за iOS — Андроидово нативно рендеровање их једноставно игнорише. Такође морате да подесите својство elevation (позитиван број) да би се сенка уопште појавила на Андроиду.

Могу ли да направим да Android сенка изгледа идентично као iOS сенка?

Не баш — elevation производи Андроидов уграђени облик Material Design сенке, који се не може независно подешавати по боји, правцу помераја или замућењу онако како је то случај са iOS сенком. Можете подесити број elevation да бисте добили визуелно сличну јачину, али савршено подударање на нивоу пиксела између платформи није могуће са класичним shadow/elevation API-јима.

Шта је својство boxShadow и могу ли да га користим уместо тога?

boxShadow је новије, заиста међуплатформско style својство (додато у React Native 0.74, доступно на New Architecture), које користи исту синтаксу стринга као CSS box-shadow и ради идентично и на iOS-у и на Андроиду. Ако верзија React Native-а и архитектура ваше апликације то подржавају, можете користити само ово једно својство уместо четири одвојена iOS својства плус elevation — проверите верзију RN-а и статус New Architecture пре него што се на то ослоните у продукцији.

Зашто је shadowRadius половина вредности замућења коју сам подесио?

Приказ уживо користи CSS box-shadow, где се вредност замућења шири отприлике двоструко даље него iOS shadowRadius за исти број. Генерисани код подешава shadowRadius на половину вредности вашег замућења како би сенка коју видите у прегледу одговарала ономе што iOS заправо рендерује — да сте директно пренели вредност замућења, iOS сенка би изгледала приметно мекше и веће него у прегледу.

Да ли ми је потребан Platform.select да бих применио ове стилове?

Не — безбедно је ставити iOS shadow* својства и Android elevation заједно у један style објекат, баш онако како то ради генерисани код: свака платформа једноставно игнорише својства друге. Platform.select вреди додати само ако желите заиста различит дизајн сенке по платформи, а не само да бисте избегли упозорења (њих нема).

Подесио сам elevation, али се Android сенка и даље не појављује — зашто?

Два најчешћа узрока: view нема backgroundColor (Андроидова elevation сенка се баца са непрозирне позадине view-а, па провидан view не баца ништа), или родитељ има overflow: 'hidden' и одсеца сенку. Дајте view-у пуну боју позадине и проверите подешавања overflow-а код предака пре него што претпоставите да је вредност elevation погрешна.