1
00:00:02,250 --> 00:00:08,640
Chcę zacząć od najbardziej podstawowej formy nawigacji, a także najpopularniejszej formy nawigacji, jaką masz w

2
00:00:08,640 --> 00:00:14,820
dowolnej aplikacji mobilnej, i to jak poruszać się między ekranami i do tego skonfigurować

3
00:00:14,820 --> 00:00:19,030
tak zwany stos i nawigator, ponieważ strony lub ekrany.

4
00:00:19,110 --> 00:00:21,630
Użyję tych słów jako synonimów tutaj.

5
00:00:21,630 --> 00:00:26,040
Tak więc strony i ekrany są w zasadzie zarządzane na stosie stron.

6
00:00:26,250 --> 00:00:32,220
I za każdym razem, gdy przejdziesz do nowego ekranu, zostanie on przesunięty na ten stos na najwyższym ekranie

7
00:00:32,220 --> 00:00:34,570
na stosie zawsze będzie widoczny ekran.

8
00:00:34,650 --> 00:00:39,710
A kiedy klikniesz przycisk Wstecz, pojawi się ten ekran, na którym byłeś, zniknie.

9
00:00:39,840 --> 00:00:45,600
A ponieważ zawsze widzisz w aplikacji najwyższy ekran, zobaczysz ekran poniżej tego, z

10
00:00:45,600 --> 00:00:46,950
którego przyszedłeś.

11
00:00:46,950 --> 00:00:49,370
Dlatego nazywa się Nawigator stosu.

12
00:00:49,390 --> 00:00:50,490
To jest wściekłość.

13
00:00:50,490 --> 00:00:53,100
Po prostu użyjmy go, a stanie się to bardzo jasne.

14
00:00:53,370 --> 00:00:55,080
Zaimportowaliśmy z zareaguj.

15
00:00:55,080 --> 00:00:59,870
Nawigacja i jej nazwa były nazwą funkcji.

16
00:00:59,880 --> 00:01:05,550
Tak naprawdę musimy utworzyć taki nawigator stosów. Utwórz nawigator stosów.

17
00:01:05,550 --> 00:01:11,890
Teraz jedna ważna uwaga: ta składnia jest poprawna, jeśli używasz wersji reagowania na nawigację za darmo, jeśli

18
00:01:11,910 --> 00:01:17,880
używasz opcji reagowania na awersję do nawigacji, ponieważ zmieniła się nieznacznie, musisz zainstalować dodatkowy pakiet, jak

19
00:01:17,880 --> 00:01:19,620
wspomniano wcześniej na wykładzie.

20
00:01:20,700 --> 00:01:29,610
Musisz uruchomić npm zainstaluj kreskę kreskę zapisz reaguj nawigację kreska kreska stos i zainstaluj ten dodatkowy pakiet, a po jej zainstalowaniu

21
00:01:30,390 --> 00:01:36,990
zaimportuj stwórz nawigator stosu od reaguj jako nawigacyjny stos kreska zamiast reagować nawigacja to niewielka zmiana,

22
00:01:36,990 --> 00:01:42,900
której nie musisz wprowadzać cztery utwórz nawigator stosu, a kiedy tworzymy naszych nawigatorów,

23
00:01:42,900 --> 00:01:49,140
na przykład krany lub narysuj nawigator później, będziesz mieć odpowiednie pakiety, które musisz zainstalować, aby

24
00:01:49,140 --> 00:01:54,990
reagować na kran nawigacyjny i tak dalej, wszystko to jest omówione w wykładzie,

25
00:01:55,020 --> 00:01:57,370
który znajdziesz przed tym wykładem.

26
00:01:57,460 --> 00:02:03,150
Teraz tutaj nagrałem ten kurs z darmową wersją reagowania nawigacji, która poza tym jest dokładnie taka

27
00:02:03,150 --> 00:02:03,520
sama.

28
00:02:03,510 --> 00:02:08,370
Różni się tylko import, dlatego zaimportuję tutaj z reagującej nawigacji.

29
00:02:08,430 --> 00:02:14,310
Ale jeśli podążasz za wersją 4, to reagujesz na bash nawigacyjny stos dodatkowych pakietów,

30
00:02:14,300 --> 00:02:15,730
które musisz zainstalować.

31
00:02:15,870 --> 00:02:22,020
Tak właśnie reaguje nawigacja w tej bibliotece, tworzysz tak zwane nawigatory, które w

32
00:02:22,030 --> 00:02:30,090
końcu można powiedzieć, że obiekty faktycznie reagują na komponenty, ponieważ okaże się, że zawierają całą konfigurację nawigacji, która

33
00:02:30,090 --> 00:02:34,860
zawiera wszystkie informacje o różnych ekranach i które wykona ciężkie

34
00:02:34,860 --> 00:02:40,350
podnoszenie ładując różne ekrany i wykonując przyjemne płynne przejścia dla przejścia z

35
00:02:40,350 --> 00:02:42,270
A do B.

36
00:02:42,270 --> 00:02:49,710
Musimy więc zaimportować tworzenie nawigatora stosu, a następnie możemy po prostu wywołać, że teraz tworzenie nawigatora stosu wymaga

37
00:02:49,710 --> 00:02:56,130
co najmniej jednego argumentu i jest to obiekt javascript, w którym konfigurujemy różne ekrany, między

38
00:02:56,220 --> 00:03:02,940
którymi chcemy się poruszać, od tej aplikacji, którą chcę aby rozpocząć na ekranie kategorii i jeśli

39
00:03:02,940 --> 00:03:09,450
kliknę tam kategorię, chcę przejść do ekranu kategorii posiłków, a jeśli następnie dotknę przepisu na

40
00:03:09,450 --> 00:03:16,530
posiłku, chcę przejść do ekranu szczegółów posiłku, aby były nam potrzebne trzy ekrany w naszym nawigatorze stosów,

41
00:03:16,770 --> 00:03:23,610
aby były to trzy ekrany, między którymi można się poruszać za pomocą tego wzorca stosu, popychając

42
00:03:23,610 --> 00:03:30,300
strony i usuwając je, i dlaczego nie potrzebujemy ulubionych i filtrów, ponieważ filtry zostaną później dodane

43
00:03:30,300 --> 00:03:37,350
za pomocą pasek boczny będzie to alternatywa dla tego stosu tutaj, a ulubione również jako alternatywa dla

44
00:03:37,350 --> 00:03:42,960
tego stosu będziemy mogli przejść tam z kranami później, ale nie teraz.

45
00:03:42,960 --> 00:03:48,990
Zacznijmy więc od tej podstawowej nawigacji opartej na stosie, w której możemy przechodzić między

46
00:03:48,990 --> 00:03:56,850
ekranami kategorii, kategoriami, posiłkami. Ekran, a ty szczegółowo, informujemy, że reagujemy na nawigację na temat tych trzech ekranów, rejestrując

47
00:03:57,180 --> 00:04:05,500
je jako pary kluczowych wartości, które przyjmujesz jako dowolny identyfikator o dowolnej nazwie. możesz wybrać na przykład kategorie, ale ta

48
00:04:05,530 --> 00:04:11,500
nazwa należy do ciebie, ponieważ konwencja nazewnictwa nieruchomości rozpoczyna się tutaj od dużej litery,

49
00:04:11,500 --> 00:04:14,470
ale nie musisz tego robić technicznie.

50
00:04:14,650 --> 00:04:20,620
Więc używasz dowolnego identyfikatora jako nazwy właściwości w tym obiekcie, który przekazujesz,

51
00:04:20,740 --> 00:04:29,920
aby utworzyć nawigator stosów, a teraz wartość w najprostszej postaci jest po prostu wskaźnikiem w składniku de reagującym,

52
00:04:29,920 --> 00:04:34,690
który chcesz załadować jako ekran dla tego ekranu.

53
00:04:34,690 --> 00:04:43,890
Tak więc w moim przypadku byłby to ekran kategorii. Wszystkie importuj ten ekran wszystkich kategorii importu z

54
00:04:44,760 --> 00:04:51,740
ekranu kategorii ekranów. Mogę to zaimportować, ponieważ jest to mój domyślny eksport.

55
00:04:51,940 --> 00:04:59,410
Teraz mapujemy te dwie kategorie, co pozwala nam później stwierdzić, że nawigacja czy biblioteka, z

56
00:04:59,410 --> 00:05:02,920
której korzystamy, powinna załadować ekran kategorii.

57
00:05:02,920 --> 00:05:08,690
Teraz, jak powiedziałem, nie jest to jedyny ekran, którego potrzebuję. Chcę również mieć kategorię posiłków.

58
00:05:08,710 --> 00:05:14,590
Są to więc systemy drugiego ekranu. Ten ekran pokaże wszystkie posiłki dla wybranej kategorii,

59
00:05:15,310 --> 00:05:21,550
dla których mamy wiele składników i to jest przygotowany przez nas ekran kategorii posiłków, który importujemy

60
00:05:21,550 --> 00:05:29,680
z ekranów ekranu kategorii posiłków, więc w tym roku mapujemy według w sposób, w jaki wspomniałem, że jest to najprostsza forma

61
00:05:29,680 --> 00:05:34,720
mapowania, po prostu posiadając nazwę właściwości, a następnie wskaźnik na komponencie, który

62
00:05:35,290 --> 00:05:42,040
chcesz załadować, możesz również przekazać obiekt tutaj i ustawić właściwość screen na tym obiekcie, a następnie wskazać

63
00:05:42,100 --> 00:05:44,470
na komponent, który chcesz załadować.

64
00:05:44,470 --> 00:05:46,030
Dlaczego miałbyś to zrobić?

65
00:05:46,090 --> 00:05:52,540
Ponieważ teraz możesz również skonfigurować tutaj dodatkową konfigurację oprócz ekranu, możesz ustawić niektóre domyślne opcje

66
00:05:52,540 --> 00:05:57,220
ekranu itd., Ale nie jest to coś, o co musimy się

67
00:05:57,730 --> 00:06:02,740
teraz martwić, zajmiemy się tym później w tym module chcę już tylko

68
00:06:02,740 --> 00:06:08,230
wspomnieć, że jest to skrót, jest to dłuższa forma mówienia reakcji nawigacyjnej, które

69
00:06:08,230 --> 00:06:14,170
ekrany powinny zostać załadowane, dla którego identyfikatora mówiącego, że potrzebujemy trzeciego identyfikatora, i to

70
00:06:14,170 --> 00:06:21,060
jest identyfikator, który powinien załadować nasz szczegółowy ekran. nazwij to szczegół posiłku i chcę wskazać ekran mojego

71
00:06:21,090 --> 00:06:29,110
szczegółowego posiłku, więc zaimportuję ekran szczegółów posiłku. A teraz przejdźmy do folderu ekranów i tam jest ekran szczegółowego posiłku

72
00:06:29,150 --> 00:06:31,760
i ponownie użyję tutaj skrótu.

73
00:06:31,760 --> 00:06:35,830
Przydałaby nam się ta dłuższa forma, ale użyję tego skrótu w punkcie na szczegółowym ekranie posiłku.

74
00:06:36,710 --> 00:06:40,370
Tak więc przy tej podstawowej konfiguracji mówimy, że nawigacja reaguje.

75
00:06:40,370 --> 00:06:49,020
Hej, to są ekrany, które będą mogły się teraz przemieszczać, jednak same dane niewiele zdziałają.

76
00:06:49,030 --> 00:06:49,540
Dlaczego.

77
00:06:49,840 --> 00:06:57,600
Ponieważ tworzymy ten nawigator stosów, ale nic z nim nie robimy, więc zmieńmy ten sposób, tworząc

78
00:06:58,080 --> 00:07:05,150
nawigator stosów faktycznie zwraca kontener nawigacyjny i okazuje się, że jest to komponent reagujący.

79
00:07:05,150 --> 00:07:07,070
To wszystko nazywa się jako nawigator posiłków.

80
00:07:07,080 --> 00:07:10,620
Brzmi jak trafna nazwa, ponieważ to właśnie tutaj mamy.

81
00:07:10,620 --> 00:07:15,570
A teraz przechowujemy komponent reagujący utworzony przez stos Nawigatora, który jest

82
00:07:15,570 --> 00:07:22,380
zasadniczo komponentem reagującym, z całym ciężkim podnoszeniem ładowania różnych ekranów i odtwarzaniem animacji, ten komponent

83
00:07:22,380 --> 00:07:25,160
reagujący jest przechowywany w nawigatorze posiłków.

84
00:07:25,170 --> 00:07:32,830
Teraz możemy wyeksportować tutaj nawigator posiłków i spróbować użyć go w ten sposób i uchwycić nas, aby wyrenderować go na

85
00:07:32,830 --> 00:07:38,410
ekranie i zobaczyć, co się stanie, ale tak naprawdę nawigacja działa nieco inaczej.

86
00:07:38,470 --> 00:07:45,350
Musisz także utworzyć kontener aplikacji w tym kontenerze aplikacji, aby zawinąć swoją trasę.

87
00:07:45,440 --> 00:07:50,370
Więc twój główny nawigator w tym przypadku mamy tylko jednego, musimy tylko ułożyć Nawigatora w stos.

88
00:07:50,390 --> 00:07:51,900
Więc zawińmy to tym.

89
00:07:51,980 --> 00:07:57,740
Owińmy nawigację po posiłkach lub utwórz ją ponownie, wywołując funkcję tworzenia kontenera aplikacji, a następnie

90
00:07:57,740 --> 00:08:01,850
po prostu przekaż nawigator posiłków jako argument tworzenia kontenera aplikacji.

91
00:08:01,940 --> 00:08:03,880
Tworzy również kontener nawigacyjny.

92
00:08:03,950 --> 00:08:05,670
Więc daje ci również składnik reagujący.

93
00:08:05,750 --> 00:08:08,120
Ale tak naprawdę nie jest to składnik reagujący.

94
00:08:08,120 --> 00:08:15,890
Powinieneś użyć w swoim kodzie ASX, ponieważ zawiera on teraz wszystkie metadane dotyczące nawigacji w ogóle na temat reagowania na

95
00:08:15,890 --> 00:08:17,930
nawigację i tak dalej.

96
00:08:17,930 --> 00:08:24,680
Więc jest to po prostu wzorzec, który musisz zawinąć swoją trasą w najważniejszego nawigatora i użyć tego komponentu powrotu reagowania

97
00:08:24,680 --> 00:08:30,260
w kodzie J to X, a następnie zasadniczo konfigurację, którą zawsze będziesz mieć podczas pracy z

98
00:08:30,260 --> 00:08:35,570
reagującą nawigacją, później też się nauczysz. jak korzystać z wielu nawigatorów w jednej aplikacji.

99
00:08:35,570 --> 00:08:41,870
Nawiasem mówiąc, na razie mamy ten i eksportujemy ten komponent, który tworzy koniec.

100
00:08:41,870 --> 00:08:44,680
Teraz w pościgu za aplikacjami możemy zacząć korzystać z tego komponentu.

101
00:08:44,720 --> 00:08:56,720
Czy widzieliśmy coś na ekranie, więc chodźmy tam i zaimportuj nawigator posiłków z nawigacji nawigator

102
00:08:56,930 --> 00:08:58,640
posiłków.

103
00:08:58,640 --> 00:09:04,040
Teraz, jak wspomniałem, nawigator posiłków jest teraz tylko składnikiem reagującym, więc ostatecznie możemy to

104
00:09:04,040 --> 00:09:08,390
po prostu zwrócić, zamiast wracać do widoku z naszym tekstem tutaj.

105
00:09:08,420 --> 00:09:13,550
Zwrócę nawigator posiłków, a ponieważ jest to element reagujący, mogę po prostu

106
00:09:13,550 --> 00:09:18,020
przećwiczyć kod J Isaaca z tatą, jeśli go uratujemy.

107
00:09:18,160 --> 00:09:20,890
Przyjrzeliśmy się naszej aplikacji, która się ładuje

108
00:09:24,290 --> 00:09:27,040
i konieczne może być ręczne ponowne załadowanie aplikacji.

109
00:09:27,040 --> 00:09:33,490
Po ponownym załadowaniu powinieneś zobaczyć ekran kategorii, co oczywiście jest ogromne, ponieważ oznacza to, że

110
00:09:34,000 --> 00:09:35,360
to działa.

111
00:09:35,440 --> 00:09:41,710
Teraz zauważ również, że domyślnie wszyscy dostają ładny nagłówek, który ma domyślny wygląd platformy

112
00:09:41,710 --> 00:09:49,180
dla IO, ponieważ jest czysty, płaski, ma pod nim cienką linię dla Androida, jest bardziej swobodny, ponieważ

113
00:09:49,180 --> 00:09:50,720
ma niewielki cień.

114
00:09:50,770 --> 00:09:55,600
Teraz oczywiście brakuje mu tytułu, a dowiesz się, jak możemy go dodać w

115
00:09:55,600 --> 00:10:01,450
tym module, ale wyciągamy to z pudełka, a to automatycznie szanuje wszelkie nacięcia, które mogą być

116
00:10:01,450 --> 00:10:07,060
konieczne, aby pozostać tak daleko, więc automatycznie używa takiego widok bezpiecznego obszaru i to wszystko, o

117
00:10:07,060 --> 00:10:12,520
czym wspomniałem w ostatnim module kursu, gdy masz ten komponent i czasami go potrzebujesz, na

118
00:10:12,520 --> 00:10:19,360
przykład podczas budowania aplikacji z reagującą nawigacją reaguj nawigacja już zawija twoje widoki w bezpieczny obszar, przynajmniej zrobi dużo

119
00:10:19,360 --> 00:10:24,430
pracy, którą musielibyście wykonać, w przeciwnym razie upewni się, że nagłówek wygląda dobrze i

120
00:10:24,430 --> 00:10:29,890
jest to wielka rzecz, ponieważ ręczne utworzenie nagłówka, który wygląda dobrze na wszystkich urządzeniach, jest

121
00:10:29,890 --> 00:10:31,650
w rzeczywistości dość pracochłonne.

122
00:10:31,840 --> 00:10:33,210
To właśnie tu dostajemy.

123
00:10:33,220 --> 00:10:36,550
Oczywistym pytaniem jest teraz, w jaki sposób możemy dotrzeć do naszych innych ekranów.