1
00:00:02,380 --> 00:00:07,300
Quindi lavoriamo sul porting della nostra intera logica qui nel navigatore delle app.

2
00:00:07,300 --> 00:00:13,870
Abbiamo iniziato con questo stack fittizio qui ed è bello ma alla fine non è quello di cui abbiamo bisogno.

3
00:00:13,900 --> 00:00:19,390
Ora tocca a te fare quella configurazione ma da quando lo abbiamo fatto sostanzialmente nel file di navigazione

4
00:00:19,390 --> 00:00:20,560
del negozio prima.

5
00:00:20,560 --> 00:00:22,330
Continuerò anche a farlo lì.

6
00:00:22,360 --> 00:00:24,370
Anche con quella nuova logica.

7
00:00:24,370 --> 00:00:26,560
Quindi quello che farò è un navigatore di app.

8
00:00:26,560 --> 00:00:34,190
In realtà mi sbarazzerò di questo mio stack qui e mi sbarazzerò di questa importazione e me ne

9
00:00:34,190 --> 00:00:41,290
sbarazzerò qui lascerò il contenitore di navigazione di e resetterò questa importazione anche se alla fine cambierà

10
00:00:41,290 --> 00:00:42,760
questo un po.

11
00:00:42,760 --> 00:00:49,420
Ma ora passiamo al navigatore del negozio lì prima di tutto possiamo eliminare questa importazione da reagire alla navigazione

12
00:00:49,540 --> 00:00:50,990
non ci servirà.

13
00:00:51,100 --> 00:00:59,140
Lasciamo il resto per ora sebbene invece di quell'importazione cancellata da cui possiamo importare nello stack

14
00:00:59,350 --> 00:01:08,870
di navigazione reattivo e tutto provenga già dallo stack di disegno e dallo stack di annunci importiamo create stack navigator

15
00:01:08,870 --> 00:01:12,600
da slash draw importiamo create draw navigator.

16
00:01:12,760 --> 00:01:17,050
Ora possiamo scorrere verso il basso e possiamo effettivamente lasciare qui le opzioni di navigazione predefinite.

17
00:01:17,080 --> 00:01:24,070
Per fortuna il nome squilla e il modo in cui generalmente configuri le cose e ciò che

18
00:01:24,070 --> 00:01:30,490
puoi configurare non è cambiato davvero solo come applichi la configurazione modificata e quindi ciò

19
00:01:30,880 --> 00:01:40,770
che sicuramente deve cambiare è questa parte qui il nostro primo navigatore dello stack che per ora farò duplicato e successivamente cancellato o commentato per

20
00:01:40,770 --> 00:01:47,940
fare un confronto fianco a fianco, creerò una nuova costante che chiamerò prodotti stack navigator solo per non

21
00:01:48,420 --> 00:01:53,130
avere uno scontro di nomi e che è davvero ovvio che

22
00:01:53,130 --> 00:02:00,780
questo conterrà una pila di pagine una pila di schermate e lo facciamo con create stack navigator con questa

23
00:02:00,780 --> 00:02:09,770
funzione quello che ti ho mostrato prima che questa funzione non prenda più parametri invece creerò qui una nuova costante Navigator dei

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

25
00:02:10,670 --> 00:02:14,750
Quindi ora abbiamo uno scontro di nomi ma questo verrà rimosso comunque.

26
00:02:14,870 --> 00:02:20,420
E questo è ora un componente di reazione del componente funzionale e potremmo down per tutto l'archiviazione

27
00:02:20,420 --> 00:02:26,210
in un file separato solo per questo confronto fianco a fianco e perché avevamo tutto in questo file

28
00:02:26,420 --> 00:02:32,390
prima che ora imposterò tutti questi componenti del navigatore con la nostra navigazione la configurazione qui in questo

29
00:02:32,390 --> 00:02:36,480
singolo file suddividendolo è sicuramente qualcosa che potresti prendere in considerazione.

30
00:02:36,590 --> 00:02:44,450
Quindi ecco il nostro navigatore di prodotti e lì ora restituirò i prodotti Stack Navigator Dot Navigator

31
00:02:44,450 --> 00:02:52,910
come hai appreso e nella loro schermata Stack di Navigator punti prodotti e abbiamo avuto tre schermate prima, quindi

32
00:02:52,910 --> 00:02:54,860
lo replicherò due volte.

33
00:02:54,860 --> 00:02:57,580
Quindi abbiamo tre schermi lì dentro.

34
00:02:57,710 --> 00:03:03,730
Ora possiamo configurarli, assegniamo un nome alla prima schermata e sarà la panoramica dei prodotti.

35
00:03:03,980 --> 00:03:09,180
Ora il componente da caricare è il componente della schermata di panoramica dei nostri prodotti.

36
00:03:09,200 --> 00:03:19,130
Quindi sostanzialmente quello che abbiamo mappato prima anche ora per la seconda schermata il nome è il dettaglio del prodotto.

37
00:03:19,130 --> 00:03:24,530
Quindi quello che avevamo qui e assicurati di mantenere quei nomi in modo

38
00:03:24,530 --> 00:03:31,400
che l'intera logica di navigazione che hai nella tua app perché non debba essere modificata in modo che

39
00:03:31,670 --> 00:03:37,660
funzioni ancora e qui il componente che dovrebbe essere caricato quando vogliamo raggiungere quello schermo è

40
00:03:37,660 --> 00:03:45,770
il componente dettagliato dello schermo del prodotto così come lo abbiamo fatto laggiù riformiamolo e per l'ultimo schermo il nome è carrello.

41
00:03:45,860 --> 00:03:52,630
Quello che avevamo qui e vogliamo andare allo schermo del cuore in questo modo.

42
00:03:52,670 --> 00:03:57,920
Quindi ora impostiamo questo stack di navigazione con questa nuova logica basata su componenti.

43
00:03:58,010 --> 00:04:03,620
Ora possiamo importare nel navigatore delle app e per papà dobbiamo solo aggiungere

44
00:04:03,620 --> 00:04:11,510
una parola chiave di esportazione al suo interno in modo che questa costante questo componente venga esportata qui in

45
00:04:11,510 --> 00:04:21,980
questo file e nel navigatore dell'app non importiamo il navigatore del negozio ma importiamo il navigatore dei prodotti appena esportato importiamo che qui e

46
00:04:22,310 --> 00:04:29,910
nel nostro contenitore di navigazione ora possiamo aggiungere il navigatore del prodotto in questo modo e possiamo

47
00:04:29,910 --> 00:04:33,720
eliminare l'importazione della schermata di panoramica del prodotto.

48
00:04:33,840 --> 00:04:35,790
Ora torniamo al navigatore del negozio.

49
00:04:36,030 --> 00:04:38,840
Diamo un'occhiata a queste opzioni.

50
00:04:38,840 --> 00:04:42,360
Successivamente le opzioni di navigazione che abbiamo avuto qui su questo stack.

51
00:04:42,360 --> 00:04:45,160
Cosa facciamo con quello.

52
00:04:45,160 --> 00:04:52,600
Bene, in realtà abbiamo due opzioni qui sul navigatore dei nostri prodotti sul vecchio navigatore con la vecchia

53
00:04:53,230 --> 00:04:55,370
logica è un'icona di azione.

54
00:04:55,480 --> 00:05:02,800
Questo stack dovrebbe avere nel cassetto che aggiungeremo in seguito il secondo sono le nostre opzioni di navigazione predefinite che dovrebbero

55
00:05:03,010 --> 00:05:07,660
essere applicate a tutte le schermate che fanno parte di questo navigatore.

56
00:05:07,660 --> 00:05:12,250
E in realtà c'è anche un terzo posto in cui configuriamo le cose in passato.

57
00:05:12,280 --> 00:05:14,150
E quello era in alcuni degli schermi.

58
00:05:14,320 --> 00:05:21,680
Diamo un'occhiata alla nostra schermata di panoramica del prodotto che cosa c'è nella cartella del negozio lì se scorriamo verso il basso.

59
00:05:21,760 --> 00:05:28,870
Avevamo questa proprietà delle opzioni di navigazione che abbiamo aggiunto all'oggetto funzionale della schermata di panoramica dei prodotti e che era una

60
00:05:28,870 --> 00:05:33,850
funzione in cui configuriamo cose come il titolo dell'intestazione ma anche ciò che è a

61
00:05:33,850 --> 00:05:37,630
sinistra e il set giusto dell'intestazione ora con questa nuova logica.

62
00:05:37,670 --> 00:05:40,650
Non lo fai più così.

63
00:05:40,650 --> 00:05:46,940
Invece possiamo copiare l'intero set qui.

64
00:05:47,170 --> 00:05:48,740
Quindi tutto ciò possiamo copiarlo.

65
00:05:48,820 --> 00:05:54,680
Possiamo commentarlo qui nel componente schermo e andare al componente navigatore app.

66
00:05:54,820 --> 00:06:00,640
Mi scusi per acquistare il componente navigatore dove abbiamo impostato la nostra navigazione dello stack e

67
00:06:00,640 --> 00:06:08,830
ora sullo schermo in cui vogliamo avere quelle opzioni possiamo aggiungere un terzo prop e che è la proprietà de options e due opzioni.

68
00:06:08,830 --> 00:06:16,360
Puoi analizzare esattamente quello che avevi nel componente prima, quindi passare la funzione fa è una funzione

69
00:06:16,440 --> 00:06:16,990
giusta.

70
00:06:17,050 --> 00:06:18,640
Che riceve il parametro

71
00:06:21,330 --> 00:06:27,900
di dati NAF che quindi restituisce un oggetto di configurazione, il valore concreto di questo parametro verrà inserito

72
00:06:27,900 --> 00:06:34,950
dalla navigazione di reazione e i nomi di configurazione che possiamo impostare qui non cambiano le cose che possiamo

73
00:06:34,950 --> 00:06:35,540
configurare.

74
00:06:35,670 --> 00:06:38,550
Quindi possiamo ancora impostare un titolo di intestazione avanti o a sinistra.

75
00:06:38,550 --> 00:06:41,330
Quindi tutto questo è esattamente lo stesso che hai imparato.

76
00:06:41,340 --> 00:06:43,290
Funziona esattamente allo stesso modo.

77
00:06:43,350 --> 00:06:47,760
Per fortuna ora potremmo farlo qui e fare acquisti navigatore.

78
00:06:47,760 --> 00:06:55,200
Ma questo ovviamente diventerebbe rapidamente molto grande se avessimo qui tutte le diverse configurazioni

79
00:06:55,440 --> 00:06:57,630
specifiche dello schermo.

80
00:06:57,630 --> 00:07:00,390
Quindi in realtà non è quello che farò qui.

81
00:07:00,450 --> 00:07:03,150
Invece vedo due opzioni.

82
00:07:03,150 --> 00:07:10,170
Uno è che effettivamente eseguiamo la nostra configurazione dallo schermo di navigazione dello stack dei prodotti nel componente dello schermo.

83
00:07:10,170 --> 00:07:14,250
Il secondo è che manteniamo lì le nostre opzioni e questo è l'approccio che seguirò.

84
00:07:14,730 --> 00:07:23,850
Quindi, nella panoramica del prodotto, lo commenterò di nuovo, ma ora qui non impostiamo più come valore per il

85
00:07:23,900 --> 00:07:33,110
prop di opzioni di navigazione, ma lo esportiamo semplicemente come costante una costante alla quale dobbiamo dare un nome

86
00:07:33,110 --> 00:07:42,360
e io ' Nominerò questa opzione di schermo nessuna opzione di schermo contiene questa funzione e la esportiamo con il

87
00:07:42,360 --> 00:07:43,670
suo nome.

88
00:07:43,850 --> 00:07:49,360
Non si scontra con l'esportazione del componente perché lo facciamo qui con l'impostazione predefinita.

89
00:07:49,390 --> 00:07:57,340
Quindi ora esportiamo è la funzione di configurazione e quindi il navigatore del negozio possiamo quindi importarlo, quindi oltre

90
00:07:57,340 --> 00:08:03,940
a importare la schermata di panoramica dei prodotti da quel file ora possiamo anche

91
00:08:03,970 --> 00:08:12,940
combinare quello con un'importazione denominata dove importiamo nella funzione di opzioni dello schermo e quindi qui due opzioni su questa schermata.

92
00:08:13,020 --> 00:08:17,840
Ho appena passato un puntatore a questa funzione, non eseguirlo, ma solo puntato.

93
00:08:17,910 --> 00:08:24,580
Reagiamo alla navigazione eseguita per te in modo che possa rientrare nel valore

94
00:08:24,610 --> 00:08:32,780
concreto per questa funzione dei parametri di dati NAF una volta e con questa schermata è configurata.

95
00:08:32,890 --> 00:08:36,490
Ora, se salviamo gli scontri pubblicitari perché abbiamo questo nome in conflitto laggiù.

96
00:08:36,910 --> 00:08:41,470
Quindi, per risolvere questo problema, assicuriamoci di supportare tutte le altre opzioni.

97
00:08:41,470 --> 00:08:47,560
Ora l'opzione specifica del disegno è qualcosa che vedremo più avanti una volta aggiunto un disegno per le opzioni

98
00:08:47,560 --> 00:08:48,850
di navigazione predefinite.

99
00:08:48,850 --> 00:08:54,220
La buona notizia è che possiamo ancora applicare quelli che non dobbiamo impostare tutto a livello di schermo.

100
00:08:54,220 --> 00:08:58,980
Se abbiamo una configurazione condivisa che interessa tutte le schermate di un navigatore.

101
00:08:59,080 --> 00:09:05,320
E come pensi che possiamo impostare tali opzioni generali per tutti questi schermi gratuiti qui.

102
00:09:05,320 --> 00:09:09,200
Bene li abbiamo installati direttamente sul navigatore lì.

103
00:09:09,310 --> 00:09:15,520
Abbiamo anche una piccola proprietà delle opzioni dello schermo, quindi non opzioni nominate ma opzioni dello schermo.

104
00:09:15,610 --> 00:09:21,280
Ma queste sono le opzioni che verranno applicate a tutte le schermate qui e le opzioni specifiche

105
00:09:21,310 --> 00:09:25,820
della schermata verranno unite a queste opzioni generali proprio come prima nel corso.

106
00:09:25,830 --> 00:09:29,740
Ora qui passiamo il nostro oggetto di opzioni di navigazione predefinito.

107
00:09:29,850 --> 00:09:36,360
Quindi, questo oggetto lassù ho semplicemente fornito questo valore alle opzioni dello schermo e basta.

108
00:09:36,360 --> 00:09:41,280
Ora possiamo commentare come navigatore prodotti qui e salvare tutto.

109
00:09:41,360 --> 00:09:48,440
Ora, una volta fatto, non riusciamo ancora a vedere il risultato perché in questo file di navigazione del negozio abbiamo ancora

110
00:09:48,440 --> 00:09:55,370
molto codice che utilizza il vecchio navigatore o quella vecchia logica di navigatore e che qui sta causando un problema.

111
00:09:55,400 --> 00:10:03,090
Ora, per vedere ancora un risultato, lo commenterò temporaneamente solo temporaneamente e lo salverò di

112
00:10:03,090 --> 00:10:03,710
nuovo.

113
00:10:03,750 --> 00:10:08,660
In modo che questo ricostruisca e vedi che ora riceviamo un errore.

114
00:10:08,720 --> 00:10:14,300
Bene, c'è una cosa che dobbiamo effettivamente regolare e il componente di panoramica del prodotto nella nostra

115
00:10:14,300 --> 00:10:16,800
opzione dello schermo dirige l'intestazione a sinistra.

116
00:10:16,880 --> 00:10:25,060
Questo ora deve essere una funzione qui che restituisce il nostro markup del marchio JSA X e lo stesso per l'intestazione a destra.

117
00:10:25,070 --> 00:10:30,260
Quindi dobbiamo convertirli entrambi in funzioni e puoi semplicemente farlo aggiungendo un elenco di parametri vuoto e quindi

118
00:10:30,410 --> 00:10:31,580
la freccia qui.

119
00:10:31,670 --> 00:10:38,090
Nota a margine che potresti accettare il parametro qui se lo volessi e che sarebbe puntelli perché in

120
00:10:38,090 --> 00:10:43,910
realtà questo è ora un componente di reazione uccello che trova qui verrà alimentato un

121
00:10:43,910 --> 00:10:50,240
valore concreto per i puntelli e reagendo alla navigazione e i valori che puoi ottenere da lì possono

122
00:10:50,240 --> 00:10:58,660
essere trovato nei documenti ufficiali con questa modifica apportata se ora la sicurezza è ora riavvia qui e ora vediamo di nuovo quella schermata.

123
00:10:58,660 --> 00:11:01,830
Ora sicuramente riprendo la nostra configurazione.

124
00:11:01,840 --> 00:11:09,360
Tieni presente che il disegno non funzionerà perché non abbiamo ancora aggiunto disegno e navigazione, quindi con

125
00:11:09,360 --> 00:11:17,140
tutto ciò abbiamo imparato come possiamo configurare i nostri componenti i nostri schermi e il navigatore generale dello

126
00:11:17,140 --> 00:11:19,930
stack con quella nuova logica.

127
00:11:19,930 --> 00:11:26,020
È tempo di continuare il porting Sicuramente sentiti libero di fare i prossimi passi da solo e una porta

128
00:11:26,020 --> 00:11:32,620
per schermare le opzioni specifiche per i dettagli del prodotto e lo schermo della carta e in seguito passeremo allo stack

129
00:11:32,620 --> 00:11:33,090
successivo.

130
00:11:33,190 --> 00:11:35,230
E poi ovviamente anche fare causa al sorteggio.