Style wbudowane są bardzo łatwe do zastosowania, ale ich wadą jest to, że im bardziej złożona
jest twoja aplikacja i konfiguracja, tym bardziej komponent, tym trudniej jest go stosować wraz ze wszystkimi tymi stylami wbudowanymi.
Będziesz tam miał dużo kodu, w kodzie jsx i może być trudno go odczytać, aby
zrozumieć.
Dlatego, chociaż możesz używać stylów wbudowanych,
w rzeczywistości zaleca się stosowanie obiektu arkusza stylów i właśnie tam
się tworzy.
Korzysta z arkusza stylów, który jest w końcu klasą dostarczoną przez
React Native, dlatego stamtąd go importujemy, a na końcu tworzy obiekt JavaScript, który zawiera całą konfigurację stylu.
Różnica w stosunku do waniliowego obiektu Javascript, który można również utworzyć samodzielnie,
polega na tym, że po prostu arkusz stylów. W przyszłości create może również zastosować pewne optymalizacje wydajności i na koniec
zastosować bardziej efektywnie twoje style.
Dlatego powinieneś tego użyć, ponieważ nic nie tracisz, ale w przyszłości możesz
skorzystać z dodatkowych optymalizacji. W tej chwili, kiedy to nagrywam,
nie ma różnicy, ale znowu powinieneś użyć arkusza stylów. Utwórz, ponieważ nie zaszkodzi, a w przyszłości
możesz uzyskać dodatkowe optymalizacje wydajności. Kolejną zaletą korzystania z arkusza stylów
jest to, że automatycznie doda to sprawdzanie poprawności, co oznacza, że jeśli używasz niepoprawnej właściwości stylu lub niepoprawnej
wartości, program React Native wykryje to i zgłosi błąd, który po prostu ułatwi wykrycie takie błędy,
jeśli nie byłoby sprawdzania
poprawności, to po cichu się nie udałoby, po prostu nie zastosowałoby stylu
i możesz nawet tego nie zobaczyć natychmiast lub zobaczysz, że stylizacja jest nieprawidłowa, ale tak naprawdę nie
rozumiesz, dlaczego nie działa, dlatego ta wbudowana walidacja to
kolejna zaleta korzystania z tego obiektu arkusza stylów tutaj. Aby utworzyć, przekazujesz obiekt Javascript jako argument,
więc argument, który tutaj przekazujesz,
jest obiektem Javascript, w tym obiekcie możesz teraz zdefiniować swoje style
i nie robisz tego, dodając padding 10, ponieważ nie byłoby jasne, gdzie należy
to
zastosować, zamiast tego użyj dowolnej wybranej właściwości właściwości, takiej jak na przykład screen, aby ustawić styl naszego
ogólnego widoku ekranu,
więc dla tego najwyższego poziomu tutaj możesz wybrać dowolną
nazwę, tutaj nie musi być ekranem. Tutaj masz teraz zagnieżdżony
obiekt JavaScript, więc wartością tej właściwości jest inny
obiekt JavaScript i tam, na przykład,
ustawiasz padding 50, więc styl, który tam mieliśmy.
Teraz możemy usunąć ten styl tutaj, nadal
mam właściwość stylu, ale nie mam już wbudowanego obiektu stylu, a zamiast tego tutaj, teraz
wskazuję style, które są tą stałą, która utrzymuje nasz obiekt arkusza stylów, wskazuję style, a następnie
za pomocą kropka, wskazuję na styl ekranu i to właśnie miałem na myśli, możesz wybrać dowolną nazwę
tutaj, jeśli nazwałbyś ten
root, wtedy musiałbyś po prostu użyć roota tam. Abyś mógł użyć dowolnej nazwy, po prostu upewnij
się,
że nazwy, które tam używasz, odpowiadają nazwom, których używasz tutaj, a teraz po
prostu mówi React Native, że ten widok powinien mieć zdefiniowane style dla ekranu na dole.
Możesz zrobić to samo dla naszego kontenera wejściowego,
powiedzmy, znowu ta nazwa zależy wyłącznie od Ciebie, kontenera wejściowego. Tutaj wezmę ten
obiekt stylu, który wcześniej zastosowałem
jako styl wbudowany w tym widoku i zastosowałem go jako wartość dla tego kontenera wejściowego.
Teraz w tym widoku odwołujemy się do stylów. inputContainer, teraz z pewnym
automatycznym formatowaniem, które można przy okazji zrobić w Visual Studio Code, przechodząc do
preferencji, skrótów klawiaturowych, a następnie szukając formatu dokumentu, to skrót, który chcesz
nacisnąć, aby automatycznie sformatować dokumenty, plik. Dzięki temu mamy tutaj pewną czystą strukturę kodu,
widzimy, że są to nasze style kontenerów wejściowych i tutaj je stosujemy.
Kolejną zaletą posiadania tego obiektu arkusza stylów jest również to, że można zastosować ten sam styl do wielu
widoków bez kopiowania go.
Więc jeśli chcemy mieć styl kontenera wejściowego, nie tylko w tym widoku, ale także w
tym, na dole, możemy po prostu pisać style stylów. inputContainer, możesz zastosować ten styl do dowolnej
liczby komponentów.
Teraz oczywiście nie potrzebuję go tutaj, ale moglibyśmy go użyć tutaj, gdybyśmy go potrzebowali. Teraz ostatni styl, który chcę zastosować,
to wprowadzanie tekstu tutaj.
Tam po prostu nazwiemy to wejście, zbyt wiele nawiasów klamrowych, ustawiam tu swoje
style od czasu do czasu, odnosząc się do stylów. wejście, w ten
sposób. Dzięki temu zachowamy ten sam
wygląd, co poprzednio, ale teraz używamy obiektu arkusza stylów, który ułatwia udostępnianie i ponowne
użycie stylów, a także prawdopodobnie zapewnia pewne przyszłe optymalizacje wydajności,
a dodatkowo nasz kod jsx tutaj po prostu jest teraz znacznie szczuplejszy.