React Native Shadow Generator

Skuggor i React Native fungerar olika beroende på plattform: iOS läser shadowColor, shadowOffset, shadowOpacity och shadowRadius, medan Android ignorerar allt detta och istället behöver ett separat elevation-tal. Justera skuggan visuellt här och kopiera ett style-objekt som täcker båda plattformarna, plus den nyare plattformsoberoende boxShadow-strängen för appar på New Architecture.

Vad är detta verktyg?

I React Native är skuggor inte plattformsoberoende som standard. iOS använder fyra separata style-props (shadowColor, shadowOffset med width/height, shadowOpacity från 0-1 och shadowRadius för oskärpa) som motsvarar samma underliggande CoreAnimation-skugga som webbens box-shadow använder. Androids inbyggda View-system stödjer inte godtyckliga skuggformer alls — det stödjer bara elevation, ett enda tal som ger en fast Material Design-skugga baserat på hur "högt" vyn ser ut att sväva.

Det betyder att en skugga som ser rätt ut på iOS med shadowRadius/shadowOpacity inte visas alls på Android om du inte också anger elevation, och de två kommer aldrig att se pixelidentiska ut eftersom elevations skuggform inte kan anpassas på samma sätt som iOS. Från och med React Native 0.74 med New Architecture aktiverat finns även en plattformsoberoende boxShadow style-egenskap, med samma syntax som CSS.

Varför använda det?

Se en live visuell förhandsvisning medan du justerar offset, oskärpa, opacitet och färg — i stället för att gissa värden och bygga om din app för att kontrollera.
Få iOS-skugg-props, Android-elevation och den nyare plattformsoberoende boxShadow-strängen på en gång, så du slipper slå upp tre olika API:er.
Elevation är en separat kontroll (beräknas inte automatiskt utifrån oskärpa/opacitet) eftersom Androids koppling mellan elevation och skuggans utseende inte är en direkt översättning från iOS skuggegenskaper — den ska justeras visuellt för att matcha, vilket det här verktyget låter dig göra sida vid sida.
Gratis, direkt och redo att kopieras som ett enda style-objekt.

Så använder du det

Justera offset X/Y, oskärperadie, opacitet och skuggfärg — förhandsvisningsrutan uppdateras live.
Justera separat Android-elevation-talet tills det visuellt matchar den skuggstyrka du vill ha.
Klicka på "Copy" för att kopiera hela style-objektet, inklusive iOS-props, Android-elevation och boxShadow-strängen.
Klistra in objektet i komponentens StyleSheet — sprid eller slå ihop det med dina befintliga view-styles.

Exempel

Inmatning

Offset (0, 4), oskärpa 8, opacitet 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 sätts till hälften av oskärpevärdet som visas i förhandsvisningen, i linje med hur CSS blur radius i praktiken förhåller sig till iOS shadowRadius.

Vanliga frågor

Varför visas inte min skugga på Android?

Props:en shadowColor/shadowOffset/shadowOpacity/shadowRadius gäller bara iOS — Androids inbyggda rendering ignorerar dem helt enkelt. Du måste också ange prop:en elevation (ett positivt tal) för att en skugga alls ska visas på Android.

Kan jag få Android-skuggan att se identisk ut med iOS-skuggan?

Inte exakt — elevation ger Androids inbyggda Material Design-skuggform, som inte kan konfigureras oberoende för färg, offset-riktning eller oskärpa på samma sätt som iOS skugga. Du kan justera elevation-talet för att få en visuellt liknande styrka, men pixelperfekt matchning mellan plattformarna är inte möjligt med de klassiska shadow/elevation-API:erna.

Vad är boxShadow-prop:en och kan jag använda den istället?

boxShadow är en nyare, genuint plattformsoberoende style-egenskap (tillagd i React Native 0.74, tillgänglig på New Architecture) som använder samma strängsyntax som CSS box-shadow och fungerar identiskt på både iOS och Android. Om din apps React Native-version och arkitektur stödjer det kan du använda enbart denna egenskap istället för de fyra separata iOS-props:arna plus elevation — kontrollera din RN-version och New Architecture-status innan du förlitar dig på den i produktion.

Varför är shadowRadius hälften av det oskärpevärde jag anger?

Den direkta förhandsvisningen använder CSS box-shadow, där oskärpevärdet sprider sig ungefär dubbelt så långt som iOS shadowRadius gör för samma tal. Den genererade koden sätter shadowRadius till hälften av ditt oskärpevärde så att skuggan du ser i förhandsvisningen matchar det iOS faktiskt renderar — om du kopierade oskärpevärdet rakt av skulle iOS-skuggan se märkbart mjukare och större ut än förhandsvisningen.

Behöver jag Platform.select för att applicera dessa styles?

Nej — det är säkert att lägga iOS shadow*-props och Androids elevation tillsammans i ett style-objekt, precis som den genererade koden gör: varje plattform ignorerar helt enkelt den andras props. Platform.select är bara värt att lägga till om du vill ha genuint olika skuggdesigner per plattform, inte bara för att undvika varningar (det finns inga).

Jag har angett elevation men Android-skuggan visas fortfarande inte — varför?

De två vanligaste orsakerna: vyn har ingen backgroundColor (Androids elevation-skugga kastas från vyns ogenomskinliga bakgrund, så en transparent vy kastar ingen skugga alls), eller en förälder har overflow: 'hidden' och klipper bort skuggan. Ge vyn en solid bakgrundsfärg och kontrollera overflow-inställningar hos förfäder innan du antar att elevation-värdet är fel.