React Native Shadow Generator

React Native'i vari toimib platvormiti erinevalt: iOS loeb väärtusi shadowColor, shadowOffset, shadowOpacity ja shadowRadius, samas kui Android ignoreerib kõiki neid ning vajab hoopis eraldi elevation-arvu. Kohanda varju siin visuaalselt ja kopeeri style-objekt, mis katab mõlemad platvormid, ning lisaks uuem platvormiülene boxShadow-string New Architecture'il töötavatele rakendustele.

Mis see tööriist on?

React Native'is ei ole varjud vaikimisi platvormiülesed. iOS kasutab nelja eraldi style-propsi (shadowColor, shadowOffset koos width/height väärtustega, shadowOpacity vahemikus 0-1 ja shadowRadius hägususe jaoks), mis vastavad samale aluseks olevale CoreAnimation-varjule, mida veebi box-shadow kasutab. Androidi natiivne View-süsteem ei toeta üldse suvalisi varjukujusid — see toetab ainult elevation'i, ühte arvu, mis loob fikseeritud Material Design'i varju vastavalt sellele, kui "kõrgel" element näib hõljuvat.

See tähendab, et vari, mis näeb iOS-il shadowRadius/shadowOpacity abil õige välja, ei näita Androidil üldse midagi, kui sa ei sea ka elevation'i, ning need kaks ei näe kunagi piksel-täpselt ühesugused välja, sest elevation'i varjukuju ei ole kohandatav samamoodi nagu iOS-i oma. Alates React Native versioonist 0.74 koos New Architecture'iga on saadaval ka platvormiülene boxShadow style-omadus, mis kasutab sama süntaksit nagu CSS.

Miks seda kasutada?

Näe reaalajas visuaalset eelvaadet, kui kohandad nihet, hägusust, läbipaistmatust ja värvi — selle asemel, et väärtusi arvata ja rakendust kontrollimiseks uuesti üles ehitada.
Saa korraga iOS-i varju-propsid, Androidi elevation ja uuem platvormiülene boxShadow-string, nii et sul pole vaja otsida kolme erinevat API-t.
Elevation on eraldi juhtelement (ei arvutata automaatselt hägususe/läbipaistmatuse põhjal), sest Androidi seos elevation'i ja varju välimuse vahel ei ole otsetõlge iOS-i varjuomadustest — see tuleb visuaalselt sobivaks häälestada, mida see tööriist lubab sul teha kõrvuti.
Tasuta, kohene ja kopeerimisvalmis ühe style-objektina.

Kuidas kasutada

Kohanda nihet X/Y, hägususe raadiust, läbipaistmatust ja varju värvi — eelvaate kast uueneb reaalajas.
Häälesta eraldi Androidi elevation-arvu, kuni see visuaalselt vastab soovitud varju tugevusele.
Klõpsa "Copy", et kopeerida kogu style-objekt, sealhulgas iOS-i propsid, Androidi elevation ja boxShadow-string.
Kleebi objekt oma komponendi StyleSheeti — laienda või ühenda see olemasolevate view-stiilidega.

Näide

Sisend

Nihe (0, 4), hägusus 8, läbipaistmatus 0.25, must, elevation 5

Tulemus

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 seatakse pooleks eelvaates näidatud hägususe väärtusest, vastavalt sellele, kuidas CSS-i blur radius praktikas seostub iOS-i shadowRadius'ega.

Korduma kippuvad küsimused

Miks mu vari Androidil ei ilmu?

Propsid shadowColor/shadowOffset/shadowOpacity/shadowRadius kehtivad ainult iOS-il — Androidi natiivne renderdamine lihtsalt ignoreerib neid. Selleks, et vari Androidil üldse ilmuks, pead lisaks seadma elevation-prop'i (positiivse arvu).

Kas ma saan muuta Androidi varju iOS-i omaga identseks?

Mitte täpselt — elevation loob Androidi sisseehitatud Material Design'i varjukuju, mida ei saa iseseisvalt seadistada värvi, nihke suuna ega hägususe osas samamoodi nagu iOS-i varju. Sa saad elevation-arvu häälestada visuaalselt sarnase tugevuse saavutamiseks, kuid piksel-täpne vastavus platvormide vahel ei ole klassikaliste shadow/elevation-API-dega võimalik.

Mis on boxShadow-prop ja kas ma saan seda selle asemel kasutada?

boxShadow on uuem, tõeliselt platvormiülene style-omadus (lisatud React Native 0.74-s, saadaval New Architecture'il), mis kasutab sama string-süntaksit nagu CSS-i box-shadow ja töötab identselt nii iOS-il kui Androidil. Kui su rakenduse React Native versioon ja arhitektuur seda toetavad, saad kasutada ainult seda üht omadust nelja eraldi iOS-i propsi ja elevation'i asemel — kontrolli oma RN-versiooni ja New Architecture'i olekut enne sellele tootmises tuginemist.

Miks on shadowRadius pool minu määratud hägususe väärtusest?

Reaalajas eelvaade kasutab CSS-i box-shadow'd, kus hägususe väärtus levib sama arvu puhul umbes kaks korda kaugemale kui iOS-i shadowRadius. Genereeritud kood seab shadowRadius'e pooleks su hägususe väärtusest, et eelvaates nähtav vari vastaks sellele, mida iOS tegelikult renderdab — kui kopeeriksid hägususe väärtuse otse üle, näeks iOS-i vari eelvaatest märgatavalt pehmem ja suurem.

Kas ma vajan Platform.select'i nende stiilide rakendamiseks?

Ei — täiesti ohutu on panna iOS-i shadow*-propsid ja Androidi elevation koos ühte style-objekti, täpselt nii nagu genereeritud kood teeb: iga platvorm lihtsalt ignoreerib teise propse. Platform.select on mõistlik lisada vaid siis, kui soovid platvormiti tõeliselt erinevat varjukujundust, mitte lihtsalt hoiatuste vältimiseks (neid pole).

Seadsin elevation'i, aga Androidi vari ikka ei ilmu — miks?

Kaks kõige levinumat põhjust: elemendil puudub backgroundColor (Androidi elevation-vari heidetakse elemendi läbipaistmatust taustast, seega läbipaistev element ei heida varju), või mõnel vanemal on overflow: 'hidden' ja see lõikab varju ära. Anna elemendile ühtlane taustavärv ja kontrolli eellaste overflow-seadeid, enne kui eeldad, et elevation'i väärtus on vale.