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

StyleSheet

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 →

StyleSheet to abstrakcja podobna do arkuszy stylów CSS.

Wskazówki dotyczące jakości kodu:

  • Przenosząc style poza funkcję renderującą, sprawiasz że kod staje się łatwiejszy do zrozumienia.

  • Nadawanie nazw stylom to dobry sposób na nadanie znaczenia niskopoziomowym komponentom w funkcji renderującej oraz zachęca do ich ponownego użycia.

  • W większości IDE użycie StyleSheet.create() zapewni statyczne sprawdzanie typów i podpowiedzi, które pomogą ci pisać poprawne style.

Dokumentacja

Metody​

compose()​

tsx
static compose(style1: Object, style2: Object): Object | Object[];

Łączy dwa style w taki sposób, że style2 nadpisze style z style1. Jeśli którykolwiek styl jest fałszywy, zwracany jest drugi bez alokowania tablicy, co oszczędza alokacje i zachowuje równość referencyjną dla sprawdzania PureComponent.

create()​

tsx
static create(styles: Object extends Record<string, ViewStyle | ImageStyle | TextStyle>): Object;

Funkcja tożsamościowa do tworzenia stylów. Główną praktyczną korzyścią tworzenia stylów wewnątrz StyleSheet.create() jest statyczne sprawdzanie typów dla natywnych właściwości stylów.

flatten()​

tsx
static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle | TextStyle>>): Object;

Spłaszcza tablicę obiektów stylów do jednego zbiorczego obiektu stylu.

setStyleAttributePreprocessor()​

OSTRZEŻENIE: EKSPERYMENTALNE. Prawdopodobnie będą występować liczne zmiany łamiące kompatybilność, bez oficjalnych zapowiedzi. Całość może zostać usunięta – kto wie? Używasz na własne ryzyko.

tsx
static setStyleAttributePreprocessor(
  property: string,
  process: (propValue: any) => any,
);

Ustawia funkcję do wstępnego przetwarzania wartości właściwości stylu. Jest używana wewnętrznie do przetwarzania kolorów i transformacji. Nie powinieneś tego używać, chyba że naprawdę wiesz co robisz i wyczerpałeś inne opcje.

Zatrzymuje działającą animację i resetuje wartość do oryginalnej.

absoluteFill​

Bardzo częstym wzorcem jest tworzenie nakładek z pozycją absolute i zerowym pozycjonowaniem (position: 'absolute', left: 0, right: 0, top: 0, bottom: 0), więc absoluteFill może być użyte dla wygody i aby zmniejszyć powielanie tych stylów. Możesz użyć absoluteFill do stworzenia spersonalizowanego wpisu w StyleSheet, np.:

absoluteFillObject​

Czasem możesz chcieć użyć absoluteFill z kilkoma modyfikacjami - absoluteFillObject może być użyte do stworzenia spersonalizowanego wpisu w StyleSheet, np.:

hairlineWidth​

Jest to zdefiniowane jako szerokość cienkiej linii na platformie. Może być używana jako grubość obramowania lub podziału między elementami. Przykład:

Ta stała zawsze będzie zaokrągloną liczbą pikseli (dzięki czemu linia może wyglądać wyraźnie) i będzie starać się dopasować do standardowej szerokości cienkiej linii na danej platformie. Nie powinieneś jednak polegać na jej stałym rozmiarze, ponieważ na różnych platformach i gęstościach ekranu wartość może być obliczana inaczej.

Linia o szerokości hairline może być niewidoczna, jeśli twój symulator jest przeskalowany w dół.