React Native Shadow Generator

Skygger i React Native fungerer forskelligt på de to platforme: iOS læser shadowColor, shadowOffset, shadowOpacity og shadowRadius, mens Android ignorerer alt dette og i stedet kræver et separat elevation-tal. Justér skyggen visuelt her og kopiér et style-objekt, der dækker begge platforme, samt den nyere tværplatforms boxShadow-streng til apps på New Architecture.

Hvad er dette værktøj?

I React Native er skygger ikke tværplatforms som standard. iOS bruger fire separate style-props (shadowColor, shadowOffset med width/height, shadowOpacity fra 0-1, og shadowRadius til sløring), som svarer til den samme underliggende CoreAnimation-skygge, som webbens box-shadow bruger. Androids native View-system understøtter slet ikke vilkårlige skyggeformer — det understøtter kun elevation, et enkelt tal, der producerer en fast Material Design-skygge baseret på, hvor "højt" viewet ser ud til at svæve.

Det betyder, at en skygge, der ser rigtig ud på iOS med shadowRadius/shadowOpacity, slet ikke vises på Android, medmindre du også sætter elevation, og de to vil aldrig se pixel-identiske ud, da elevation's skyggeform ikke kan tilpasses på samme måde som iOS'. Fra React Native 0.74 med New Architecture aktiveret er en tværplatforms boxShadow style-property også tilgængelig, med samme syntaks som CSS.

Hvorfor bruge det?

Se en live visuel preview, mens du justerer offset, sløring, opacity og farve — i stedet for at gætte værdier og genbygge din app for at tjekke.
Få iOS-skygge-props, Android-elevation og den nyere tværplatforms boxShadow-streng på én gang, så du slipper for at slå tre forskellige API'er op.
Elevation er en separat kontrol (beregnes ikke automatisk ud fra sløring/opacity), fordi Androids sammenhæng mellem elevation og skyggens udseende ikke er en direkte oversættelse fra iOS' skyggeegenskaber — den skal justeres visuelt til at matche, hvilket dette værktøj lader dig gøre side om side.
Gratis, øjeblikkelig og klar til at kopiere som ét samlet style-objekt.

Sådan bruger du det

Justér offset X/Y, sløringsradius, opacity og skyggefarve — preview-boksen opdateres live.
Justér separat Android-elevation-tallet, indtil det visuelt matcher den skyggestyrke, du ønsker.
Klik på "Copy" for at kopiere hele style-objektet, inklusive iOS-props, Android-elevation og boxShadow-strengen.
Indsæt objektet i din komponents StyleSheet — spread eller flet det med dine eksisterende view-styles.

Eksempel

Input

Offset (0, 4), sløring 8, opacity 0.25, sort, elevation 5

Output

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 sættes til halvdelen af sløringsværdien vist i preview, hvilket svarer til, hvordan CSS' blur radius i praksis forholder sig til iOS' shadowRadius.

Ofte stillede spørgsmål

Hvorfor vises min skygge ikke på Android?

shadowColor/shadowOffset/shadowOpacity/shadowRadius-props er kun til iOS — Androids native rendering ignorerer dem simpelthen. Du skal også sætte elevation-prop'en (et positivt tal), for at der overhovedet vises en skygge på Android.

Kan jeg få Android-skyggen til at se identisk ud med iOS-skyggen?

Ikke helt — elevation producerer Androids indbyggede Material Design-skyggeform, som ikke kan konfigureres uafhængigt med hensyn til farve, offset-retning eller sløring på samme måde som iOS' skygge. Du kan justere elevation-tallet for at opnå en visuelt lignende styrke, men pixel-perfekt match mellem platformene er ikke muligt med de klassiske shadow/elevation-API'er.

Hvad er boxShadow-prop'en, og kan jeg bruge den i stedet?

boxShadow er en nyere, reelt tværplatforms style-property (tilføjet i React Native 0.74, tilgængelig på New Architecture), der bruger samme streng-syntaks som CSS box-shadow og fungerer identisk på både iOS og Android. Hvis din apps React Native-version og arkitektur understøtter det, kan du bruge kun denne ene property i stedet for de fire separate iOS-props plus elevation — tjek din RN-version og New Architecture-status, før du regner med den i produktion.

Hvorfor er shadowRadius halvdelen af den sløringsværdi, jeg sætter?

Live-previewet bruger CSS box-shadow, hvor sløringsværdien spreder sig omtrent dobbelt så langt som iOS' shadowRadius for samme tal. Den genererede kode sætter shadowRadius til halvdelen af din sløringsværdi, så skyggen du ser i previewet, matcher det, iOS faktisk gengiver — hvis du kopierede sløringsværdien direkte over, ville iOS-skyggen se mærkbart blødere og større ud end previewet.

Skal jeg bruge Platform.select til at anvende disse styles?

Nej — det er trygt at sætte iOS' shadow*-props og Androids elevation sammen i ét style-objekt, præcis som den genererede kode gør: hver platform ignorerer simpelthen den anden platforms props. Platform.select er kun relevant, hvis du vil have reelt forskellige skyggedesigns pr. platform, ikke bare for at undgå advarsler (der er ingen).

Jeg har sat elevation, men Android-skyggen vises stadig ikke — hvorfor?

De to mest almindelige årsager: viewet har ingen backgroundColor (Androids elevation-skygge kastes fra viewets uigennemsigtige baggrund, så et transparent view kaster ingen skygge), eller en forælder har overflow: 'hidden' og klipper skyggen væk. Giv viewet en solid baggrundsfarve, og tjek overflow-indstillinger på forfædre, før du antager, at elevation-værdien er forkert.