Styl

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 →

W React Native stylujesz swoją aplikację używając JavaScriptu. Wszystkie podstawowe komponenty akceptują prop o nazwie style. Nazwy stylów i wartości zwykle odpowiadają działaniu CSS w internecie, z tą różnicą, że nazwy zapisuje się w konwencji camelCase, np. backgroundColor zamiast background-color.

Prop style może być zwykłym obiektem JavaScript. To właśnie zwykle używamy w przykładowym kodzie. Możesz także przekazać tablicę stylów - ostatni styl w tablicy ma pierwszeństwo, co pozwala na dziedziczenie stylów.

Gdy komponent staje się bardziej złożony, często czystszym rozwiązaniem jest użycie StyleSheet.create do zdefiniowania wielu stylów w jednym miejscu. Oto przykład:

Jednym z powszechnych wzorców jest tworzenie komponentu akceptującego prop style, który następnie służy do stylowania podkomponentów. Dzięki temu style mogą "kaskadować" podobnie jak w CSS.

Istnieje znacznie więcej sposobów dostosowania stylu tekstu. Pełną listę znajdziesz w dokumentacji komponentu Text.

Teraz możesz uczynić swój tekst pięknym. Kolejnym krokiem do zostania ekspertem stylów jest nauka kontrolowania rozmiarów komponentów.

Znane problemy

• react-native#29308: W niektórych przypadkach React Native nie działa identycznie jak CSS w internecie, np. obszar dotykowy nigdy nie wykracza poza granice widoku nadrzędnego, a na Androidzie nie obsługuje się ujemnych marginesów.