CodeKitHubMi ez az eszköz?
A React Native-ben az árnyékok alapértelmezetten nem platformfüggetlenek. Az iOS négy külön stílustulajdonságot használ (shadowColor, shadowOffset a width/height értékekkel, shadowOpacity 0 és 1 között, valamint shadowRadius az elmosáshoz), amelyek ugyanarra az alapul szolgáló CoreAnimation árnyékra képződnek le, amelyet a weben a box-shadow is használ. Az Android natív View rendszere egyáltalán nem támogatja a tetszőleges árnyékformákat — csak az elevation-t támogatja, egyetlen számot, amely egy fix Material Design eséstárnyékot hoz létre aszerint, hogy a nézet milyen „magasan” lebeg.
Ez azt jelenti, hogy egy árnyék, amely shadowRadius/shadowOpacity segítségével iOS-en jól néz ki, Androidon egyáltalán nem jelenik meg, hacsak nem állítasz be elevation-t is, és a kettő soha nem fog pixelre pontosan egyezni, mivel az elevation árnyékformája nem testre szabható úgy, mint az iOS-é. A React Native 0.74-től kezdve, New Architecture bekapcsolásával, egy platformfüggetlen boxShadow stílustulajdonság is elérhető, amely ugyanazt a szintaxist használja, mint a CSS.
Miért érdemes használni?
- Nézd meg élőben a vizuális előnézetet, miközben az eltolást, az elmosást, az átlátszóságot és a színt módosítod — ahelyett, hogy értékeket találgatnál, majd újraépítenéd az alkalmazást az ellenőrzéshez.
- Egyszerre kapd meg az iOS árnyéktulajdonságait, az Android elevation-jét és az újabb, platformfüggetlen boxShadow stringet, így nem kell három különböző API-t átnézned.
- Az elevation külön szabályozható (nem automatikusan számítódik az elmosásból/átlátszóságból), mert az Android elevation-árnyékmegjelenés leképezése nem közvetlen fordítása az iOS árnyéktulajdonságainak — ezt vizuálisan kell hozzáigazítanod, amit ez az eszköz egymás mellett tesz lehetővé.
- Ingyenes, azonnali, és egyetlen stílusobjektumként másolásra kész.
Használati útmutató
- Állítsd be az X/Y eltolást, az elmosás sugarát, az átlátszóságot és az árnyék színét — az előnézeti doboz élőben frissül.
- Külön hangold az Android elevation számértékét, amíg vizuálisan meg nem felel a kívánt árnyékerősségnek.
- Kattints a „Másolás” gombra a teljes stílusobjektum kimásolásához, beleértve az iOS tulajdonságokat, az Android elevation-t és a boxShadow stringet.
- Illeszd be az objektumot a komponens StyleSheet-jébe — terítsd szét (spread) vagy egyesítsd a meglévő view stílusaiddal.
Példa
Bemenet
Eltolás (0, 4), elmosás 8, átlátszóság 0,25, fekete, elevation 5Kimenet
shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'A shadowRadius az előnézetben megjelenő elmosásérték felére van állítva, ami megfelel annak, ahogyan a CSS elmosási sugara a gyakorlatban viszonyul az iOS shadowRadius-ához.
Gyakori kérdések
Miért nem jelenik meg az árnyékom Androidon?
A shadowColor/shadowOffset/shadowOpacity/shadowRadius tulajdonságok csak iOS-en működnek — az Android natív renderelése egyszerűen figyelmen kívül hagyja őket. Az elevation tulajdonságot (egy pozitív számot) is be kell állítanod ahhoz, hogy egyáltalán megjelenjen árnyék Androidon.
Elérhetem, hogy az Android árnyék pontosan ugyanúgy nézzen ki, mint az iOS-en?
Nem pontosan — az elevation az Android beépített Material Design árnyékformáját hozza létre, amely nem szabályozható függetlenül a szín, az eltolás iránya vagy az elmosás tekintetében úgy, mint az iOS árnyéka. Az elevation értékét finomhangolhatod, hogy vizuálisan hasonló erősséget kapj, de a klasszikus shadow/elevation API-kkal a pixelpontos egyezés a platformok között nem lehetséges.
Mi az a boxShadow tulajdonság, és használhatom helyette?
A boxShadow egy újabb, valóban platformfüggetlen stílustulajdonság (a React Native 0.74-ben jelent meg, a New Architecture-ön érhető el), amely ugyanazt a stringszintaxist használja, mint a CSS box-shadow, és iOS-en és Androidon egyformán működik. Ha az alkalmazásod React Native verziója és architektúrája támogatja, ezt az egyetlen tulajdonságot használhatod a négy külön iOS tulajdonság plusz elevation helyett — éles környezetben való bevetés előtt ellenőrizd az RN verziót és a New Architecture állapotát.
Miért a beállított elmosási érték fele a shadowRadius?
Az élő előnézet CSS box-shadow-t használ, ahol az elmosási érték nagyjából kétszer olyan messzire terjed, mint az iOS ugyanolyan számú shadowRadius-a. A generált kód a shadowRadius-t az elmosási érték felére állítja, hogy az előnézetben látott árnyék megfeleljen annak, amit az iOS ténylegesen renderel — ha az elmosási értéket közvetlenül átvitted volna, az iOS-es árnyék érezhetően lágyabb és nagyobb lenne, mint az előnézetben.
Szükségem van a Platform.select-re ezeknek a stílusoknak az alkalmazásához?
Nem — biztonságos az iOS shadow* tulajdonságait és az Android elevation-jét egy stílusobjektumba tenni, pontosan úgy, ahogy a generált kód teszi: mindkét platform egyszerűen figyelmen kívül hagyja a másik tulajdonságait. A Platform.select-et csak akkor érdemes hozzáadni, ha platformonként valóban eltérő árnyéktervet szeretnél, nem pusztán figyelmeztetések elkerülése végett (ilyenek nincsenek).
Beállítottam az elevation-t, de az Android árnyék még mindig nem jelenik meg — miért?
A két leggyakoribb ok: a nézetnek nincs backgroundColor-ja (az Android elevation árnyéka a nézet átlátszatlan hátteréből vetül, így egy átlátszó nézet semmilyen árnyékot nem vet), vagy egy szülőnek overflow: 'hidden' van beállítva, ami levágja az árnyékot. Adj a nézetnek egy egyszínű háttérszínt, és ellenőrizd az ősök overflow beállításait, mielőtt feltételeznéd, hogy az elevation érték hibás.