1
00:00:02,410 --> 00:00:05,910
La maggior parte dei nostri file non ha bisogno di cambiare.

2
00:00:06,040 --> 00:00:12,220
Ciò che dovremo cambiare è ciò che sta accadendo nei file di navigazione e nella

3
00:00:13,000 --> 00:00:19,540
cartella di navigazione nell'app J. S. potresti ricordare di rendere il contenitore

4
00:00:19,570 --> 00:00:25,510
di navigazione qui e il contenitore di navigazione è solo un componente personalizzato qui dove alla fine abbiamo la

5
00:00:25,580 --> 00:00:31,330
nostra logica per verificare se l'utente è autenticato e quindi rendiamo un Navigatore negozio che è il nostro navigatore

6
00:00:31,330 --> 00:00:36,550
di rotta creato qui con la navigazione reattiva ed è qui che le cose devono cambiare ora.

7
00:00:36,550 --> 00:00:39,410
Ora cominciamo con il contenitore di navigazione.

8
00:00:39,430 --> 00:00:45,640
Non avremo più bisogno di questo codice qui dove navigheremo manualmente da qualche altra parte se l'utente è autenticato perché

9
00:00:46,150 --> 00:00:52,090
vedrai in seguito che questo verrà gestito in modo diverso con questa configurazione basata su componenti in modo da

10
00:00:52,780 --> 00:00:55,040
poter eliminare utilizzare il fatto qui.

11
00:00:55,150 --> 00:01:02,920
Keep è disattivato qui sebbene sia possibile eliminare qui il ref ed eliminarlo anche lì e quando si tratta delle importazioni

12
00:01:02,920 --> 00:01:09,620
qui non abbiamo più bisogno di due ganci qui e non tutti abbiamo più bisogno di questa importazione.

13
00:01:09,760 --> 00:01:17,020
Quindi ci resta solo il navigatore del negozio e anche questo non è più qualcosa di cui abbiamo bisogno qui.

14
00:01:17,110 --> 00:01:24,040
Non stiamo aggiungendo un navigatore negozio come un componente come questo in cui faremo riferimento alla configurazione

15
00:01:24,040 --> 00:01:30,760
generale dal file del navigatore negozio perché quella configurazione generale è ovviamente impostata con quella vecchia logica

16
00:01:30,760 --> 00:01:38,080
di avere quel registro globale come la configurazione che è semplicemente non funziona più con la navigazione di

17
00:01:38,080 --> 00:01:39,140
reazione 5.

18
00:01:39,790 --> 00:01:46,990
Invece ora dobbiamo migrare tutto ciò al nuovo approccio a questo approccio basato sui componenti e

19
00:01:46,990 --> 00:01:47,950
per farlo.

20
00:01:48,130 --> 00:01:51,980
Voglio iniziare abbastanza semplice nel contenitore di navigazione.

21
00:01:52,090 --> 00:01:57,970
Installerò un nuovo stack Navigator che per ora è solo un fittizio Navigator.

22
00:01:57,970 --> 00:02:04,240
Quindi hai visto come funziona generalmente prima che poi in seguito applicheremo effettivamente questo

23
00:02:04,240 --> 00:02:07,270
alla nostra vera applicazione per quello.

24
00:02:07,410 --> 00:02:10,000
Aggiungiamo l'importazione qui da a reazioni.

25
00:02:10,020 --> 00:02:13,020
Barra di navigazione nativa.

26
00:02:13,020 --> 00:02:19,070
E da lì dobbiamo importare la navigazione dal container di navigazione.

27
00:02:19,080 --> 00:02:24,460
Ora questo può essere fonte di confusione perché il nostro componente qui è tutto il contenitore di navigazione denominato.

28
00:02:24,600 --> 00:02:31,890
Quindi per evitare confusione qui rinominerò il nostro componente qui in Navigatore app o come vuoi nominarlo in modo

29
00:02:31,890 --> 00:02:37,260
da rinominarlo qui e tutto ciò per evitare confusione anche se non è tecnicamente

30
00:02:37,920 --> 00:02:45,330
richiesto nel componente dell'app in app sì importato come navigatore delle app Rinominerò il file in navigatore delle app

31
00:02:45,420 --> 00:02:53,220
e importerò dal navigatore delle app qui nel componente dell'app in modo da adattare il percorso di importazione per includere

32
00:02:53,460 --> 00:02:55,680
quel nuovo nome di file.

33
00:02:55,680 --> 00:02:59,030
E poi qui visualizzo il navigatore delle app.

34
00:02:59,070 --> 00:03:02,430
Ora ho appena apportato queste modifiche al nome per evitare confusione.

35
00:03:02,490 --> 00:03:09,300
La parte più importante accade all'interno dell'app Navigator che in precedenza era il nostro contenitore di navigazione.

36
00:03:09,300 --> 00:03:12,120
Ora stiamo importando container di navigazione da React Native.

37
00:03:12,120 --> 00:03:15,450
Ma papà sarà un componente diverso da quello che abbiamo costruito in passato.

38
00:03:15,480 --> 00:03:21,690
Ha appena condiviso lo stesso nome, motivo per cui l'ho rinominato più importante di questo contenitore di navigazione.

39
00:03:21,690 --> 00:03:26,910
Per il momento invece importiamo qualcosa dallo stack di barra di navigazione di reazione agli annunci.

40
00:03:27,120 --> 00:03:31,500
E questo è ora un pacchetto che non esiste e che non abbiamo ancora installato.

41
00:03:32,280 --> 00:03:34,440
Quindi fermiamo di nuovo questo processo.

42
00:03:34,500 --> 00:03:43,020
E con npm install dash dash safe installiamoci nello stack di barre reattive di navigazione così NPM ha installato Ashutosh sicuro

43
00:03:43,020 --> 00:03:46,010
nello stack di barre reattive di navigazione.

44
00:03:46,170 --> 00:03:51,840
Questo ci installerà la logica di navigazione dello stack e tutti noi possiamo già installare

45
00:03:51,840 --> 00:03:58,380
un numero di pacchetti perché ne avremo bisogno in seguito e questo è reagire alla barra di navigazione

46
00:03:58,380 --> 00:04:06,760
che ci darà in seguito la navigazione basata sul disegno di cui avremo bisogno, quindi aspettiamo un D ai comandi di installazione per terminare

47
00:04:06,930 --> 00:04:14,190
e successivamente con l'avvio del motore possiamo richiamare nuovamente questo server expo, quindi ora abbiamo installato lo stack di vietnamizzazione.

48
00:04:14,190 --> 00:04:19,500
Possiamo importare qualcosa da esso e questo è qualcosa come D create stack navigator.

49
00:04:19,650 --> 00:04:26,490
Ora crea stack Navigator è una funzione che conosciamo già nel negozio Navigator che utilizza ancora la

50
00:04:26,490 --> 00:04:33,210
vecchia navigazione di reazione in cui importiamo anche per creare stack navigator dalla navigazione di reazione o

51
00:04:33,210 --> 00:04:36,990
se stavi utilizzando questo pacchetto per un pacchetto separato.

52
00:04:37,200 --> 00:04:43,770
Ma abbiamo anche creato stack navigator lì dentro e creato il draw navigator finisce.

53
00:04:43,880 --> 00:04:53,870
Ora abbiamo usato create stack navigator per creare la nostra configurazione di configurazione del nostro registro di navigazione per questa parte della nostra applicazione, potreste dirlo per la

54
00:04:53,990 --> 00:04:58,760
panoramica dei prodotti sul dettaglio del prodotto e lo schermo della scheda

55
00:04:58,760 --> 00:05:05,000
che abbiamo messo insieme in uno stack e quindi abbiamo avuto più di questi stack per comporli

56
00:05:05,000 --> 00:05:12,070
per riunirci nel nostro sorteggio Navigator che alla fine abbiamo poi combinato con lo schermo spento nel navigatore switch.

57
00:05:12,090 --> 00:05:16,710
Ora torniamo al nostro navigatore di app che cosa facciamo con lo stack navigator qui.

58
00:05:16,740 --> 00:05:18,560
Ora funziona in modo diverso.

59
00:05:18,870 --> 00:05:25,260
Ora lo usiamo per creare un nuovo componente con esso e lo nominerò il mio stack.

60
00:05:25,260 --> 00:05:31,440
Il nome dipende totalmente da te, ma basta chiamare per creare un navigatore dello stack come questo e il gioco è fatto.

61
00:05:31,440 --> 00:05:33,810
E questo ora è un grande cambiamento.

62
00:05:33,960 --> 00:05:39,120
Ora non si passa alcun oggetto per creare stack navigator per configurarlo.

63
00:05:39,170 --> 00:05:42,900
Invece è una funzione che non vuole un oggetto.

64
00:05:42,900 --> 00:05:48,490
È una funzione che non ha bisogno di alcun oggetto, quindi cosa fa allora.

65
00:05:48,490 --> 00:05:57,720
Qual è il mio stack il mio stack è ora un componente di reazione e lo usiamo come tale qui nel navigatore dell'app per

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

67
00:05:58,500 --> 00:06:04,890
Dobbiamo avvolgere tutta la logica di navigazione con il componente del contenitore di navigazione che stiamo importando

68
00:06:04,890 --> 00:06:06,800
da nativo di navigazione reattiva.

69
00:06:06,870 --> 00:06:14,730
Puoi pensare a quel componente del contenitore di navigazione fondamentalmente come alla versione del componente del contenitore dell'app che abbiamo

70
00:06:15,270 --> 00:06:19,080
creato con creare il contenitore dell'app nella vecchia configurazione.

71
00:06:19,080 --> 00:06:24,830
Proprio lì abbiamo dovuto avvolgere il nostro navigatore finito con creare un contenitore di app.

72
00:06:24,840 --> 00:06:31,680
Ora dobbiamo concludere la nostra configurazione di navigazione basata su componenti da completare con il contenitore di navigazione.

73
00:06:32,310 --> 00:06:39,800
Quindi qui impostiamo la nostra logica quando si tratta di quali pagine vogliamo caricare.

74
00:06:39,870 --> 00:06:45,640
E qui ora usiamo il mio stack come componente di reazione, ma non in questo modo.

75
00:06:45,690 --> 00:06:50,050
Ma invece qui abbiamo bisogno del componente DOT Navigator.

76
00:06:50,130 --> 00:06:58,620
Quindi quello che il mio stack è in realtà è che è un oggetto con una proprietà navigator e i

77
00:06:58,620 --> 00:07:02,520
valori memorizzati in quella proprietà sono ora un componente.

78
00:07:02,530 --> 00:07:08,110
Quindi ora possiamo creare quel componente e tra la tassa di apertura e chiusura di questo

79
00:07:08,110 --> 00:07:13,550
componente ora mettiamo sostanzialmente i diversi schermi che vogliamo far parte di quello stack.

80
00:07:13,570 --> 00:07:20,800
Quindi, ciò che in precedenza qui nel navigatore del negozio aveva all'interno di questo oggetto, passammo per creare il navigatore dello stack

81
00:07:21,070 --> 00:07:24,790
questa mappa dei componenti dello schermo e dei loro nomi.

82
00:07:24,850 --> 00:07:30,140
Questo è ciò che stiamo impostando qui tra questo tag di apertura e chiusura.

83
00:07:30,190 --> 00:07:36,900
Si potrebbe quindi pensare che ciò che facciamo sia aggiungere correttamente il componente della schermata di panoramica del prodotto.

84
00:07:36,910 --> 00:07:41,680
Questo è uno dei nostri componenti che aggiungeremo un'importazione che non abbiamo fatto qui perché questo

85
00:07:41,980 --> 00:07:45,440
è sbagliato ma potresti pensare che lo facciamo quasi bene.

86
00:07:45,790 --> 00:07:51,430
Questo sarebbe sicuramente lo schermo che vogliamo avere come parte di questo navigatore ma non avrebbe

87
00:07:51,430 --> 00:07:52,410
un nome.

88
00:07:52,450 --> 00:07:58,210
Ora abbiamo bisogno di un nome in modo da poterlo navigare ad esempio in modo da poter attivare una navigazione da qualche

89
00:07:58,210 --> 00:07:59,350
parte nella nostra applicazione.

90
00:07:59,350 --> 00:08:03,570
Ecco perché abbiamo un nome anche qui sulla vecchia configurazione.

91
00:08:03,700 --> 00:08:05,530
Quindi invece facciamo qualcosa di diverso.

92
00:08:05,530 --> 00:08:13,090
Usiamo di nuovo il mio stack questo oggetto lassù e ora una seconda proprietà che ha la proprietà screen proprio

93
00:08:13,570 --> 00:08:19,930
come la proprietà navigator, la proprietà screen contiene anche un componente di reazione e quindi possiamo renderlo

94
00:08:19,930 --> 00:08:21,160
in questo modo.

95
00:08:21,160 --> 00:08:27,820
Questo è ora un componente che ci consente di definire uno schermo che dovrebbe far parte di quel

96
00:08:27,820 --> 00:08:35,620
navigatore dello stack qui e lo configuriamo con l'aiuto dei puntelli ora perché stiamo lavorando con un componente qui, quindi la

97
00:08:35,620 --> 00:08:42,430
configurazione funziona con i puntelli proprio come è sempre il caso quando lavoriamo con componenti per dare un

98
00:08:42,460 --> 00:08:50,350
nome a questa schermata aggiungiamo un nome prop e ora possiamo usare quel nome che usiamo qui panoramica prodotti in modo da

99
00:08:50,860 --> 00:08:57,370
poter aggiungere questo nome e far reagire alla navigazione quale componente caricare quando targetizziamo questo nome quando

100
00:08:57,370 --> 00:09:04,690
lo facciamo con un'azione sull'immigrazione, ad esempio, aggiungiamo un secondo sostegno il componente puntello e questo dovrebbe tenere un puntatore

101
00:09:05,050 --> 00:09:10,770
sul componente che vogliamo caricare quando vogliamo passare a questa schermata con questo nome.

102
00:09:10,900 --> 00:09:22,080
Quindi per questo ho intenzione di importare la schermata di panoramica dei prodotti qui dalla nostra cartella delle schermate nella sottocartella degli acquisti e quindi nella schermata

103
00:09:22,080 --> 00:09:23,750
di panoramica dei prodotti.

104
00:09:23,940 --> 00:09:27,910
Quindi ora ne abbiamo bisogno e sono passato è qui.

105
00:09:28,020 --> 00:09:30,780
Ora importante non creiamo il componente qui.

106
00:09:30,810 --> 00:09:36,960
Indichiamo solo che usiamo solo il suo nome che viene esportato da quel file.

107
00:09:36,960 --> 00:09:42,750
E con questo ora abbiamo il nostro primo piccolo stack impostato qui.

108
00:09:42,780 --> 00:09:46,240
Ora commentiamo questa importazione dal navigatore del negozio.

109
00:09:46,260 --> 00:09:48,360
Non ne abbiamo più bisogno al momento.

110
00:09:48,360 --> 00:09:52,670
Salviamo tutto e lanciamo il suo su Android, diciamo.

111
00:09:52,830 --> 00:09:58,250
E quando lo fai crea il bundle javascript e si apre sul dispositivo Android.

112
00:09:58,260 --> 00:10:01,470
E quello che vedrai è la nostra schermata di panoramica dei prodotti.

113
00:10:01,470 --> 00:10:02,790
Certo sembra un po 'diverso.

114
00:10:02,790 --> 00:10:04,770
Naturalmente mancano i pulsanti dell'intestazione.

115
00:10:04,800 --> 00:10:07,330
Manca l'intera configurazione dell'intestazione.

116
00:10:07,350 --> 00:10:13,740
Il titolo è tutto sbagliato ma questo ha senso perché non stiamo usando il vecchio navigatore

117
00:10:13,740 --> 00:10:21,500
in cui avevamo tutta questa configurazione ma quella nuova e questa è solo una prova che funziona e come funziona.

118
00:10:21,600 --> 00:10:30,240
Ora, con questa conoscenza in mente, lasciamo qui questo piccolo esempio e portiamo effettivamente la nostra intera navigazione impostata

119
00:10:30,240 --> 00:10:32,910
qui su questa nuova logica.