Generator sjena za React Native

Sjena u React Nativeu funkcionira drugačije na svakoj platformi: iOS čita shadowColor, shadowOffset, shadowOpacity i shadowRadius, dok ih Android potpuno ignorira i umjesto toga zahtijeva zaseban broj elevation. Ovdje vizualno prilagodite sjenu i kopirajte objekt stila koji pokriva obje platforme, plus noviji, međuplatformski niz boxShadow za aplikacije na New Architecture.

Što je ovaj alat?

U React Nativeu sjene po zadanom nisu međuplatformske. iOS koristi četiri zasebna svojstva stila (shadowColor, shadowOffset s width/height, shadowOpacity od 0 do 1 i shadowRadius za zamućenje) koja se preslikavaju na istu osnovnu CoreAnimation sjenu koju koristi web-ov box-shadow. Androidov nativni View sustav uopće ne podržava proizvoljne oblike sjena — podržava samo elevation, jedan broj koji stvara fiksnu Material Design sjenu ovisno o tome koliko "visoko" prikaz izgleda kao da lebdi.

To znači da sjena koja izgleda dobro na iOS-u pomoću shadowRadius/shadowOpacity neće se uopće prikazati na Androidu ako ne postavite i elevation, a njih dvije nikada neće izgledati piksel po piksel identično jer se oblik elevation sjene ne može prilagoditi kao na iOS-u. Od React Nativea 0.74 s omogućenom New Architecture, dostupno je i međuplatformsko svojstvo stila boxShadow, koje koristi istu sintaksu kao CSS.

Zašto ga koristiti?

Pogledajte prikaz uživo dok prilagođavate pomak, zamućenje, prozirnost i boju — umjesto pogađanja vrijednosti i ponovne izgradnje aplikacije radi provjere.
Odjednom dobijete iOS svojstva sjene, Android elevation i noviji međuplatformski niz boxShadow, tako da ne morate tražiti tri različita API-ja.
Elevation je zasebna kontrola (ne izračunava se automatski iz zamućenja/prozirnosti) jer Androidovo preslikavanje elevation u izgled sjene nije izravan prijevod iOS-ovih svojstava sjene — treba ga prilagoditi da vizualno odgovara, što ovaj alat omogućuje usporedno.
Besplatno, trenutačno i spremno za kopiranje kao jedan objekt stila.

Kako ga koristiti

Prilagodite pomak X/Y, radijus zamućenja, prozirnost i boju sjene — okvir pregleda ažurira se uživo.
Zasebno prilagodite broj Android elevation dok vizualno ne odgovara željenoj jačini sjene.
Kliknite "Kopiraj" da biste kopirali cijeli objekt stila, uključujući iOS svojstva, Android elevation i niz boxShadow.
Zalijepite objekt u StyleSheet vaše komponente — proširite (spread) ili spojite s postojećim stilovima prikaza.

Primjer

Ulaz

Pomak (0, 4), zamućenje 8, prozirnost 0,25, crna, elevation 5

Izlaz

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 je postavljen na polovicu vrijednosti zamućenja prikazane u pregledu, u skladu s tim kako se CSS radijus zamućenja u praksi odnosi na iOS-ov shadowRadius.

Često postavljana pitanja

Zašto se moja sjena ne prikazuje na Androidu?

Svojstva shadowColor/shadowOffset/shadowOpacity/shadowRadius namijenjena su samo za iOS — Androidovo nativno iscrtavanje ih jednostavno ignorira. Morate postaviti i svojstvo elevation (pozitivan broj) da bi se sjena uopće prikazala na Androidu.

Mogu li Android sjenu učiniti identičnom onoj na iOS-u?

Ne baš — elevation stvara Androidov ugrađeni oblik Material Design sjene, koji se ne može neovisno konfigurirati po boji, smjeru pomaka ili zamućenju kao iOS-ova sjena. Možete prilagoditi broj elevation kako biste dobili vizualno sličnu jačinu, ali savršeno podudaranje piksel po piksel između platformi nije moguće s klasičnim shadow/elevation API-jima.

Što je svojstvo boxShadow i mogu li ga koristiti umjesto toga?

boxShadow je novije, istinski međuplatformsko svojstvo stila (dodano u React Native 0.74, dostupno na New Architecture) koje koristi istu sintaksu niza kao CSS box-shadow i radi identično na iOS-u i Androidu. Ako verzija i arhitektura React Nativea vaše aplikacije to podržavaju, možete koristiti samo ovo jedno svojstvo umjesto četiri zasebna iOS svojstva plus elevation — provjerite svoju RN verziju i status New Architecture prije nego se na to oslonite u produkciji.

Zašto je shadowRadius polovica vrijednosti zamućenja koju sam postavio?

Prikaz uživo koristi CSS box-shadow, gdje se vrijednost zamućenja širi otprilike dvostruko dalje nego iOS-ov shadowRadius za isti broj. Generirani kod postavlja shadowRadius na polovicu vaše vrijednosti zamućenja kako bi sjena koju vidite u pregledu odgovarala onoj koju iOS zapravo iscrtava — kad biste izravno prekopirali vrijednost zamućenja, iOS sjena izgledala bi znatno mekše i veće nego u pregledu.

Trebam li Platform.select za primjenu ovih stilova?

Ne — sigurno je staviti iOS-ova shadow* svojstva i Androidov elevation zajedno u jedan objekt stila, upravo onako kako to radi generirani kod: svaka platforma jednostavno ignorira svojstva druge. Platform.select vrijedi dodati samo ako želite istinski različit dizajn sjene po platformi, a ne samo da biste izbjegli upozorenja (nema ih).

Postavio sam elevation, ali Android sjena i dalje se ne prikazuje — zašto?

Dva najčešća uzroka: prikaz nema backgroundColor (Androidova elevation sjena baca se s neprozirne pozadine prikaza, pa prozirni prikaz ne baca nikakvu sjenu), ili nadređeni element ima overflow: 'hidden' i odsijeca sjenu. Dajte prikazu punu boju pozadine i provjerite postavke overflow nadređenih elemenata prije nego pretpostavite da je vrijednost elevation pogrešna.