Przejdź do treści głównej

Właściwości cieni

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Dokumentacja

W React Native istnieją trzy zestawy interfejsów API do obsługi cieni:

  • boxShadow: Właściwość stylu View będąca zgodną ze specyfikacją implementacją tej samej właściwości w wersji webowej.

  • dropShadow: Konkretna funkcja filtrująca dostępna jako część właściwości stylu filter dla komponentu View.

  • Różne właściwości shadow (shadowColor, shadowOffset, shadowOpacity, shadowRadius): Odpowiadają bezpośrednio ich natywnym odpowiednikom w API platform.

Różnice między dropShadow a boxShadow są następujące:

  • dropShadow działa jako część filter, podczas gdy boxShadow jest samodzielną właściwością stylu.

  • dropShadow działa jako maska alfa, więc tylko piksele z dodatnią wartością alfa będą "rzucać" cień. boxShadow tworzy cień wokół obramowania elementu niezależnie od jego zawartości (chyba że użyto parametru inset).

  • dropShadow jest dostępny tylko na Androidzie, boxShadow działa na iOS i Androidzie.

  • dropShadow nie obsługuje parametru inset tak jak boxShadow.

  • dropShadow nie ma argumentu spreadDistance dostępnego w boxShadow.

Zarówno boxShadow, jak i dropShadow są ogólnie bardziej zaawansowane niż właściwości shadow. Jednak właściwości shadow bezpośrednio wykorzystują natywne API platformy, więc jeśli potrzebujesz prostego cienia, zaleca się ich użycie. Pamiętaj, że tylko shadowColor działa zarówno na Androidzie, jak i iOS - pozostałe właściwości shadow działają wyłącznie na iOS.

Właściwości​

boxShadow​

Dokumentację znajdziesz w sekcji Właściwości stylu View.

dropShadow
Android
​

Dokumentację znajdziesz w sekcji Właściwości stylu View.

shadowColor​

Ustawia kolor cienia.

Ta właściwość działa tylko na Androidzie w wersji API 28 i nowszych. Dla podobnej funkcjonalności na starszych wersjach Androida użyj właściwości elevation.

Type
color

shadowOffset
iOS
​

Ustawia przesunięcie cienia.

Type
object: {width: number,height: number}

shadowOpacity
iOS
​

Ustawia przezroczystość cienia (mnożoną przez komponent alfa koloru).

Type
number

shadowRadius
iOS
​

Ustawia promień rozmycia cienia.

Type
number