1
00:00:02,380 --> 00:00:07,300
Pracujmy więc nad przeniesieniem całej logiki tutaj w nawigatorze aplikacji.

2
00:00:07,300 --> 00:00:13,870
Zaczęliśmy od tego fikcyjnego stosu tutaj i jest to fajne, ale ostatecznie nie to, czego potrzebujemy.

3
00:00:13,900 --> 00:00:19,390
Teraz to od Ciebie zależy, gdzie wykonasz tę konfigurację, ale ponieważ zrobiliśmy to zasadniczo wcześniej w

4
00:00:19,390 --> 00:00:20,560
pliku nawigatora sklepu.

5
00:00:20,560 --> 00:00:22,330
Będę też nadal to robić.

6
00:00:22,360 --> 00:00:24,370
Nawet z tą nową logiką.

7
00:00:24,370 --> 00:00:26,560
Więc zrobię nawigator aplikacji.

8
00:00:26,560 --> 00:00:34,190
Pozbędę się tutaj mojego stosu i pozbędę się tego importu i pozbędę się tego

9
00:00:34,190 --> 00:00:41,290
tutaj. Zostawię jednak kontener nawigacyjny i zresetuję ten import, ale ostatecznie to

10
00:00:41,290 --> 00:00:42,760
zmieni. trochę.

11
00:00:42,760 --> 00:00:49,420
Ale teraz przejdźmy do nawigatora sklepu tam przede wszystkim możemy usunąć ten import z reakcji nawigacja nie

12
00:00:49,540 --> 00:00:50,990
będzie go potrzebować.

13
00:00:51,100 --> 00:00:59,140
Na razie zostawmy resztę zamiast usuniętego importu, z którego możemy importować z stosu

14
00:00:59,350 --> 00:01:08,870
nawigacji reagującej i wszystko jest już z losowania, a ze stosu reklam importujemy tworzenie nawigatora stosów z

15
00:01:08,870 --> 00:01:12,600
rysowania ukośnego, importujemy tworzenie nawigatora rysowania.

16
00:01:12,760 --> 00:01:17,050
Teraz możemy przewinąć w dół i pozostawić tutaj domyślne opcje nawigacji.

17
00:01:17,080 --> 00:01:24,070
Na szczęście nazwa dzwonka i sposób, w jaki ogólnie konfigurujesz, i to, co możesz skonfigurować,

18
00:01:24,070 --> 00:01:30,490
tak naprawdę nie zmieniło sposobu, w jaki zastosowałeś zmienioną konfigurację, a zatem to,

19
00:01:30,880 --> 00:01:40,770
co zdecydowanie musi się zmienić, to ta część tutaj, nasz pierwszy nawigator stosów, który na razie powielę, a później usunę lub skomentowałem,

20
00:01:40,770 --> 00:01:47,940
że mam porównanie obok siebie. Stworzę nową stałą, którą będę nazywał nawigatorem stosu produktów, abyśmy

21
00:01:48,420 --> 00:01:53,130
nie mieli konfliktu nazw i że jest naprawdę oczywiste, że

22
00:01:53,130 --> 00:02:00,780
będzie to stos stron. ekrany i robimy to za pomocą funkcji tworzenia stosu nawigatora za pomocą tej

23
00:02:00,780 --> 00:02:09,770
funkcji, co pokazałem wam, zanim ta funkcja nie przyjmuje już żadnych parametrów, zamiast tego utworzę tutaj nową stałą produkty

24
00:02:09,890 --> 00:02:10,670
Navigator.

25
00:02:10,670 --> 00:02:14,750
Mamy teraz starcie nazwy, ale i tak zostanie ono usunięte.

26
00:02:14,870 --> 00:02:20,420
I to jest teraz reagujący komponent komponentu funkcjonalnego i moglibyśmy w dół dla wszystkich

27
00:02:20,420 --> 00:02:26,210
przechowywanych w osobnym pliku tylko dla tego porównania obok siebie i ponieważ mieliśmy wszystko w

28
00:02:26,420 --> 00:02:32,390
tym pliku, zanim teraz skonfiguruję wszystkie te komponenty nawigatora za pomocą naszej nawigacji Konfiguracja tutaj w

29
00:02:32,390 --> 00:02:36,480
tym pojedynczym podziale pliku jest zdecydowanie czymś, co można rozważyć.

30
00:02:36,590 --> 00:02:44,450
Oto nasz nawigator produktów i zwrócę teraz nawigator stosu kropek Nawigator nawigacyjny, jak

31
00:02:44,450 --> 00:02:52,910
się dowiedziałeś, oraz ekran kropki nawigatora stosu produktów, a wcześniej mieliśmy trzy ekrany, więc powtórzę

32
00:02:52,910 --> 00:02:54,860
to dwa razy.

33
00:02:54,860 --> 00:02:57,580
Więc mieliśmy tam trzy ekrany.

34
00:02:57,710 --> 00:03:03,730
Teraz możemy je skonfigurować, przypiszmy nazwę do pierwszego ekranu, który będzie przeglądem produktów.

35
00:03:03,980 --> 00:03:09,180
Teraz komponent, który powinien zostać załadowany, to komponent ekranu przeglądu naszych produktów.

36
00:03:09,200 --> 00:03:19,130
Zasadniczo więc to, co mapowaliśmy wcześniej dla drugiego ekranu, to nazwa produktu.

37
00:03:19,130 --> 00:03:24,530
Więc co mieliśmy tutaj i upewnij się, że zachowujesz te nazwy,

38
00:03:24,530 --> 00:03:31,400
aby cała logika nawigacyjna była w Twojej aplikacji, ponieważ nie trzeba tego zmieniać, aby to nadal

39
00:03:31,670 --> 00:03:37,660
działało, a tutaj składnik, który powinien zostać załadowany, gdy chcemy dotrzeć ten ekran jest

40
00:03:37,660 --> 00:03:45,770
szczegółowym składnikiem ekranu produktu, tak jak mieliśmy tam na dole, zreformujmy go, a dla ostatniego ekranu nazwa to koszyk.

41
00:03:45,860 --> 00:03:52,630
Co mieliśmy tutaj i chcemy przejść do ekranu serca właśnie tak.

42
00:03:52,670 --> 00:03:57,920
Teraz ustawiliśmy ten stos nawigacji z nową logiką opartą na komponentach.

43
00:03:58,010 --> 00:04:03,620
Teraz możemy zaimportować do nawigatora aplikacji, a dla taty musimy

44
00:04:03,620 --> 00:04:11,510
po prostu dodać przed nim słowo kluczowe eksportu, aby ta stała została wyeksportowana tutaj w

45
00:04:11,510 --> 00:04:21,980
tym pliku, aw nawigatorze aplikacji nie importujemy teraz nawigatora sklepu, ale importujemy nowo wyeksportowanego nawigatora produktów, który importujemy tutaj i

46
00:04:22,310 --> 00:04:29,910
do naszego kontenera nawigacji możemy teraz dodać nawigator produktów w ten sposób i możemy

47
00:04:29,910 --> 00:04:33,720
pozbyć się importu ekranu przeglądu produktów.

48
00:04:33,840 --> 00:04:35,790
Teraz wróć do nawigatora sklepu.

49
00:04:36,030 --> 00:04:38,840
Rzućmy okiem na te opcje.

50
00:04:38,840 --> 00:04:42,360
Następnie opcje nawigacji, które mieliśmy tutaj na tym stosie.

51
00:04:42,360 --> 00:04:45,160
Co z tym robimy?

52
00:04:45,160 --> 00:04:52,600
Mamy właściwie dwie opcje w naszym nawigatorze produktów na starym nawigatorze ze starą logiką

53
00:04:53,230 --> 00:04:55,370
- ikona czynu.

54
00:04:55,480 --> 00:05:02,800
Ten stos powinien mieć w szufladzie, którą dodamy później. Drugą są nasze domyślne opcje nawigacji, które powinny

55
00:05:03,010 --> 00:05:07,660
być stosowane na wszystkich ekranach, które są częścią tego nawigatora.

56
00:05:07,660 --> 00:05:12,250
I faktycznie jest też trzecie miejsce, w którym konfigurujemy rzeczy w przeszłości.

57
00:05:12,280 --> 00:05:14,150
I to było na niektórych ekranach.

58
00:05:14,320 --> 00:05:21,680
Spójrzmy na ekran przeglądu produktów, który znajduje się w folderze sklepu, jeśli przewiniemy w dół.

59
00:05:21,760 --> 00:05:28,870
Mieliśmy tę właściwość opcji nawigacji, którą dodaliśmy do obiektu funkcjonalnego ekranu przeglądu produktów i była to funkcja, w której

60
00:05:28,870 --> 00:05:33,850
konfigurujemy takie rzeczy, jak tytuł nagłówka, ale także to, co znajduje się po

61
00:05:33,850 --> 00:05:37,630
lewej i prawej stronie nagłówka, dzięki tej nowej logice.

62
00:05:37,670 --> 00:05:40,650
Już tego nie robisz.

63
00:05:40,650 --> 00:05:46,940
Zamiast tego możemy skopiować cały zestaw tutaj.

64
00:05:47,170 --> 00:05:48,740
Wszystko to możemy skopiować.

65
00:05:48,820 --> 00:05:54,680
Możemy to skomentować tutaj w komponencie ekranu i przejść do komponentu nawigatora aplikacji.

66
00:05:54,820 --> 00:06:00,640
Przepraszam do kupowania komponentu nawigatora, w którym ustawiliśmy nawigację stosu, a teraz na

67
00:06:00,640 --> 00:06:08,830
ekranie, gdzie chcemy mieć te opcje, możemy dodać trzeci rekwizyt, a to jest właściwość de options i dwie opcje.

68
00:06:08,830 --> 00:06:16,990
Możesz parsować dokładnie to, co wcześniej miałeś w składniku, więc przekazanie funkcji jest prawidłowe.

69
00:06:17,050 --> 00:06:18,640
Który otrzymuje parametr

70
00:06:21,330 --> 00:06:27,900
danych NAF, który następnie zwraca obiekt konfiguracyjny, konkretna wartość tego parametru zostanie wprowadzona przez

71
00:06:27,900 --> 00:06:34,950
nawigację w reakcji i nazwy konfiguracji, które możemy ustawić tutaj, rzeczy, które możemy skonfigurować, nie uległy

72
00:06:34,950 --> 00:06:35,540
zmianie.

73
00:06:35,670 --> 00:06:38,550
Więc nadal możemy ustawić tytuł nagłówka przed lub w lewo.

74
00:06:38,550 --> 00:06:41,330
To wszystko jest dokładnie takie samo, jak się nauczyłeś.

75
00:06:41,340 --> 00:06:43,290
Działa dokładnie w ten sam sposób.

76
00:06:43,350 --> 00:06:47,760
Na szczęście teraz mogliśmy to zrobić tutaj i nawigator sklepu.

77
00:06:47,760 --> 00:06:55,200
Ale to oczywiście szybko stałoby się bardzo duże, gdybyśmy mieli tutaj wszystkie różne konfiguracje

78
00:06:55,440 --> 00:06:57,630
specyficzne dla ekranu.

79
00:06:57,630 --> 00:07:00,390
Więc tak naprawdę nie zrobię tego tutaj.

80
00:07:00,450 --> 00:07:03,150
Zamiast tego widzę dwie opcje.

81
00:07:03,150 --> 00:07:10,170
Jednym z nich jest faktyczne konfigurowanie ekranu nawigatora stosu produktów w komponencie ekranu.

82
00:07:10,170 --> 00:07:14,250
Drugim jest to, że po prostu trzymamy nasze opcje i takie podejście zastosuję.

83
00:07:14,730 --> 00:07:23,850
Wracając do przeglądu produktów, skomentuję to z powrotem, ale teraz, tutaj nie ustawiliśmy już, działa jako

84
00:07:23,900 --> 00:07:33,110
wartość dla propozycji opcji nawigacji, ale po prostu eksportujemy go jako stałą stałą, którą musimy nadać

85
00:07:33,110 --> 00:07:42,360
nazwie, a ja Nazwie tę opcję ekranu Żadne opcje ekranu nie posiadają tej funkcji i eksportujemy ją

86
00:07:42,360 --> 00:07:43,670
po nazwie.

87
00:07:43,850 --> 00:07:49,360
Nie koliduje z eksportem komponentów, ponieważ robimy to z domyślną wartością tutaj.

88
00:07:49,390 --> 00:07:57,340
Więc teraz eksportujemy funkcję konfiguracji, a następnie nawigator sklepu możemy ją zaimportować, więc oprócz

89
00:07:57,340 --> 00:08:03,940
importowania ekranu przeglądu produktów z tego pliku, możemy teraz połączyć to

90
00:08:03,970 --> 00:08:12,940
z importem nazwanym, w którym importujemy do opcji ekranu, a następnie tutaj dwie opcje na ten ekran.

91
00:08:13,020 --> 00:08:17,840
Po prostu mijam wskaźnik na tej funkcji, nie wykonuj go, tylko skierowałem go.

92
00:08:17,910 --> 00:08:24,580
Reagujmy na nawigację wykonaną dla Ciebie, aby mogła zmieścić się w konkretnej

93
00:08:24,610 --> 00:08:32,780
wartości dla tej funkcji parametrów danych NAF jeden raz i przy tym ekranie jest skonfigurowany.

94
00:08:32,890 --> 00:08:36,490
Teraz, jeśli uratujemy te kolizje reklam, ponieważ mamy tam tę nazwę.

95
00:08:36,910 --> 00:08:41,470
Aby rozwiązać ten problem, upewnijmy się, że wszyscy obsługujemy pozostałe opcje.

96
00:08:41,470 --> 00:08:47,560
Teraz opcja rysowania jest czymś, na co przyjrzę później, kiedy dodamy losowanie dla domyślnych

97
00:08:47,560 --> 00:08:48,850
opcji nawigacji.

98
00:08:48,850 --> 00:08:54,220
Dobrą wiadomością jest to, że wciąż możemy zastosować te, których nie musimy konfigurować wszystkiego na poziomie ekranu.

99
00:08:54,220 --> 00:08:58,980
Jeśli mamy wspólną konfigurację, która wpływa na wszystkie ekrany nawigatora.

100
00:08:59,080 --> 00:09:05,320
Jak myślisz, jak możemy tutaj skonfigurować takie ogólne opcje dla wszystkich tych bezpłatnych ekranów.

101
00:09:05,320 --> 00:09:09,200
Ustawiliśmy je bezpośrednio w nawigatorze.

102
00:09:09,310 --> 00:09:15,520
Mamy też małą właściwość opcji ekranu, więc nie nazwane opcje, ale opcje ekranu.

103
00:09:15,610 --> 00:09:21,280
Są to jednak opcje, które zostaną zastosowane na każdym ekranie tutaj, a opcje specyficzne dla ekranu

104
00:09:21,310 --> 00:09:25,820
zostaną połączone z tymi ogólnymi opcjami, tak jak wcześniej w trakcie kursu.

105
00:09:25,830 --> 00:09:29,740
Teraz przekazujemy nasz domyślny obiekt opcji nawigacji.

106
00:09:29,850 --> 00:09:36,360
Więc ten obiekt tam po prostu podaję to jako wartość opcji ekranowych i to wszystko.

107
00:09:36,360 --> 00:09:41,280
Teraz możemy komentować jako nawigator produktów i zapisać wszystko.

108
00:09:41,360 --> 00:09:48,440
Teraz, gdy to zrobimy, nadal nie widzimy rezultatu, ponieważ w tym pliku nawigatora sklepu wciąż mamy

109
00:09:48,440 --> 00:09:55,370
dużo kodu, który używa starego nawigatora lub starej logiki nawigatora i powoduje tutaj problem.

110
00:09:55,400 --> 00:10:03,090
Teraz, aby nadal zobaczyć wynik, tymczasowo skomentuję to wszystko tylko tymczasowo i zapiszę

111
00:10:03,090 --> 00:10:03,710
ponownie.

112
00:10:03,750 --> 00:10:08,660
Aby to się odbudowało i zobaczysz, że teraz pojawia się błąd.

113
00:10:08,720 --> 00:10:14,300
Cóż, jest jedna rzecz, którą faktycznie musimy dostosować, a składnik przeglądu produktu w naszej

114
00:10:14,300 --> 00:10:16,800
opcji ekranu steruje nagłówkiem w lewo.

115
00:10:16,880 --> 00:10:25,060
To musi być teraz funkcja, która zwraca nasz znacznik JSA X i to samo dla prawego nagłówka.

116
00:10:25,070 --> 00:10:30,260
Musimy więc przekonwertować obie funkcje na funkcje i możesz to zrobić, dodając pustą listę parametrów, a

117
00:10:30,410 --> 00:10:31,580
następnie strzałkę tutaj.

118
00:10:31,670 --> 00:10:38,090
Na marginesie możesz zaakceptować parametr tutaj, jeśli chcesz, i to byłyby rekwizyty, ponieważ tak naprawdę

119
00:10:38,090 --> 00:10:43,910
jest to teraz element reagujący, znajdujący tutaj konkretną wartość dla rekwizytów i

120
00:10:43,910 --> 00:10:50,240
poprzez reakcję nawigacji oraz wartości, które można uzyskać z tego miejsca, mogą być znalezione w

121
00:10:50,240 --> 00:10:58,660
oficjalnych dokumentach z tą zmianą dokonaną, jeśli teraz zapewniamy bezpieczeństwo, teraz ponownie się tutaj uruchomi i ponownie zobaczymy ten ekran.

122
00:10:58,660 --> 00:11:01,830
Teraz zdecydowanie wybieramy naszą konfigurację.

123
00:11:01,840 --> 00:11:09,360
Pamiętaj, że losowanie nie zadziała, ponieważ nie dodaliśmy jeszcze losowania i nawigacji, dlatego

124
00:11:09,360 --> 00:11:17,140
też nauczyliśmy się, jak możemy konfigurować nasze komponenty, nasze ekrany i ogólny nawigator

125
00:11:17,140 --> 00:11:19,930
stosów z nową logiką.

126
00:11:19,930 --> 00:11:26,020
Nadszedł czas, aby kontynuować portowanie Zdecydowanie możesz wykonać kolejne kroki samemu i port,

127
00:11:26,020 --> 00:11:32,620
aby wyświetlić określone opcje dotyczące szczegółów produktu i ekranu karty, a następnie przejdziemy do następnego

128
00:11:32,620 --> 00:11:33,090
stosu.

129
00:11:33,190 --> 00:11:35,230
I oczywiście również pozwać do losowania.