Generátor tieňov pre React Native

Tieň v React Native funguje na každej platforme inak: iOS číta shadowColor, shadowOffset, shadowOpacity a shadowRadius, zatiaľ čo Android tieto vlastnosti úplne ignoruje a namiesto toho potrebuje samostatné číslo elevation. Tieň si tu môžete vizuálne doladiť a skopírovať objekt štýlu, ktorý pokrýva obe platformy, plus novší multiplatformový reťazec boxShadow pre aplikácie na New Architecture.

Čo je tento nástroj?

V React Native nie sú tiene predvolene multiplatformové. iOS používa štyri samostatné vlastnosti štýlu (shadowColor, shadowOffset s width/height, shadowOpacity od 0 do 1 a shadowRadius pre rozostrenie), ktoré sa mapujú na rovnaký podkladový tieň CoreAnimation, aký na webe využíva box-shadow. Natívny systém View v Androide vôbec nepodporuje ľubovoľné tvary tieňov — podporuje iba elevation, jedno číslo, ktoré vytvára pevne daný tieň v štýle Material Design podľa toho, ako vysoko sa prvok javí „vznášať“.

To znamená, že tieň, ktorý na iOS vyzerá správne vďaka shadowRadius/shadowOpacity, sa na Androide vôbec nezobrazí, pokiaľ zároveň nenastavíte elevation, a obe platformy nikdy nebudú vyzerať pixelovo identicky, pretože tvar tieňa pri elevation nie je možné prispôsobiť tak ako pri iOS. Od React Native 0.74 so zapnutou New Architecture je navyše k dispozícii multiplatformová vlastnosť štýlu boxShadow, ktorá používa rovnakú syntax ako CSS.

Prečo ho používať?

Sledujte živý vizuálny náhľad pri úprave posunu, rozostrenia, priehľadnosti a farby — namiesto hádania hodnôt a opätovného zostavovania aplikácie kvôli overeniu.
Získajte vlastnosti tieňa pre iOS, elevation pre Android a novší multiplatformový reťazec boxShadow naraz, takže nemusíte hľadať v troch rôznych API.
Elevation je samostatný ovládací prvok (nepočíta sa automaticky z rozostrenia/priehľadnosti), pretože mapovanie elevation na vzhľad tieňa v Androide nie je priamym prekladom z vlastností tieňa iOS — je potrebné ho vizuálne doladiť, čo tento nástroj umožňuje robiť vedľa seba.
Zadarmo, okamžite a pripravené na kopírovanie ako jeden objekt štýlu.

Ako sa používa

Upravte posun X/Y, polomer rozostrenia, priehľadnosť a farbu tieňa — náhľadové okno sa aktualizuje živo.
Samostatne doladte číslo elevation pre Android, kým vizuálne nebude zodpovedať zamýšľanej sile tieňa.
Kliknite na „Kopírovať“ a skopírujte celý objekt štýlu vrátane vlastností pre iOS, elevation pre Android a reťazca boxShadow.
Vložte objekt do StyleSheet vašej komponenty — spojte ho (spread) alebo zlúčte s existujúcimi štýlmi view.

Príklad

Vstup

Posun (0, 4), rozostrenie 8, priehľadnosť 0,25, čierna, elevation 5

Výstup

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 nastavený na polovicu hodnoty rozostrenia zobrazenej v náhľade, čo zodpovedá tomu, ako sa polomer rozostrenia v CSS v praxi vzťahuje k shadowRadius v iOS.

Časté otázky

Prečo sa mi tieň nezobrazuje na Androide?

Vlastnosti shadowColor/shadowOffset/shadowOpacity/shadowRadius sú určené iba pre iOS — natívne vykresľovanie Androidu ich jednoducho ignoruje. Aby sa tieň na Androide vôbec zobrazil, musíte nastaviť aj vlastnosť elevation (kladné číslo).

Môžem docieliť, aby tieň na Androide vyzeral identicky ako na iOS?

Nie úplne — elevation vytvára vstavaný tvar tieňa Material Design v Androide, ktorý nie je možné samostatne nastaviť čo do farby, smeru posunu alebo rozostrenia tak, ako tieň na iOS. Číslo elevation môžete doladiť tak, aby sila vyzerala vizuálne podobne, ale pixelová zhoda medzi platformami nie je pri klasických API shadow/elevation možná.

Čo je vlastnosť boxShadow a môžem ju použiť namiesto toho?

boxShadow je novšia, skutočne multiplatformová vlastnosť štýlu (pridaná v React Native 0.74, dostupná na New Architecture), ktorá používa rovnakú reťazcovú syntax ako CSS box-shadow a funguje rovnako na iOS aj Androide. Ak to verzia React Native a architektúra vašej aplikácie podporujú, môžete použiť iba túto jednu vlastnosť namiesto štyroch samostatných vlastností pre iOS plus elevation — pred nasadením do produkcie si overte verziu RN a stav New Architecture.

Prečo je shadowRadius polovičný oproti hodnote rozostrenia, ktorú som nastavil?

Živý náhľad používa CSS box-shadow, kde sa hodnota rozostrenia šíri približne dvakrát ďalej než zodpovedajúca hodnota shadowRadius na iOS. Vygenerovaný kód nastaví shadowRadius na polovicu hodnoty rozostrenia, aby tieň, ktorý vidíte v náhľade, zodpovedal tomu, čo iOS skutočne vykreslí — keby ste hodnotu rozostrenia skopírovali priamo, tieň na iOS by vyzeral citeľne mäkší a väčší než v náhľade.

Potrebujem Platform.select na použitie týchto štýlov?

Nie — je bezpečné umiestniť vlastnosti shadow* pre iOS a elevation pre Android do jedného objektu štýlu, presne tak, ako to robí vygenerovaný kód: každá platforma jednoducho ignoruje vlastnosti tej druhej. Platform.select má zmysel pridať iba vtedy, ak chcete pre jednotlivé platformy skutočne odlišný návrh tieňa, nie kvôli vyhnutiu sa varovaniam (žiadne nie sú).

Nastavil som elevation, ale tieň na Androide sa stále nezobrazuje — prečo?

Dve najčastejšie príčiny: view nemá nastavenú backgroundColor (tieň z elevation v Androide vychádza z nepriehľadného pozadia view, takže priehľadný view nevrhá žiadny tieň), alebo má rodič nastavené overflow: 'hidden' a tieň orezáva. Skôr než usúdite, že hodnota elevation je nesprávna, nastavte view plnú farbu pozadia a skontrolujte nastavenia overflow u predkov.