React Native Shadow Generator

Senca v React Nativeu deluje na vsaki platformi drugače: iOS bere shadowColor, shadowOffset, shadowOpacity in shadowRadius, medtem ko Android vse to prezre in namesto tega potrebuje ločeno številko elevation. Senco tukaj prilagodi vizualno in kopiraj style-objekt, ki pokriva obe platformi, ter dodaten novejši medplatformni niz boxShadow za aplikacije na New Architecture.

Kaj je to orodje?

V React Nativeu sence privzeto niso medplatformne. iOS uporablja štiri ločene style props (shadowColor, shadowOffset s width/height, shadowOpacity od 0 do 1 in shadowRadius za zameglitev), ki ustrezajo isti osnovni senci CoreAnimation, kot jo uporablja spletni box-shadow. Androidov nativni sistem View sploh ne podpira poljubnih oblik sence — podpira le elevation, eno samo številko, ki ustvari fiksno senco Material Design glede na to, kako "visoko" se element vizualno dviguje.

To pomeni, da senca, ki na iOS izgleda prav s shadowRadius/shadowOpacity, na Androidu ne bo prikazana sploh, če ne nastaviš tudi elevation, in nikoli ne bosta videti popolnoma enaki, saj oblike sence pri elevation ni mogoče prilagajati tako kot pri iOS. Od React Native 0.74 z omogočeno New Architecture je na voljo tudi medplatformna lastnost sloga boxShadow, ki uporablja isto skladnjo kot CSS.

Zakaj ga uporabiti?

Med prilagajanjem odmika, zameglitve, prosojnosti in barve poglej predogled v živo — namesto ugibanja vrednosti in ponovnega gradnje aplikacije za preverjanje.
Naenkrat pridobi props za senco na iOS, elevation za Android in novejši medplatformni niz boxShadow, tako da ti ni treba iskati treh različnih API-jev.
Elevation je ločen nadzor (ni samodejno izračunan iz zameglitve/prosojnosti), ker Androidova povezava med elevation in videzom sence ni neposreden prevod iz lastnosti sence na iOS — namenjena je vizualnemu prilagajanju, kar ti to orodje omogoča narediti vzporedno.
Brezplačno, takojšnje in pripravljeno za kopiranje kot en sam style-objekt.

Kako ga uporabljati

Prilagodi odmik X/Y, polmer zameglitve, prosojnost in barvo sence — polje s predogledom se posodablja v živo.
Ločeno prilagodi številko elevation za Android, dokler vizualno ne ustreza želeni moči sence.
Klikni "Copy", da kopiraš celoten style-objekt, vključno s props za iOS, elevation za Android in nizom boxShadow.
Prilepi objekt v StyleSheet svoje komponente — ga razširi ali združi z obstoječimi slogi view.

Primer

Vnos

Odmik (0, 4), zameglitev 8, prosojnost 0.25, črna, elevation 5

Rezultat

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 nastavljen na polovico vrednosti zameglitve, prikazane v predogledu, kar ustreza temu, kako se CSS blur radius v praksi navezuje na shadowRadius pri iOS.

Pogosta vprašanja

Zakaj se moja senca ne prikaže na Androidu?

Props shadowColor/shadowOffset/shadowOpacity/shadowRadius veljajo samo za iOS — Androidovo nativno izrisovanje jih preprosto prezre. Da se senca na Androidu sploh prikaže, moraš nastaviti tudi prop elevation (pozitivno število).

Ali lahko naredim, da je senca na Androidu videti enaka kot na iOS?

Ne povsem — elevation ustvari Androidovo vgrajeno obliko sence Material Design, ki je ni mogoče neodvisno prilagajati glede barve, smeri odmika ali zameglitve, kot je to mogoče pri senci na iOS. Številko elevation lahko prilagodiš, da dobiš vizualno podobno moč, vendar pikselsko popolno ujemanje med platformama s klasičnima API-jema shadow/elevation ni mogoče.

Kaj je prop boxShadow in ali ga lahko uporabim namesto tega?

boxShadow je novejša, resnično medplatformna lastnost sloga (dodana v React Native 0.74, na voljo na New Architecture), ki uporablja isto skladnjo niza kot CSS box-shadow in deluje enako na iOS in Androidu. Če različica React Native in arhitektura tvoje aplikacije to podpirata, lahko uporabiš samo to eno lastnost namesto štirih ločenih props za iOS in elevation — pred zanašanjem nanjo v produkciji preveri svojo različico RN in stanje New Architecture.

Zakaj je shadowRadius polovica vrednosti zameglitve, ki jo nastavim?

Predogled v živo uporablja CSS box-shadow, kjer se vrednost zameglitve pri isti številki razširi približno dvakrat dlje kot shadowRadius na iOS. Generirana koda nastavi shadowRadius na polovico tvoje vrednosti zameglitve, tako da senca, ki jo vidiš v predogledu, ustreza temu, kar iOS dejansko izriše — če bi vrednost zameglitve prekopiral neposredno, bi bila senca na iOS opazno mehkejša in večja kot v predogledu.

Ali potrebujem Platform.select za uporabo teh slogov?

Ne — varno je props shadow* za iOS in elevation za Android združiti v en sam style-objekt, prav tako kot to naredi generirana koda: vsaka platforma preprosto prezre props druge. Platform.select je vredno dodati le, če želiš resnično različne zasnove sence za posamezno platformo, ne le zato, da bi se izognil opozorilom (teh ni).

Nastavil sem elevation, a senca na Androidu se še vedno ne prikaže — zakaj?

Dva najpogostejša vzroka: element nima backgroundColor (senca elevation na Androidu izhaja iz neprosojnega ozadja elementa, zato prozoren element ne meče nobene sence), ali pa ima nadrejeni element overflow: 'hidden' in senco obreže. Preden sklepaš, da je vrednost elevation napačna, elementu nastavi enotno barvo ozadja in preveri nastavitve overflow pri predhodnikih.