1
00:00:02,420 --> 00:00:08,930
Teraz dzięki temu wszystkim nauczyłeś się dużo o tym, jak tworzyć prawdziwe aplikacje za pomocą React Native.

2
00:00:08,930 --> 00:00:11,780
Nauczyłeś się wiele o wbudowanych komponentach, nauczyłeś

3
00:00:11,780 --> 00:00:16,370
się dużo o stylizacji i jak układać rzeczy tak, jak chcesz i

4
00:00:16,370 --> 00:00:17,300
jak stylizować

5
00:00:17,300 --> 00:00:24,290
rzeczy tak, jak chcesz, a także o tym, jak stylizacja różni się między niektórymi komponentami, na przykład, że w

6
00:00:24,320 --> 00:00:26,320
przypadku komponentów tekstowych styl jest

7
00:00:26,390 --> 00:00:31,970
do pewnego stopnia kaskadowany, więc style są tam dziedziczone w stylach zagnieżdżonych, coś, z czego

8
00:00:31,970 --> 00:00:39,770
korzystamy w grze nad ekranem, ale we wszystkich innych komponentach, takich jak widok, style, które stosujesz do niego naprawdę odnoszą się

9
00:00:39,770 --> 00:00:45,880
tylko do tego widoku i nie są kaskadowane, nie są współużytkowane z żadnymi zagnieżdżonymi widokami potomnymi.

10
00:00:45,890 --> 00:00:52,010
Nauczyłeś się również, jak możesz udostępniać wspólne style, na przykład niestandardowym komponentom, takim jak nasz tekst

11
00:00:52,010 --> 00:00:58,100
podstawowy, który tworzy ogólną rodzinę czcionek, dzięki czemu możemy używać tekstu podstawowego zamiast tekstu wbudowanego, jeśli

12
00:00:58,130 --> 00:01:00,480
chcemy tekst z tą rodziną czcionek.

13
00:01:00,590 --> 00:01:04,190
Oczywiście jest to koncepcja, którą możesz zastosować do dowolnej stylizacji, którą

14
00:01:04,310 --> 00:01:09,980
chcesz, tak jak robimy to również dla rodzaju karty, gdzie mamy prestiżowy widok, aby dać nam ten

15
00:01:10,010 --> 00:01:12,140
ładny wygląd karty z odrobiną cienia.

16
00:01:12,140 --> 00:01:17,450
Nauczyłeś się również, jak skonfigurować niektóre motywy ze stałymi, które możesz zaimportować do różnych plików,

17
00:01:17,870 --> 00:01:23,990
zarówno dla kolorów tutaj, jak i, jeśli ich potrzebujesz, stylów tekstu lub dowolnego innego stylu, który chcesz współdzielić

18
00:01:23,990 --> 00:01:29,630
między komponentami, abyś nie „ Trzeba to cały czas przepisywać, szczególnie przydatne w przypadkach, gdy nie

19
00:01:29,630 --> 00:01:33,120
chcesz lub gdzie nie możesz tworzyć osobnych komponentów, ponieważ

20
00:01:33,260 --> 00:01:36,070
robimy to na przykład dla rodziny czcionek.

21
00:01:36,250 --> 00:01:40,820
Więc jeśli nie jest to możliwe, co w przypadku kolorów byłoby trudne,

22
00:01:40,820 --> 00:01:47,690
ponieważ potrzebujemy kolorów we wszystkich miejscach, wówczas takie wspólne style lub wspólne stałe są świetnym sposobem i ogólnie

23
00:01:47,690 --> 00:01:53,420
mam nadzieję, że masz poczucie, jak komponuj interfejsy użytkownika z wbudowanymi komponentami i własnymi

24
00:01:53,450 --> 00:01:58,820
niestandardowymi komponentami, które następnie budują się na wbudowanych komponentach i jak w ten

25
00:01:58,820 --> 00:02:02,120
sposób możesz budować ładne aplikacje React Native.

26
00:02:02,140 --> 00:02:07,390
Przyjrzeliśmy się niektórym kluczowym komponentom, dlatego też chcę dać krótkie podsumowanie tego, czego dowiedziałeś

27
00:02:07,390 --> 00:02:09,710
się o tych komponentach tutaj.

28
00:02:09,760 --> 00:02:15,080
Prawdopodobnie najważniejszym komponentem jest widok, który jest pojemnikiem, który owija się wokół

29
00:02:15,100 --> 00:02:21,180
innych komponentów, aby następnie rozłożyć te komponenty lub dodać określone style kontenerów, takie jak cienie,

30
00:02:21,190 --> 00:02:24,760
obramowania, kolor tła itp. Równie ważny

31
00:02:24,760 --> 00:02:29,870
jest komponent tekstowy, którego używasz do generowania tekstu.

32
00:02:29,950 --> 00:02:36,130
Możesz również zagnieździć tekst w tekście, w którym jakiś styl jest nawet współużytkowany, i ogólnie możesz

33
00:02:36,130 --> 00:02:41,980
kontrolować sposób wyświetlania tekstu, jeśli ma się on owijać, co jest ustawieniem domyślnym, lub jeśli

34
00:02:41,980 --> 00:02:43,070
powinien wypisywać

35
00:02:43,210 --> 00:02:49,450
tylko jeden lub dwa wiersze i tam jest komponent tekstowy naprawdę pomaga przekazać użytkownikom te cenne informacje.

36
00:02:49,450 --> 00:02:53,860
Teraz czasami nie chcesz tylko wyświetlać informacji, ale także pobierać informacje, a do

37
00:02:53,860 --> 00:02:55,930
tego pomocne może być wprowadzanie tekstu.

38
00:02:55,930 --> 00:03:00,760
Teraz zagłębimy się w pobieranie informacji od użytkowników w dalszej części kursu, ale już zobaczyłeś, jak możesz je stylizować

39
00:03:00,760 --> 00:03:05,290
i jak je skonfigurować oraz jak upewnić się, że otrzymujesz właściwe dane wejściowe i jesteś sprawdzanie poprawności danych

40
00:03:05,320 --> 00:03:11,210
wejściowych i tak naprawdę pracujesz tylko z danymi wejściowymi, których potrzebujesz. Mówiąc teraz o danych wejściowych od użytkownika,

41
00:03:11,210 --> 00:03:14,230
przycisk jest oczywiście również kluczowym elementem, ponieważ wbudowany

42
00:03:14,330 --> 00:03:19,070
przycisk lub własny przycisk, który można zbudować za pomocą dotykowych elementów, które są

43
00:03:19,130 --> 00:03:20,960
również bardzo ważne, i w

44
00:03:20,960 --> 00:03:26,660
przypadkach, w których trzeba wyprowadzić listy danych, nauczyłeś się o FlatList i widoku przewijania, gdzie główną

45
00:03:26,750 --> 00:03:32,270
różnicą jest to, że FlatList jest zoptymalizowany dla bardzo długich list lub list, w których

46
00:03:32,270 --> 00:03:35,790
tak naprawdę nie wiesz, jak długo będą, ale potencjalnie są

47
00:03:35,930 --> 00:03:42,470
one bardzo długie, podczas gdy widok przewijania jest świetny dla wszelkie inne przewijalne treści, które nie są nieskończenie

48
00:03:42,470 --> 00:03:48,410
długie, w których z pewnością przekroczysz granice ekranu, ale nie będzie to zbyt duża zawartość dodatkowa, ponieważ

49
00:03:48,410 --> 00:03:54,110
jeśli cała ta dodatkowa zawartość zostanie wyświetlona bez użycia, bez widoczności dla użytkownik, wtedy marnujesz wydajność

50
00:03:54,110 --> 00:03:54,860
i

51
00:03:54,920 --> 00:03:56,710
do tego dochodzi FlatList,

52
00:03:56,780 --> 00:03:59,980
ponieważ renderuje tylko to, co użytkownik może naprawdę zobaczyć.

53
00:04:00,020 --> 00:04:05,330
Mówiąc o tym, co użytkownik może zobaczyć, w tym module nauczyłeś się również, jak dodawać własne czcionki,

54
00:04:05,330 --> 00:04:08,770
a czasami nie potrzebujesz czcionki, ale obrazu, nauczyłeś się również,

55
00:04:08,900 --> 00:04:14,580
jak to zrobić, jak uwzględnić zarówno lokalną, jak i sieciową obrazy i jak je stylizować, aby wyglądały dobrze.

56
00:04:14,600 --> 00:04:20,240
Mówiąc o stylizacji, do tego używamy arkusza stylów, który nie jest składnikiem, ale klasą

57
00:04:20,240 --> 00:04:22,130
lub obiektem dostarczonym przez

58
00:04:22,130 --> 00:04:28,190
React Native, a zaletą korzystania z tego arkusza stylów jest nie tylko to, że wyciągniesz

59
00:04:28,190 --> 00:04:35,090
swoje style z kodu jsx, który chcesz zachować względnie szczupłą, zwięzłą i zwięzłą formę, ale otrzymujesz także automatyczne

60
00:04:35,180 --> 00:04:41,110
sprawdzanie poprawności swoich stylów, a React Native informuje cię, kiedy używasz stylu niepoprawnie i że

61
00:04:41,150 --> 00:04:47,860
w przyszłości możesz również uzyskać dodatkowe optymalizacje wydajności. W związku z tym możemy tylko zachęcić Cię do

62
00:04:47,860 --> 00:04:48,810
zapamiętania tego

63
00:04:48,820 --> 00:04:55,540
rozdziału, być może przejrzyj go jeszcze raz i wykorzystaj jako podstawę do dalszych postępów w kursie, w którym będziemy

64
00:04:55,540 --> 00:05:01,570
wykorzystywać wszystkie te elementy, z którymi współpracowaliśmy, i gdzie napiszemy więcej style, w których będziemy budować bardziej

65
00:05:01,570 --> 00:05:07,330
złożone interfejsy użytkownika i gdzie naprawdę będziesz potrzebować tych podstaw, których nauczyłeś się w drugim i

66
00:05:07,330 --> 00:05:11,080
tym module kursu, aby następnie zbudować niesamowite aplikacje React Native.

67
00:05:11,080 --> 00:05:11,890
Przejdźmy więc dalej.