React Native ēnu ģenerators

React Native ēna katrā platformā darbojas atšķirīgi: iOS nolasa shadowColor, shadowOffset, shadowOpacity un shadowRadius, savukārt Android tos visus ignorē un tā vietā pieprasa atsevišķu elevation skaitli. Šeit vizuāli pielāgojiet ēnu un kopējiet stila objektu, kas aptver abas platformas, kā arī jaunāko starpplatformu boxShadow virkni lietotnēm ar New Architecture.

Kas ir šis rīks?

React Native ēnas pēc noklusējuma nav starpplatformu. iOS izmanto četras atsevišķas stila īpašības (shadowColor, shadowOffset ar width/height, shadowOpacity no 0 līdz 1 un shadowRadius izplūdumam), kas atbilst tai pašai CoreAnimation ēnai, ko izmanto tīmekļa box-shadow. Android natīvā View sistēma vispār neatbalsta patvaļīgas ēnu formas — tā atbalsta tikai elevation, vienu skaitli, kas rada fiksētu Material Design nomestu ēnu atkarībā no tā, cik "augstu" skats šķietami peld.

Tas nozīmē, ka ēna, kas izskatās pareizi iOS, izmantojot shadowRadius/shadowOpacity, Android vispār neparādīsies, ja vien nenoteiksiet arī elevation, un abas nekad neizskatīsies pikseļa precizitātē identiskas, jo elevation ēnas forma nav pielāgojama tāpat kā iOS. Sākot ar React Native 0.74 ar iespējotu New Architecture, ir pieejama arī starpplatformu boxShadow stila īpašība, kas izmanto tādu pašu sintaksi kā CSS.

Kāpēc to izmantot?

Skatiet tiešraides vizuālo priekšskatījumu, pielāgojot nobīdi, izplūdumu, necaurredzamību un krāsu — nevis minot vērtības un no jauna veidojot lietotni, lai pārbaudītu.
Iegūstiet iOS ēnas īpašības, Android elevation un jaunāko starpplatformu boxShadow virkni vienlaikus, lai nebūtu jāmeklē trīs dažādi API.
Elevation ir atsevišķa vadīkla (netiek automātiski aprēķināta no izplūduma/necaurredzamības), jo Android elevation attiecība pret ēnas izskatu nav tieša iOS ēnas īpašību pārtulkojums — tā jāpielāgo vizuāli, ko šis rīks ļauj darīt blakus.
Bezmaksas, tūlītējs un gatavs kopēšanai kā viens stila objekts.

Kā to lietot

Pielāgojiet nobīdi X/Y, izplūduma rādiusu, necaurredzamību un ēnas krāsu — priekšskatījuma lodziņš atjaunojas tiešraidē.
Atsevišķi pielāgojiet Android elevation skaitli, līdz tas vizuāli atbilst iecerētajai ēnas intensitātei.
Noklikšķiniet "Kopēt", lai kopētu pilnu stila objektu, tostarp iOS īpašības, Android elevation un boxShadow virkni.
Ielīmējiet objektu sava komponenta StyleSheet — izklājiet (spread) vai apvienojiet to ar esošajiem skata stiliem.

Piemērs

Ievade

Nobīde (0, 4), izplūdums 8, necaurredzamība 0,25, melns, elevation 5

Izvade

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 tiek iestatīts uz pusi no priekšskatījumā redzamās izplūduma vērtības, atbilstoši tam, kā CSS izplūduma rādiuss praksē saistās ar iOS shadowRadius.

Biežāk uzdotie jautājumi

Kāpēc mana ēna neparādās Android?

Īpašības shadowColor/shadowOffset/shadowOpacity/shadowRadius ir paredzētas tikai iOS — Android natīvā renderēšana tās vienkārši ignorē. Lai ēna Android vispār parādītos, jums jāiestata arī elevation īpašība (pozitīvs skaitlis).

Vai es varu panākt, lai Android ēna izskatītos identiska iOS ēnai?

Ne gluži — elevation rada Android iebūvēto Material Design ēnas formu, kuru nevar neatkarīgi konfigurēt attiecībā uz krāsu, nobīdes virzienu vai izplūdumu tāpat kā iOS ēnu. Jūs varat pielāgot elevation skaitli, lai iegūtu vizuāli līdzīgu intensitāti, taču pikseļa precizitātē pilnīga atbilstība starp platformām nav iespējama ar klasiskajiem shadow/elevation API.

Kas ir boxShadow īpašība un vai es varu izmantot to tā vietā?

boxShadow ir jaunāka, patiesi starpplatformu stila īpašība (pievienota React Native 0.74, pieejama ar New Architecture), kas izmanto tādu pašu virknes sintaksi kā CSS box-shadow un darbojas identiski gan iOS, gan Android. Ja jūsu lietotnes React Native versija un arhitektūra to atbalsta, varat izmantot tikai šo vienu īpašību četru atsevišķo iOS īpašību un elevation vietā — pirms paļaušanās uz to produkcijā pārbaudiet savu RN versiju un New Architecture statusu.

Kāpēc shadowRadius ir puse no manis iestatītās izplūduma vērtības?

Tiešraides priekšskatījums izmanto CSS box-shadow, kur izplūduma vērtība izplatās aptuveni divreiz tālāk nekā iOS shadowRadius pie tā paša skaitļa. Ģenerētais kods iestata shadowRadius uz pusi no jūsu izplūduma vērtības, lai priekšskatījumā redzamā ēna atbilstu tam, ko iOS faktiski atveido — ja izplūduma vērtību pārkopētu tieši, iOS ēna izskatītos manāmi mīkstāka un lielāka nekā priekšskatījumā.

Vai man ir vajadzīgs Platform.select, lai piemērotu šos stilus?

Nē — ir droši ievietot iOS shadow* īpašības un Android elevation kopā vienā stila objektā, tieši tā, kā to dara ģenerētais kods: katra platforma vienkārši ignorē otras īpašības. Platform.select ir vērts pievienot tikai tad, ja vēlaties patiesi atšķirīgu ēnas dizainu katrai platformai, nevis tikai lai izvairītos no brīdinājumiem (tādu nav).

Es iestatīju elevation, bet Android ēna joprojām neparādās — kāpēc?

Divi visbiežākie iemesli: skatam nav backgroundColor (Android elevation ēna tiek mesta no skata necaurredzamā fona, tāpēc caurspīdīgs skats nemet nekādu ēnu), vai vecākelementam ir overflow: 'hidden', kas apgriež ēnu. Pirms pieņemat, ka elevation vērtība ir nepareiza, piešķiriet skatam viendabīgu fona krāsu un pārbaudiet priekšteču overflow iestatījumus.