Przejdź do treści głównej
Wersja: 0.80

Właściwości stylu obrazu

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 →

Przykłady

Tryb zmiany rozmiaru obrazu

Obramowanie obrazu

Zaokrąglenie rogów obrazu

Koloryzacja obrazu

Dokumentacja

Właściwości

backfaceVisibility

Ta właściwość określa, czy tylna strona obróconego obrazu powinna być widoczna.

TypeDefault
enum('visible', 'hidden')'visible'

backgroundColor

Type
color

borderBottomLeftRadius

Type
number

borderBottomRightRadius

Type
number

borderColor

Type
color

borderRadius

Type
number

borderTopLeftRadius

Type
number

borderTopRightRadius

Type
number

borderWidth

Type
number

opacity

Ustaw wartość przezroczystości obrazu. Liczba powinna mieścić się w zakresie od 0.0 do 1.0.

TypeDefault
number1.0

overflow

TypeDefault
enum('visible', 'hidden')'visible'

overlayColor
Android

Gdy obraz ma zaokrąglone rogi, określenie overlayColor spowoduje wypełnienie pozostałej przestrzeni w rogach jednolitym kolorem. Jest to przydatne w przypadkach nieobsługiwanych przez implementację zaokrąglonych rogów w Androidzie:

  • Niektóre tryby zmiany rozmiaru, jak 'contain'

  • Animowane pliki GIF

Typowym zastosowaniem tej właściwości jest wyświetlanie obrazów na jednolitym tle z ustawieniem overlayColor na kolor tła.

Szczegóły działania tej funkcji opisano w dokumentacji Fresco.

Type
string

resizeMode

Określa sposób zmiany rozmiaru obrazu, gdy ramka nie pasuje do oryginalnych wymiarów. Domyślnie cover.

  • cover: Skaluje obraz równomiernie (zachowując proporcje) tak, że:

    • Oba wymiary (szerokość i wysokość) obrazu będą równe lub większe niż odpowiadający wymiar widoku (minus padding)
    • Co najmniej jeden wymiar przeskalowanego obrazu będzie równy odpowiadającemu wymiarowi widoku (minus padding)
  • contain: Skaluje obraz jednolicie (zachowując proporcje) tak, że oba wymiary będą równe lub mniejsze od odpowiednich wymiarów widoku (minus padding).

  • stretch: Skaluje szerokość i wysokość niezależnie, co może zmienić proporcje obrazu.

  • repeat: Powtarza obraz, aby wypełnić ramkę widoku. Obraz zachowa rozmiar i proporcje, chyba że jest większy niż widok - wtedy zostanie jednolicie pomniejszony.

  • center: Wyśrodkowuje obraz w widoku w obu wymiarach. Jeśli obraz jest większy niż widok, pomniejsza go jednolicie.

TypeDefault
enum('cover', 'contain', 'stretch', 'repeat', 'center')'cover'

objectFit

Określa sposób zmiany rozmiaru obrazu, gdy ramka nie pasuje do oryginalnych wymiarów obrazu.

TypeDefault
enum('cover', 'contain', 'fill', 'scale-down')'cover'

tintColor

Zmienia kolor wszystkich nieprzezroczystych pikseli na podany tintColor.

Type
color