1
00:00:04,540 --> 00:00:11,110
Style wbudowane są bardzo łatwe do zastosowania, ale ich wadą jest to, że im bardziej złożona

2
00:00:11,110 --> 00:00:18,260
jest twoja aplikacja i konfiguracja, tym bardziej komponent, tym trudniej jest go stosować wraz ze wszystkimi tymi stylami wbudowanymi.

3
00:00:18,370 --> 00:00:24,040
Będziesz tam miał dużo kodu, w kodzie jsx i może być trudno go odczytać, aby

4
00:00:24,040 --> 00:00:24,720
zrozumieć.

5
00:00:24,870 --> 00:00:27,870
Dlatego, chociaż możesz używać stylów wbudowanych,

6
00:00:27,940 --> 00:00:32,740
w rzeczywistości zaleca się stosowanie obiektu arkusza stylów i właśnie tam

7
00:00:32,740 --> 00:00:33,820
się tworzy.

8
00:00:33,820 --> 00:00:39,120
Korzysta z arkusza stylów, który jest w końcu klasą dostarczoną przez

9
00:00:39,130 --> 00:00:46,660
React Native, dlatego stamtąd go importujemy, a na końcu tworzy obiekt JavaScript, który zawiera całą konfigurację stylu.

10
00:00:46,660 --> 00:00:51,940
Różnica w stosunku do waniliowego obiektu Javascript, który można również utworzyć samodzielnie,

11
00:00:51,940 --> 00:00:59,590
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

12
00:00:59,590 --> 00:01:01,530
zastosować bardziej efektywnie twoje style.

13
00:01:01,600 --> 00:01:07,480
Dlatego powinieneś tego użyć, ponieważ nic nie tracisz, ale w przyszłości możesz

14
00:01:07,540 --> 00:01:12,190
skorzystać z dodatkowych optymalizacji. W tej chwili, kiedy to nagrywam,

15
00:01:12,190 --> 00:01:17,800
nie ma różnicy, ale znowu powinieneś użyć arkusza stylów. Utwórz, ponieważ nie zaszkodzi, a w przyszłości

16
00:01:17,800 --> 00:01:22,120
możesz uzyskać dodatkowe optymalizacje wydajności. Kolejną zaletą korzystania z arkusza stylów

17
00:01:22,120 --> 00:01:28,150
jest to, że automatycznie doda to sprawdzanie poprawności, co oznacza, że jeśli używasz niepoprawnej właściwości stylu lub niepoprawnej

18
00:01:28,150 --> 00:01:33,550
wartości, program React Native wykryje to i zgłosi błąd, który po prostu ułatwi wykrycie takie błędy,

19
00:01:33,550 --> 00:01:35,380
jeśli nie byłoby sprawdzania

20
00:01:35,470 --> 00:01:39,370
poprawności, to po cichu się nie udałoby, po prostu nie zastosowałoby stylu

21
00:01:39,370 --> 00:01:45,160
i możesz nawet tego nie zobaczyć natychmiast lub zobaczysz, że stylizacja jest nieprawidłowa, ale tak naprawdę nie

22
00:01:45,160 --> 00:01:48,070
rozumiesz, dlaczego nie działa, dlatego ta wbudowana walidacja to

23
00:01:48,070 --> 00:01:53,950
kolejna zaleta korzystania z tego obiektu arkusza stylów tutaj. Aby utworzyć, przekazujesz obiekt Javascript jako argument,

24
00:01:54,040 --> 00:01:56,680
więc argument, który tutaj przekazujesz,

25
00:01:56,680 --> 00:02:01,450
jest obiektem Javascript, w tym obiekcie możesz teraz zdefiniować swoje style

26
00:02:01,450 --> 00:02:07,000
i nie robisz tego, dodając padding 10, ponieważ nie byłoby jasne, gdzie należy

27
00:02:07,000 --> 00:02:08,020
to

28
00:02:08,020 --> 00:02:15,280
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

29
00:02:15,370 --> 00:02:16,810
ogólnego widoku ekranu,

30
00:02:16,810 --> 00:02:21,040
więc dla tego najwyższego poziomu tutaj możesz wybrać dowolną

31
00:02:21,040 --> 00:02:26,490
nazwę, tutaj nie musi być ekranem. Tutaj masz teraz zagnieżdżony

32
00:02:26,560 --> 00:02:30,610
obiekt JavaScript, więc wartością tej właściwości jest inny

33
00:02:30,610 --> 00:02:33,800
obiekt JavaScript i tam, na przykład,

34
00:02:33,820 --> 00:02:37,630
ustawiasz padding 50, więc styl, który tam mieliśmy.

35
00:02:37,700 --> 00:02:40,510
Teraz możemy usunąć ten styl tutaj, nadal

36
00:02:40,520 --> 00:02:45,980
mam właściwość stylu, ale nie mam już wbudowanego obiektu stylu, a zamiast tego tutaj, teraz

37
00:02:46,010 --> 00:02:52,120
wskazuję style, które są tą stałą, która utrzymuje nasz obiekt arkusza stylów, wskazuję style, a następnie

38
00:02:52,150 --> 00:02:58,430
za pomocą kropka, wskazuję na styl ekranu i to właśnie miałem na myśli, możesz wybrać dowolną nazwę

39
00:02:58,430 --> 00:03:00,090
tutaj, jeśli nazwałbyś ten

40
00:03:00,170 --> 00:03:06,440
root, wtedy musiałbyś po prostu użyć roota tam. Abyś mógł użyć dowolnej nazwy, po prostu upewnij

41
00:03:06,440 --> 00:03:07,160
się,

42
00:03:07,160 --> 00:03:12,550
że nazwy, które tam używasz, odpowiadają nazwom, których używasz tutaj, a teraz po

43
00:03:12,570 --> 00:03:18,540
prostu mówi React Native, że ten widok powinien mieć zdefiniowane style dla ekranu na dole.

44
00:03:18,650 --> 00:03:20,990
Możesz zrobić to samo dla naszego kontenera wejściowego,

45
00:03:20,990 --> 00:03:25,860
powiedzmy, znowu ta nazwa zależy wyłącznie od Ciebie, kontenera wejściowego. Tutaj wezmę ten

46
00:03:25,880 --> 00:03:28,400
obiekt stylu, który wcześniej zastosowałem

47
00:03:28,400 --> 00:03:37,130
jako styl wbudowany w tym widoku i zastosowałem go jako wartość dla tego kontenera wejściowego.

48
00:03:37,130 --> 00:03:42,260
Teraz w tym widoku odwołujemy się do stylów. inputContainer, teraz z pewnym

49
00:03:42,260 --> 00:03:48,110
automatycznym formatowaniem, które można przy okazji zrobić w Visual Studio Code, przechodząc do

50
00:03:49,130 --> 00:03:54,860
preferencji, skrótów klawiaturowych, a następnie szukając formatu dokumentu, to skrót, który chcesz

51
00:03:55,010 --> 00:04:00,780
nacisnąć, aby automatycznie sformatować dokumenty, plik. Dzięki temu mamy tutaj pewną czystą strukturę kodu,

52
00:04:00,860 --> 00:04:04,710
widzimy, że są to nasze style kontenerów wejściowych i tutaj je stosujemy.

53
00:04:04,730 --> 00:04:10,910
Kolejną zaletą posiadania tego obiektu arkusza stylów jest również to, że można zastosować ten sam styl do wielu

54
00:04:10,910 --> 00:04:12,680
widoków bez kopiowania go.

55
00:04:12,710 --> 00:04:18,200
Więc jeśli chcemy mieć styl kontenera wejściowego, nie tylko w tym widoku, ale także w

56
00:04:18,350 --> 00:04:25,160
tym, na dole, możemy po prostu pisać style stylów. inputContainer, możesz zastosować ten styl do dowolnej

57
00:04:25,190 --> 00:04:26,290
liczby komponentów.

58
00:04:26,290 --> 00:04:32,460
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ć,

59
00:04:32,460 --> 00:04:35,030
to wprowadzanie tekstu tutaj.

60
00:04:35,030 --> 00:04:40,970
Tam po prostu nazwiemy to wejście, zbyt wiele nawiasów klamrowych, ustawiam tu swoje

61
00:04:41,130 --> 00:04:50,220
style od czasu do czasu, odnosząc się do stylów. wejście, w ten

62
00:04:50,430 --> 00:04:55,430
sposób. Dzięki temu zachowamy ten sam

63
00:04:55,560 --> 00:05:01,320
wygląd, co poprzednio, ale teraz używamy obiektu arkusza stylów, który ułatwia udostępnianie i ponowne

64
00:05:01,320 --> 00:05:05,610
użycie stylów, a także prawdopodobnie zapewnia pewne przyszłe optymalizacje wydajności,

65
00:05:05,610 --> 00:05:10,290
a dodatkowo nasz kod jsx tutaj po prostu jest teraz znacznie szczuplejszy.