1
00:00:02,230 --> 00:00:06,820
Aby to zrobić, warto zacząć tutaj w aplikacji. plik js.

2
00:00:06,820 --> 00:00:10,370
Teraz zostaw ten terminal otwarty tutaj i ten proces

3
00:00:10,390 --> 00:00:15,280
oczywiście uruchomiony, aby zmiany w kodzie były automatycznie odzwierciedlane w emulatorach i

4
00:00:15,340 --> 00:00:18,420
teraz zobaczmy, jak możemy zacząć od tego.

5
00:00:18,460 --> 00:00:23,590
Wspomniałem już w pierwszym module kursu, że React Native dotyczy wbudowanych podstawowych

6
00:00:23,590 --> 00:00:28,870
elementów, takich jak tekst i widok. Widok byłby twój div z tworzenia stron

7
00:00:28,870 --> 00:00:32,920
internetowych na wypadek, gdybyś był programistą, którym prawdopodobnie jesteś, jeśli znasz React.

8
00:00:32,920 --> 00:00:34,790
Jest to więc świetny

9
00:00:34,810 --> 00:00:40,050
komponent kontenerowy, możesz go stylizować tak, jak go tu widzisz i owijać nim inne treści.

10
00:00:40,240 --> 00:00:44,930
Teraz z drugiej strony tekst jest podstawowym składnikiem tekstu wyjściowego, to

11
00:00:44,930 --> 00:00:49,870
jest jego cel, nie tam, aby wydrukować obraz, ale tam, aby wydrukować tekst.

12
00:00:49,870 --> 00:00:55,540
Teraz to, czego nie możesz zrobić w React Native, a to pierwsza ważna rzecz, nie możesz na

13
00:00:55,540 --> 00:00:57,810
przykład wyprowadzać tekstu między takimi widokami.

14
00:00:57,910 --> 00:01:04,120
Jeśli spróbujemy zapisać to bez tego opakowania tekstowego, zobaczysz błąd. Tak przy okazji, ekran będzie od

15
00:01:04,120 --> 00:01:09,880
czasu do czasu wyświetlany podczas pracy z React Native, daje błąd,

16
00:01:09,880 --> 00:01:15,910
wyjaśnia, co poszło nie tak. Tutaj na przykład dość wyraźny komunikat o błędzie mówi nam, że ciągi

17
00:01:15,910 --> 00:01:17,800
tekstowe muszą być renderowane w elemencie tekstowym i

18
00:01:17,950 --> 00:01:19,330
dlaczego jest to takie ważne?

19
00:01:19,330 --> 00:01:21,100
Dlaczego to podkreślam?

20
00:01:21,220 --> 00:01:24,590
Ponieważ jest to ważna różnica w tworzeniu stron internetowych, tam możesz

21
00:01:24,610 --> 00:01:27,850
umieścić tekst w dowolnym miejscu. Podczas tworzenia stron

22
00:01:27,970 --> 00:01:35,800
internetowych możesz mieć div, a pomiędzy tagami otwierającymi i zamykającymi div, możesz mieć dowolny tekst, a to nie będzie działać w

23
00:01:35,800 --> 00:01:41,500
React Native, nie tylko dlatego, że używamy div, który nie jest tam obsługiwany, ale

24
00:01:41,650 --> 00:01:49,810
oczywiście dlatego, że na React Native, naprawdę możesz wyprowadzać tekst tylko między tagami tekstowymi, więc musisz użyć tego komponentu tekstowego dostarczonego przez

25
00:01:49,810 --> 00:01:56,530
React Native, aby wyprowadzić tekst, i to jest zasadnicza różnica w Internecie, gdzie możesz wyrzucać tekst w dowolnym

26
00:01:56,530 --> 00:02:02,560
miejscu i w React Native, to sposób ważniejsze jest to, że używasz odpowiedniego wbudowanego komponentu do

27
00:02:02,560 --> 00:02:09,070
zadania, które chcesz wykonać, i do stylizacji, do konfigurowania kontenera, w którym budujesz inną zawartość, która byłaby

28
00:02:09,070 --> 00:02:15,070
widokiem, do wyprowadzania tekstu, który mógłby być tekstem. Na przykład do wyprowadzenia obrazu

29
00:02:15,070 --> 00:02:20,460
będziesz mieć komponent obrazu. Więc tak działa React Native i

30
00:02:20,860 --> 00:02:28,180
mówiąc o stylizacji, układaniu, widok ma to jako główne zadanie, głównie tam, aby zastosować style i układać

31
00:02:28,450 --> 00:02:31,070
zawartość, którą tam masz i

32
00:02:31,180 --> 00:02:34,050
mówiąc o tym, zacznijmy od układu.

33
00:02:34,360 --> 00:02:39,580
Powiedzmy, że w naszej aplikacji chcemy mieć na tym ekranie dwa główne obszary. Na górze chcę pozwolić użytkownikowi na

34
00:02:39,580 --> 00:02:45,850
wprowadzenie tekstu, a po prawej stronie chcę mieć przycisk potwierdzający ten wybór, a poniżej tego,

35
00:02:45,850 --> 00:02:46,720
więc

36
00:02:46,720 --> 00:02:47,640
jest to

37
00:02:47,650 --> 00:02:53,110
pierwsza część, obszar wprowadzania, a poniżej mamy druga część i to jest lista

38
00:02:53,110 --> 00:02:54,530
celów wpisanych przez użytkownika.

39
00:02:54,550 --> 00:03:00,640
Dlatego też tutaj w aplikacji. js, możemy zacząć od widoku zawijania, ponieważ

40
00:03:00,640 --> 00:03:06,280
tak jak w normalnym React, musisz mieć jeden komponent nadrzędny, który zwykle będzie widokiem w

41
00:03:06,280 --> 00:03:10,590
React Native, ponieważ daje to najwięcej opcji układu i stylów oraz

42
00:03:10,780 --> 00:03:17,910
wewnątrz tego widoku, moglibyśmy mieć inny widok dla obszaru wprowadzania, w którym następnie dodajemy nasze dane wejściowe, a poniżej

43
00:03:17,970 --> 00:03:23,860
tego, jeszcze inny widok, aby mieć naszą listę celów, a ja pozbędę się tego tekstu i

44
00:03:23,860 --> 00:03:31,350
jest całkiem normalne w React Native, że masz całkiem sporo widoków zagnieżdżonych w sobie, dzięki czemu można zbudować dowolny układ.

45
00:03:31,380 --> 00:03:38,150
A teraz przy okazji pozbądźmy się tego kontenera, a także tego przypisania stylu i zacznijmy od

46
00:03:38,150 --> 00:03:40,230
tego wszystkiego od zera.

47
00:03:40,250 --> 00:03:46,100
Ważne na teraz, że każdy element dostarczany przez React Native ma swoje własne zadanie, nie ma

48
00:03:46,100 --> 00:03:51,560
tak wielu składników, ale te, które tam są, mają jasno określone role, a następnie budujesz

49
00:03:51,560 --> 00:03:56,510
swój interfejs użytkownika, zagnieżdżając te składniki w zależności od tego, co chcesz osiągnąć,

50
00:03:56,510 --> 00:04:01,550
na przykład jeśli chcesz zbudować układ, zaczynasz od zagnieżdżenia kilku widoków, a następnie,

51
00:04:01,910 --> 00:04:07,040
gdy jesteś w części, w której chcesz wyprowadzać zawartość, zaczniesz dodawać teksty i tak

52
00:04:07,250 --> 00:04:14,960
dalej, a my Zrobię to wszystko podczas następnych wykładów. Zawsze możesz także przejść do oficjalnych dokumentów React Native, a tam, gdzie klikniesz

53
00:04:14,960 --> 00:04:21,740
Przewodniki, Komponenty i interfejsy API, uzyskasz przegląd tych podstawowych elementów składowych. Znajdziesz tutaj widok, tekst, obraz, tekst, o którym wspomniałem

54
00:04:21,740 --> 00:04:27,320
już wcześniej, oraz kilka innych podstawowych składników i zobaczysz prawie wszystkie z nich lub

55
00:04:27,350 --> 00:04:32,720
większość z nich podczas tego kursu, a to jest świetne miejsce do nurkowania głębiej

56
00:04:32,720 --> 00:04:37,370
i dowiedz się więcej na ich temat, a jak już wiesz, czy

57
00:04:37,370 --> 00:04:44,360
pominiesz te specyficzne dla platformy, które są bardziej niszowe, nie ma tak wielu podstawowych komponentów, tylko około 10

58
00:04:44,390 --> 00:04:51,110
podstawowych komponentów i tak działa React Native. Niemniej jednak będziesz mógł zbudować dowolną

59
00:04:51,110 --> 00:04:53,690
aplikację, jak chcesz.