1
00:00:02,410 --> 00:00:05,910
Większość naszych plików nie musi się zmieniać.

2
00:00:06,040 --> 00:00:12,220
Musimy jednak zmienić to, co dzieje się w plikach nawigacyjnych i folderze

3
00:00:13,000 --> 00:00:19,540
nawigacyjnym w aplikacji J. S. pamiętasz renderowanie kontenera nawigacyjnego tutaj,

4
00:00:19,570 --> 00:00:25,510
a kontener nawigacyjny jest tutaj tylko niestandardowym komponentem, w którym w końcu mamy logikę sprawdzania,

5
00:00:25,580 --> 00:00:31,330
czy użytkownik jest uwierzytelniony, a następnie renderujemy nawigator sklepu, który jest naszym nawigatorem tras

6
00:00:31,330 --> 00:00:36,550
utworzonym tutaj z nawigacją reagującą i właśnie tam rzeczy muszą się teraz zmienić.

7
00:00:36,550 --> 00:00:39,410
Teraz zacznijmy od kontenera nawigacyjnego.

8
00:00:39,430 --> 00:00:45,640
Nie będziemy już potrzebować tego kodu, w którym ręcznie nawigujemy w innym miejscu, jeśli użytkownik jest

9
00:00:46,150 --> 00:00:52,090
uwierzytelniony, ponieważ później zobaczysz, że będzie on traktowany inaczej w przypadku konfiguracji opartej na komponentach, więc

10
00:00:52,780 --> 00:00:55,040
możesz usunąć ten fakt tutaj.

11
00:00:55,150 --> 00:01:02,920
Keep jest wyłączony tutaj, ale możesz usunąć ref tutaj tutaj, a także usunąć to tam, a jeśli chodzi

12
00:01:02,920 --> 00:01:09,620
o import tutaj, nie potrzebujemy już dwóch haczyków i wszyscy nie potrzebujemy już tego importu.

13
00:01:09,760 --> 00:01:17,020
Zostało nam tylko nawigatora sklepu, a to nie jest już tak naprawdę potrzebne.

14
00:01:17,110 --> 00:01:24,040
Nie dodajemy Nawigatora sklepu jako komponentu takiego jak ten, w którym odnosimy się do ogólnej

15
00:01:24,040 --> 00:01:30,760
konfiguracji z pliku nawigatora sklepu, ponieważ ta ogólna konfiguracja jest oczywiście skonfigurowana zgodnie ze

16
00:01:30,760 --> 00:01:38,080
starą logiką posiadania takiej globalnej konfiguracji rejestru, która jest po prostu już nie działa z nawigacją

17
00:01:38,080 --> 00:01:39,140
reagującą 5.

18
00:01:39,790 --> 00:01:46,990
Zamiast tego musimy teraz przenieść to wszystko do nowego podejścia do tego podejścia opartego na komponentach i

19
00:01:46,990 --> 00:01:47,950
to zrobić.

20
00:01:48,130 --> 00:01:51,980
Chcę zacząć dość prosto w kontenerze nawigacyjnym.

21
00:01:52,090 --> 00:01:57,970
Skonfiguruję nowy stos Navigator, który na razie jest tylko atrapą Navigatora.

22
00:01:57,970 --> 00:02:04,240
Czy widzieliście, jak to na ogół działa, zanim będziemy później dobrze stosować

23
00:02:04,240 --> 00:02:07,270
to do naszej prawdziwej aplikacji.

24
00:02:07,410 --> 00:02:10,000
Dodajmy tutaj import z at reag.

25
00:02:10,020 --> 00:02:13,020
Natywny ukośnik nawigacji.

26
00:02:13,020 --> 00:02:19,070
Stamtąd musimy zaimportować nawigację do kontenera nawigacji.

27
00:02:19,080 --> 00:02:24,460
To może być mylące, ponieważ naszym własnym komponentem jest cały nazwany kontener nawigacyjny.

28
00:02:24,600 --> 00:02:31,890
Aby uniknąć nieporozumień tutaj, zmienię nazwę naszego komponentu tutaj na nawigator aplikacji lub cokolwiek, jak chcesz go

29
00:02:31,890 --> 00:02:37,260
nazwać, więc zmienię nazwę tutaj i wszystko, aby uniknąć zamieszania, nawet jeśli nie

30
00:02:37,920 --> 00:02:45,330
jest to technicznie wymagane w komponencie aplikacji w aplikacji tak zrobię zaimportowany jako nawigator aplikacji Zmienię nazwę

31
00:02:45,420 --> 00:02:53,220
pliku na nawigator aplikacji i zaimportuję z nawigatora aplikacji tutaj w komponencie aplikacji, więc dostosuj ścieżkę importu, aby uwzględnić

32
00:02:53,460 --> 00:02:55,680
tę nową nazwę pliku.

33
00:02:55,680 --> 00:02:59,030
A potem renderuję nawigator aplikacji.

34
00:02:59,070 --> 00:03:02,430
Właśnie wprowadziłem zmiany nazw, aby uniknąć nieporozumień.

35
00:03:02,490 --> 00:03:09,300
Ważniejsza część dzieje się w tej aplikacji Navigator, która wcześniej była naszym kontenerem nawigacyjnym.

36
00:03:09,300 --> 00:03:12,120
Teraz importujemy kontener nawigacyjny z React Native.

37
00:03:12,120 --> 00:03:15,450
Ale tata będzie innym elementem niż ten, który budowaliśmy w przeszłości.

38
00:03:15,480 --> 00:03:21,690
Po prostu ma tę samą nazwę i dlatego nazwałem ją ważniejszą niż ten kontener nawigacyjny.

39
00:03:21,690 --> 00:03:26,910
Na razie zamiast tego importujemy coś ze stosu slash nawigacyjnego reklamy reagują.

40
00:03:27,120 --> 00:03:31,500
A to jest teraz pakiet, który nie istnieje, którego jeszcze nie zainstalowaliśmy.

41
00:03:32,280 --> 00:03:34,440
Zatrzymajmy więc ten proces jeszcze raz.

42
00:03:34,500 --> 00:03:43,020
A dzięki npm install dash dash safe zainstalujmy przy reagującym ukośniku nawigacyjnym, więc NPM zainstalował

43
00:03:43,020 --> 00:03:46,010
Ashutosh bezpieczny przy reagującym ukośniku.

44
00:03:46,170 --> 00:03:51,840
Spowoduje to zainstalowanie w USA logiki nawigacji stosu i wszyscy możemy już zainstalować

45
00:03:51,840 --> 00:03:58,380
pewną liczbę pakietów, ponieważ będziemy go później potrzebować, i to właśnie w reakcji na rysowanie

46
00:03:58,380 --> 00:04:06,760
ukośnika nawigacji, która później da nam nawigację opartą na losowaniu, która również będzie potrzebować, więc poczekajmy na D do poleceń instalacji,

47
00:04:06,930 --> 00:04:14,190
aby zakończyć, a następnie przy starcie silnika możemy ponownie uruchomić ten serwer expo, więc teraz zainstalowaliśmy stos Wietnamizacji.

48
00:04:14,190 --> 00:04:19,500
Możemy z niego coś zaimportować i to jest coś, gdy D tworzy nawigator stosów.

49
00:04:19,650 --> 00:04:26,490
Teraz utwórz stos Navigator to funkcja, którą znamy już w sklepie Navigator, która nadal korzysta ze

50
00:04:26,490 --> 00:04:33,210
starej nawigacji reagowania, w której importujemy również, aby utworzyć nawigator stosu z nawigacji reagującej lub

51
00:04:33,210 --> 00:04:36,990
jeśli pracujesz dla tego pakietu z osobnego pakietu.

52
00:04:37,200 --> 00:04:43,770
Ale musieliśmy również utworzyć nawigatora stosów i utworzyć końce nawigatora rysowania.

53
00:04:43,880 --> 00:04:53,870
Teraz użyliśmy funkcji tworzenia stosu nawigatora, aby utworzyć konfigurację konfiguracji, naszego rejestru nawigacji dla tej części naszej aplikacji. Można tak powiedzieć o

54
00:04:53,990 --> 00:04:58,760
przeglądzie produktów o szczegółach produktu i ekranie karty, które

55
00:04:58,760 --> 00:05:05,000
zestawiliśmy w jeden stos, a następnie mieliśmy wiele takich stosów aby je skomponować, aby

56
00:05:05,000 --> 00:05:12,070
zebrać je w naszym losowaniu Nawigatora, który ostatecznie połączono z wyłączonym ekranem w nawigatorze przełączania.

57
00:05:12,090 --> 00:05:16,710
Wróćmy teraz do naszego nawigatora aplikacji. Co robimy z tworzeniem nawigatora stosów tutaj.

58
00:05:16,740 --> 00:05:18,560
Teraz działa inaczej.

59
00:05:18,870 --> 00:05:25,260
Teraz używamy go do tworzenia nowego komponentu i nadam mu nazwę stosu.

60
00:05:25,260 --> 00:05:31,440
Nazwa należy do Ciebie, ale po prostu call tworzy nawigator stosu i gotowe.

61
00:05:31,440 --> 00:05:33,810
To jest teraz ogromna zmiana.

62
00:05:33,960 --> 00:05:39,120
Teraz nie przekazujesz żadnego obiektu, aby utworzyć nawigatora stosu, aby go skonfigurować.

63
00:05:39,170 --> 00:05:42,900
Zamiast tego jest to funkcja, która nie chce obiektu.

64
00:05:42,900 --> 00:05:48,490
Jest to funkcja, która nie potrzebuje obiektu, więc co wtedy robi.

65
00:05:48,490 --> 00:05:57,720
Jaki jest mój stos, mój stos jest teraz składnikiem reagującym, a konkretnie używamy go tutaj w nawigatorze

66
00:05:57,720 --> 00:05:58,490
aplikacji.

67
00:05:58,500 --> 00:06:04,890
Musimy owinąć całą logikę nawigacji komponentem kontenera nawigacji, który importujemy z

68
00:06:04,890 --> 00:06:06,800
natywnej nawigacji nawigacji.

69
00:06:06,870 --> 00:06:14,730
Możesz myśleć o tym komponencie kontenera nawigacji w zasadzie jako wersji komponentu kontenera aplikacji, który utworzyliśmy

70
00:06:15,270 --> 00:06:19,080
przy użyciu kontenera aplikacji w starej konfiguracji.

71
00:06:19,080 --> 00:06:24,830
Tam właśnie musieliśmy owinąć naszego gotowego nawigatora, tworząc kontener aplikacji.

72
00:06:24,840 --> 00:06:31,680
Teraz musimy owinąć naszą gotową do skonfigurowania nawigację opartą na komponencie z kontenerem nawigacyjnym.

73
00:06:32,310 --> 00:06:39,800
Więc tutaj ustawiliśmy teraz naszą logikę, jeśli chodzi o strony, które chcemy ładować.

74
00:06:39,870 --> 00:06:45,640
I tutaj używamy teraz mojego stosu jako elementu reagującego, ale nie w ten sposób.

75
00:06:45,690 --> 00:06:50,050
Ale zamiast tego potrzebujemy komponentu nawigatora DOT.

76
00:06:50,130 --> 00:06:58,620
Tak więc moim stosem jest obiekt z właściwością navigator, a wartości przechowywane w

77
00:06:58,620 --> 00:07:02,520
tej właściwości są teraz składnikiem.

78
00:07:02,530 --> 00:07:08,110
Teraz możemy stworzyć ten komponent i między podatkiem początkowym i końcowym tego komponentu

79
00:07:08,110 --> 00:07:13,550
umieszczamy teraz zasadniczo różne ekrany, które chcemy być częścią tego stosu.

80
00:07:13,570 --> 00:07:20,800
Więc to, co poprzednio tutaj w nawigatorze sklepu mieliśmy w tym obiekcie, przekazaliśmy, aby utworzyć nawigator

81
00:07:21,070 --> 00:07:24,790
stosu tę mapę komponentów ekranu i ich nazw.

82
00:07:24,850 --> 00:07:30,140
To właśnie teraz konfigurujemy między tym otwierającym a zamykającym tagiem.

83
00:07:30,190 --> 00:07:36,900
Dlatego możesz pomyśleć, że to, co robimy, dodajemy składnik ekranu przeglądu produktu.

84
00:07:36,910 --> 00:07:41,680
Jest to jeden z naszych komponentów, do którego dodalibyśmy import, którego tutaj nie zrobiliśmy, ponieważ

85
00:07:41,980 --> 00:07:45,440
jest to źle, ale możesz pomyśleć, że robimy to dobrze.

86
00:07:45,790 --> 00:07:51,430
Z pewnością byłby to ekran, który chcemy mieć w ramach tego nawigatora, ale nie

87
00:07:51,430 --> 00:07:52,410
miałby nazwy.

88
00:07:52,450 --> 00:07:58,210
Teraz potrzebujemy nazwy, abyśmy mogli do niej nawigować, na przykład, abyśmy mogli uruchomić nawigację gdzieś w

89
00:07:58,210 --> 00:07:59,350
naszej aplikacji.

90
00:07:59,350 --> 00:08:03,570
Dlatego też mamy tutaj nazwę starej konfiguracji.

91
00:08:03,700 --> 00:08:05,530
Zamiast tego robimy coś innego.

92
00:08:05,530 --> 00:08:13,090
Ponownie używamy mojego stosu tego obiektu na górze, a teraz druga właściwość, która ma właściwość screen, podobnie

93
00:08:13,570 --> 00:08:19,930
jak właściwość navigator, właściwość screen zawiera również składnik reagujący, a zatem możemy renderować go w

94
00:08:19,930 --> 00:08:21,160
ten sposób.

95
00:08:21,160 --> 00:08:27,820
To jest teraz komponent, który pozwala nam zdefiniować ekran, który powinien być częścią tego nawigatora

96
00:08:27,820 --> 00:08:35,620
stosu tutaj i konfigurujemy go za pomocą rekwizytów, ponieważ pracujemy tutaj z komponentem, więc konfiguracja działa z rekwizytami

97
00:08:35,620 --> 00:08:42,430
tak, jak zawsze w przypadku, gdy pracujemy z komponentami, aby nadać temu ekranowi nazwę, dodajemy

98
00:08:42,460 --> 00:08:50,350
nazwę prop, a teraz możemy użyć tej nazwy, używamy tutaj przeglądu produktów, abyśmy mogli dodać tę nazwę i

99
00:08:50,860 --> 00:08:57,370
poinformować nawigację, który komponent załadować, gdy kierujemy tę nazwę na kiedy robimy to z

100
00:08:57,370 --> 00:09:04,690
akcją imigracyjną, na przykład dodajemy drugą podpórkę, podpórkę komponentu, która powinna trzymać wskaźnik na komponencie, który

101
00:09:05,050 --> 00:09:10,770
chcemy załadować, gdy chcemy przejść do tego ekranu o tej nazwie.

102
00:09:10,900 --> 00:09:22,080
W tym celu zaimportuję tutaj ekran przeglądu produktów z naszego folderu ekranów do podfolderu sklepu, a następnie ekran

103
00:09:22,080 --> 00:09:23,750
przeglądu produktów.

104
00:09:23,940 --> 00:09:27,910
Więc teraz tego potrzebujemy i zdałem, że jest tutaj.

105
00:09:28,020 --> 00:09:30,780
Ważne, że nie tworzymy tutaj komponentu.

106
00:09:30,810 --> 00:09:36,960
Wskazujemy na to, po prostu używamy jego nazwy, która jest eksportowana z tego pliku.

107
00:09:36,960 --> 00:09:42,750
I dzięki temu mamy teraz swój pierwszy mały stos.

108
00:09:42,780 --> 00:09:46,240
Teraz skomentujmy ten import z nawigatora sklepu.

109
00:09:46,260 --> 00:09:48,360
Nie potrzebujemy tego w tej chwili.

110
00:09:48,360 --> 00:09:52,670
Zapiszmy wszystko i uruchommy jego na Androida, powiedzmy.

111
00:09:52,830 --> 00:09:58,250
A kiedy to zrobisz, buduje pakiet javascript i otwiera się na urządzeniu z Androidem.

112
00:09:58,260 --> 00:10:01,470
Zobaczysz ekran przeglądu naszych produktów.

113
00:10:01,470 --> 00:10:02,790
Oczywiście wygląda to nieco inaczej.

114
00:10:02,790 --> 00:10:04,770
Oczywiście brakuje przycisków nagłówka.

115
00:10:04,800 --> 00:10:07,330
Brakuje całej konfiguracji nagłówka.

116
00:10:07,350 --> 00:10:13,740
Tytuł jest niewłaściwy, ale ma to sens, ponieważ nie używamy teraz starego nawigatora, w

117
00:10:13,740 --> 00:10:21,500
którym mieliśmy całą tę konfigurację, ale nową, a to tylko dowód na to, że działa i jak działa.

118
00:10:21,600 --> 00:10:30,240
Mając to na uwadze, zostawmy ten drobny przykład tutaj i przenieśmy całą naszą nawigację skonfigurowaną tutaj

119
00:10:30,240 --> 00:10:32,910
na tę nową logikę.