React Native Shadow Generator

Skygger i React Native fungerer forskjellig per plattform: iOS leser shadowColor, shadowOffset, shadowOpacity og shadowRadius, mens Android ignorerer alt dette og i stedet trenger et eget elevation-tall. Juster skyggen visuelt her og kopier et style-objekt som dekker begge plattformer, pluss den nyere plattformsuavhengige boxShadow-strengen for apper på New Architecture.

Hva er dette verktøyet?

I React Native er skygger ikke plattformsuavhengige som standard. iOS bruker fire separate style-props (shadowColor, shadowOffset med width/height, shadowOpacity fra 0-1, og shadowRadius for uskarphet) som tilsvarer den samme underliggende CoreAnimation-skyggen som nettets box-shadow bruker. Androids native View-system støtter ikke vilkårlige skyggeformer i det hele tatt — det støtter bare elevation, et enkelt tall som gir en fast Material Design-skygge basert på hvor "høyt" viewet ser ut til å sveve.

Det betyr at en skygge som ser riktig ut på iOS med shadowRadius/shadowOpacity, ikke vises i det hele tatt på Android med mindre du også setter elevation, og de to vil aldri se pikselidentiske ut siden elevation sin skyggeform ikke kan tilpasses på samme måte som iOS sin. Fra og med React Native 0.74 med New Architecture aktivert er også en plattformsuavhengig boxShadow style-egenskap tilgjengelig, med samme syntaks som CSS.

Hvorfor bruke det?

Se en live visuell forhåndsvisning mens du justerer offset, uskarphet, opasitet og farge — i stedet for å gjette verdier og bygge appen på nytt for å sjekke.
Få iOS-skygge-props, Android-elevation og den nyere plattformsuavhengige boxShadow-strengen på én gang, slik at du slipper å slå opp tre forskjellige API-er.
Elevation er en egen kontroll (beregnes ikke automatisk fra uskarphet/opasitet) fordi Androids sammenheng mellom elevation og skyggens utseende ikke er en direkte oversettelse fra iOS sine skyggeegenskaper — den skal justeres visuelt for å matche, noe dette verktøyet lar deg gjøre side om side.
Gratis, umiddelbar og klar til å kopieres som ett samlet style-objekt.

Slik bruker du det

Juster offset X/Y, uskarphetsradius, opasitet og skyggefarge — forhåndsvisningsboksen oppdateres live.
Juster Android-elevation-tallet separat til det visuelt samsvarer med skyggestyrken du ønsker.
Klikk på "Copy" for å kopiere hele style-objektet, inkludert iOS-props, Android-elevation og boxShadow-strengen.
Lim objektet inn i komponentens StyleSheet — spre eller slå det sammen med eksisterende view-styles.

Eksempel

Inndata

Offset (0, 4), uskarphet 8, opasitet 0.25, svart, elevation 5

Resultat

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 settes til halvparten av uskarphetsverdien som vises i forhåndsvisningen, i tråd med hvordan CSS sin blur radius i praksis forholder seg til iOS sin shadowRadius.

Ofte stilte spørsmål

Hvorfor vises ikke skyggen min på Android?

Props-ene shadowColor/shadowOffset/shadowOpacity/shadowRadius gjelder bare for iOS — Androids native rendering ignorerer dem rett og slett. Du må også sette elevation-prop-en (et positivt tall) for at en skygge i det hele tatt skal vises på Android.

Kan jeg få Android-skyggen til å se identisk ut som iOS-skyggen?

Ikke helt — elevation gir Androids innebygde Material Design-skyggeform, som ikke kan konfigureres uavhengig for farge, offset-retning eller uskarphet på samme måte som iOS sin skygge. Du kan justere elevation-tallet for å få en visuelt lignende styrke, men pikselperfekt samsvar mellom plattformene er ikke mulig med de klassiske shadow/elevation-API-ene.

Hva er boxShadow-prop-en, og kan jeg bruke den i stedet?

boxShadow er en nyere, reelt plattformsuavhengig style-egenskap (lagt til i React Native 0.74, tilgjengelig på New Architecture) som bruker samme strengsyntaks som CSS box-shadow og fungerer identisk på både iOS og Android. Hvis appens React Native-versjon og arkitektur støtter det, kan du bruke bare denne ene egenskapen i stedet for de fire separate iOS-props-ene pluss elevation — sjekk RN-versjonen og New Architecture-statusen før du stoler på den i produksjon.

Hvorfor er shadowRadius halvparten av uskarphetsverdien jeg setter?

Den direkte forhåndsvisningen bruker CSS box-shadow, der uskarphetsverdien sprer seg omtrent dobbelt så langt som iOS sin shadowRadius gjør for samme tall. Den genererte koden setter shadowRadius til halvparten av uskarphetsverdien din, slik at skyggen du ser i forhåndsvisningen samsvarer med det iOS faktisk gjengir — hvis du kopierte uskarphetsverdien direkte over, ville iOS-skyggen se merkbart mykere og større ut enn forhåndsvisningen.

Trenger jeg Platform.select for å bruke disse stilene?

Nei — det er trygt å plassere iOS sine shadow*-props og Androids elevation sammen i ett style-objekt, akkurat slik den genererte koden gjør: hver plattform ignorerer rett og slett den andres props. Platform.select er bare verdt å legge til hvis du vil ha reelt forskjellig skyggedesign per plattform, ikke bare for å unngå advarsler (det finnes ingen).

Jeg har satt elevation, men Android-skyggen vises fortsatt ikke — hvorfor?

De to vanligste årsakene: viewet mangler backgroundColor (Androids elevation-skygge kastes fra viewets ugjennomsiktige bakgrunn, så et transparent view kaster ingen skygge), eller en forelder har overflow: 'hidden' og klipper bort skyggen. Gi viewet en solid bakgrunnsfarge og sjekk overflow-innstillinger hos forfedre før du antar at elevation-verdien er feil.