1
00:00:02,530 --> 00:00:07,540
Bene per raggiungere le nostre altre schermate, abbiamo bisogno di qualcosa su cui possiamo fare clic, che possiamo toccare.

2
00:00:07,600 --> 00:00:12,130
Successivamente avremo la nostra griglia di categorie qui e lavoreremo anche su questo in questo

3
00:00:12,220 --> 00:00:15,990
modulo, ma solo per iniziare con la navigazione, aggiungerò un pulsante, quindi

4
00:00:16,030 --> 00:00:21,850
nella schermata delle categorie in cui ho questo testo, voglio aggiungere un pulsante che posso toccare per accedere alla

5
00:00:21,850 --> 00:00:23,510
schermata dei pasti della categoria.

6
00:00:23,980 --> 00:00:34,440
Quindi, qui, aggiungerò questo pulsante React Native, quello incorporato e impostato un titolo per andare ai pasti e quando premiamo questo

7
00:00:34,600 --> 00:00:41,630
pulsante, voglio attivare una funzione che mi porta effettivamente alla schermata dei pasti

8
00:00:41,660 --> 00:00:42,890
della categoria.

9
00:00:42,890 --> 00:00:45,610
Ora impostiamo la schermata dei pasti di

10
00:00:45,620 --> 00:00:53,040
quella categoria qui, ma come possiamo ora andare ad essa? Bene, per questo, è importante sapere che qualsiasi componente caricato

11
00:00:53,040 --> 00:01:00,360
con l'aiuto della navigazione React ottiene automaticamente un puntello speciale, quindi qualsiasi componente mappato a uno dei tuoi identificatori

12
00:01:00,360 --> 00:01:02,550
dello schermo qui, quindi in

13
00:01:02,550 --> 00:01:09,390
questo caso questi tre componenti, otterranno il prop speciale. I componenti nidificati lì dentro non lo ottengono automaticamente,

14
00:01:09,390 --> 00:01:14,850
ma solo i componenti di livello superiore che hai mappato agli identificatori nei tuoi navigatori.

15
00:01:14,850 --> 00:01:16,800
Quindi è un oggetto speciale di cui sto parlando,

16
00:01:16,800 --> 00:01:17,810
diamo un'occhiata a questo.

17
00:01:17,820 --> 00:01:23,790
Quindi qui negli oggetti di scena, possiamo estrarlo e iniziamo semplicemente dalla console di registrazione degli oggetti di scena qui, in modo

18
00:01:23,790 --> 00:01:27,510
che possiamo avere un'idea e per ora in modo da non avere un

19
00:01:27,510 --> 00:01:30,480
errore, passerò semplicemente una funzione vuota qui su onPress .

20
00:01:30,480 --> 00:01:33,600
Quindi salviamo questo e vediamo cosa c'è dentro gli oggetti di scena.

21
00:01:33,690 --> 00:01:39,660
Questo ricarica, abbiamo il pulsante che non fa nulla e qui nella console, infatti, vediamo che gli oggetti di scena

22
00:01:39,720 --> 00:01:40,800
non sono vuoti.

23
00:01:40,800 --> 00:01:42,030
Questo è

24
00:01:42,030 --> 00:01:48,400
il nostro oggetto oggetti di scena e lì abbiamo un oggetto di navigazione che a sua volta

25
00:01:48,420 --> 00:01:58,980
è un oggetto che ha alcune azioni, okay ma che ha anche ad esempio pop, push, sostituzione, reset e una funzione di navigazione, quindi un mucchio di funzioni

26
00:01:58,980 --> 00:02:03,090
lì dentro, funzioni che ci aiutano a spostarci nella nostra app.

27
00:02:03,450 --> 00:02:09,670
Ha anche un puntello per schermo, quindi il nostro puntello per schermo che possiamo ignorare per ora.

28
00:02:09,690 --> 00:02:17,160
Questo è ciò che c'è dentro gli oggetti di scena e questo oggetto di navigazione, questa parte di navigazione che

29
00:02:17,520 --> 00:02:18,680
è lì

30
00:02:18,690 --> 00:02:25,350
dentro, ci aiuta davvero, quindi questo oggetto di navigazione. Ci aiuta qui perché quando premiamo questo pulsante e lo

31
00:02:25,370 --> 00:02:30,270
farò con una funzione freccia in linea qui, ovviamente potresti avere una funzione separata che crei

32
00:02:30,270 --> 00:02:32,010
e che poi mappi su

33
00:02:32,010 --> 00:02:35,430
onPress, questo ci aiuta e questo può essere usato per navigare.

34
00:02:35,490 --> 00:02:42,210
Quindi sulla navigazione degli oggetti di scena, la navigazione è questo oggetto speciale che stiamo ottenendo da React navigation perché

35
00:02:42,210 --> 00:02:46,390
abbiamo caricato questo componente della schermata delle categorie con l'aiuto del nostro

36
00:02:46,740 --> 00:02:50,900
navigatore qui, questo oggetto di navigazione speciale ha un metodo di navigazione

37
00:02:50,910 --> 00:02:53,040
e questo è il tuo

38
00:02:53,040 --> 00:03:01,620
metodo principale, il più importante metodo per spostarsi con l'aiuto della navigazione React. Come funziona la navigazione?

39
00:03:02,490 --> 00:03:12,040
Navigate accetta un oggetto come argomento e in questo oggetto è possibile impostare il nome della rotta verso cui si

40
00:03:12,040 --> 00:03:13,150
desidera navigare.

41
00:03:13,240 --> 00:03:19,720
Quindi passi una proprietà del nome della rotta in questo oggetto che passi per navigare e ora importante, il nome

42
00:03:19,720 --> 00:03:25,540
della rotta che specifichi qui deve essere uno dei tre nomi di rotta che ho impostato qui.

43
00:03:25,720 --> 00:03:31,450
Ora i nomi delle rotte sono gli identificativi che mostri scelti di fronte a questi due punti, quindi i nomi delle proprietà in

44
00:03:31,450 --> 00:03:34,420
questo oggetto che hai passato per creare il navigatore dello stack.

45
00:03:34,420 --> 00:03:36,660
Questi sono i nomi dei tuoi percorsi

46
00:03:36,670 --> 00:03:42,900
e questo è quello che ora puoi usare per navigare. Quindi qui voglio andare ai pasti di categoria,

47
00:03:42,900 --> 00:03:44,690
questo è il nome

48
00:03:44,690 --> 00:03:48,340
della rotta che voglio usare, quindi quindi qui, indico i

49
00:03:48,410 --> 00:03:56,000
pasti di categoria ma non in questo modo, questo in Javascript cercherebbe una variabile di pasti di categoria, invece di una stringa

50
00:03:56,180 --> 00:04:02,450
denominata pasti di categoria perché questo dirà sostanzialmente alla navigazione Javascript e React alla fine che si desidera

51
00:04:02,450 --> 00:04:08,470
andare al percorso che ha il nome dei pasti di categoria e che è questo percorso qui.

52
00:04:08,470 --> 00:04:10,720
Quindi ora è così che puoi andare lì.

53
00:04:13,730 --> 00:04:21,530
Se ora lo salviamo e facciamo clic su Vai ai pasti qui, vedi che andiamo alla schermata dei pasti, prendiamo

54
00:04:21,530 --> 00:04:27,020
questa bella animazione fuori dalla scatola, otteniamo questo pulsante indietro che sembra esattamente

55
00:04:27,020 --> 00:04:33,650
come ci aspetteremmo iOS e tutto ciò funziona subito senza alcun lavoro extra, nessun controllo, nessun codice

56
00:04:33,650 --> 00:04:38,890
di animazione manuale, lo otteniamo immediatamente grazie alla libreria di navigazione React.

57
00:04:38,990 --> 00:04:45,800
Quindi, con questo, possiamo andare avanti e indietro alla nostra schermata dei pasti, alla schermata dei pasti di categoria e quindi di nuovo

58
00:04:45,800 --> 00:04:52,130
alla schermata delle categorie e questo funziona anche su Android. Lì otteniamo la navigazione di routing specifica per Android

59
00:04:52,400 --> 00:04:57,620
che sembra un po 'diversa rispetto a iOS, è l'animazione di navigazione che ti aspetteresti su Android,

60
00:04:57,620 --> 00:05:01,550
ovviamente puoi anche usare il pulsante Indietro del dispositivo per tornare indietro.

61
00:05:01,550 --> 00:05:08,600
Quindi è così che puoi navigare verso una schermata diversa e, per favore, nota che la navigazione

62
00:05:08,600 --> 00:05:15,530
ovviamente non dice nulla sulla direzione che vogliamo andare, non dice alla navigazione React se dovrebbe

63
00:05:15,530 --> 00:05:22,490
riprodurre quell'animazione in avanti o quella all'indietro . React navigation lo rileva automaticamente perché, sotto il cofano,

64
00:05:22,550 --> 00:05:29,120
gestisce questa pila di pagine di cui stavo parlando, questa pila di schermate e in questa pila, in

65
00:05:29,120 --> 00:05:35,060
questo momento quando avviamo l'app, abbiamo solo la schermata della categoria ma quando premo questo pulsante

66
00:05:35,420 --> 00:05:42,050
, navigare alla fine indica a React navigation che, poiché lo stiamo facendo all'interno di un componente che

67
00:05:42,050 --> 00:05:47,570
è stato caricato con un navigatore dello stack, vogliamo passare a una schermata diversa che

68
00:05:47,600 --> 00:05:53,810
dovrebbe essere inserita in cima allo stack. Questo è semplicemente il comportamento predefinito e, quindi, sa che vuole

69
00:05:53,840 --> 00:05:59,690
andare avanti perché è stato premuto un nuovo percorso, il che significa che è stato aggiunto allo stack, vogliamo andare

70
00:05:59,690 --> 00:06:06,080
avanti e quando facciamo clic sul pulsante Indietro che aggiunge automaticamente, esso fa uscire questa schermata dallo stack e poiché rimuove qualcosa dallo

71
00:06:06,170 --> 00:06:10,700
stack, sa che dovrebbe riprodurre l'animazione posteriore. Quindi è quello che sta succedendo

72
00:06:10,700 --> 00:06:14,870
dietro le quinte, non devi davvero preoccuparti di questo e questa è la

73
00:06:14,960 --> 00:06:20,330
cosa buona, voglio solo che tu sia consapevole di ciò, che la navigazione React sta facendo il

74
00:06:20,330 --> 00:06:27,980
lavoro pesante per te lì e gestisce questo stack di schermo e le animazioni di cui hai bisogno quindi sotto il cofano per te.

75
00:06:28,120 --> 00:06:28,460
Va

76
00:06:28,520 --> 00:06:32,990
bene, quindi ci sta permettendo di andare avanti e indietro o avanti e indietro.

77
00:06:32,990 --> 00:06:39,260
Ora la tua sfida per la prossima lezione in cui lo faremo insieme è che anche tu farai lo

78
00:06:39,260 --> 00:06:44,270
stesso nella schermata dei pasti della categoria e assicurarti che da lì possiamo anche

79
00:06:44,270 --> 00:06:47,990
andare alla schermata dei pasti. Non dovrebbe essere troppo difficile, nella prossima lezione, lo faremo insieme.