Generator cieni React Native

Cień w React Native działa inaczej na każdej platformie: iOS odczytuje shadowColor, shadowOffset, shadowOpacity i shadowRadius, natomiast Android ignoruje to wszystko i wymaga osobnej wartości elevation. Dostosuj cień wizualnie tutaj i skopiuj obiekt stylu obsługujący obie platformy, a także nowszy, wieloplatformowy ciąg boxShadow dla aplikacji na New Architecture.

Czym jest to narzędzie?

W React Native cienie domyślnie nie są wieloplatformowe. iOS używa czterech osobnych właściwości stylu (shadowColor, shadowOffset z width/height, shadowOpacity od 0 do 1 oraz shadowRadius dla rozmycia), które odwzorowują ten sam mechanizm cienia CoreAnimation, jaki wykorzystuje web'owy box-shadow. Natywny system View Androida w ogóle nie obsługuje dowolnych kształtów cienia — obsługuje jedynie elevation, pojedynczą liczbę tworzącą stały cień Material Design na podstawie tego, jak „wysoko” dany widok wydaje się unosić.

Oznacza to, że cień, który wygląda dobrze na iOS przy użyciu shadowRadius/shadowOpacity, na Androidzie w ogóle się nie pojawi, jeśli nie ustawisz również elevation, a oba nigdy nie będą identyczne co do piksela, ponieważ kształt cienia elevation nie jest konfigurowalny tak jak na iOS. Od React Native 0.74 z włączoną New Architecture dostępna jest również wieloplatformowa właściwość stylu boxShadow, wykorzystująca tę samą składnię co CSS.

Dlaczego warto go używać?

Zobacz na żywo podgląd wizualny podczas dostosowywania przesunięcia, rozmycia, przezroczystości i koloru — zamiast zgadywać wartości i przebudowywać aplikację, aby sprawdzić efekt.
Otrzymaj naraz właściwości cienia iOS, elevation dla Androida oraz nowszy wieloplatformowy ciąg boxShadow, dzięki czemu nie musisz szukać trzech różnych API.
Elevation jest osobną kontrolką (nie jest automatycznie obliczana z blur/opacity), ponieważ zależność elevation od wyglądu cienia na Androidzie nie jest bezpośrednim przełożeniem właściwości cienia z iOS — trzeba ją dostroić wizualnie, co to narzędzie umożliwia obok siebie.
Darmowe, natychmiastowe i gotowe do skopiowania jako pojedynczy obiekt stylu.

Jak używać

Dostosuj przesunięcie X/Y, promień rozmycia, przezroczystość i kolor cienia — pole podglądu aktualizuje się na żywo.
Osobno dostrój wartość elevation dla Androida, aż wizualnie odpowiadać będzie zamierzonej sile cienia.
Kliknij „Kopiuj”, aby skopiować pełny obiekt stylu, zawierający właściwości iOS, elevation dla Androida i ciąg boxShadow.
Wklej obiekt do StyleSheet swojego komponentu — rozłóż (spread) lub połącz go z istniejącymi stylami widoku.

Przykład

Wejście

Przesunięcie (0, 4), rozmycie 8, przezroczystość 0,25, czarny, elevation 5

Wynik

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 jest ustawiane na połowę wartości rozmycia widocznej w podglądzie, co odpowiada temu, jak rozmycie CSS odnosi się w praktyce do shadowRadius na iOS.

Najczęściej zadawane pytania

Dlaczego mój cień nie pojawia się na Androidzie?

Właściwości shadowColor/shadowOffset/shadowOpacity/shadowRadius działają tylko na iOS — natywne renderowanie Androida po prostu je ignoruje. Musisz również ustawić właściwość elevation (liczbę dodatnią), aby cień w ogóle pojawił się na Androidzie.

Czy mogę sprawić, by cień na Androidzie wyglądał identycznie jak na iOS?

Nie do końca — elevation tworzy wbudowany cień Material Design Androida, który nie jest niezależnie konfigurowalny pod względem koloru, kierunku przesunięcia czy rozmycia tak jak cień na iOS. Możesz dostroić wartość elevation, aby uzyskać wizualnie zbliżoną siłę, ale idealne dopasowanie pikselowe między platformami nie jest możliwe przy klasycznych API shadow/elevation.

Czym jest właściwość boxShadow i czy mogę użyć jej zamiast tego?

boxShadow to nowsza, w pełni wieloplatformowa właściwość stylu (dodana w React Native 0.74, dostępna w New Architecture), która wykorzystuje tę samą składnię ciągu co CSS box-shadow i działa identycznie na iOS i Androidzie. Jeśli wersja React Native i architektura Twojej aplikacji ją obsługują, możesz użyć tylko tej jednej właściwości zamiast czterech osobnych właściwości iOS plus elevation — przed poleganiem na niej w produkcji sprawdź wersję RN i status New Architecture.

Dlaczego shadowRadius to połowa ustawionej wartości rozmycia?

Podgląd na żywo wykorzystuje CSS box-shadow, gdzie wartość rozmycia rozchodzi się w przybliżeniu dwukrotnie dalej niż shadowRadius na iOS przy tej samej liczbie. Wygenerowany kod ustawia shadowRadius na połowę wartości rozmycia, aby cień widoczny w podglądzie odpowiadał temu, co faktycznie renderuje iOS — gdybyś skopiował wartość rozmycia bezpośrednio, cień na iOS byłby zauważalnie miększy i większy niż w podglądzie.

Czy muszę używać Platform.select, aby zastosować te style?

Nie — można bezpiecznie umieścić właściwości shadow* z iOS oraz elevation Androida razem w jednym obiekcie stylu, dokładnie tak jak robi to wygenerowany kod: każda platforma po prostu ignoruje właściwości drugiej. Platform.select warto dodać tylko wtedy, gdy chcesz naprawdę różnych projektów cienia na każdej platformie, a nie tylko po to, by uniknąć ostrzeżeń (nie ma żadnych).

Ustawiłem elevation, ale cień na Androidzie nadal się nie pojawia — dlaczego?

Dwie najczęstsze przyczyny: widok nie ma backgroundColor (cień elevation na Androidzie jest rzucany przez nieprzezroczyste tło widoku, więc przezroczysty widok nie rzuca żadnego cienia) lub rodzic ma overflow: 'hidden' i przycina cień. Nadaj widokowi pełne tło koloru i sprawdź ustawienia overflow przodków, zanim uznasz, że wartość elevation jest błędna.