1
00:00:02,340 --> 00:00:08,460
È importante capire come funziona la navigazione e le app native e soprattutto se si ha uno sfondo

2
00:00:08,460 --> 00:00:14,400
di sviluppo web è importante capire come si differenzia dalla navigazione tra schermi e web perché nel web

3
00:00:14,460 --> 00:00:20,760
in realtà si immette un sei L e se stai costruendo un'app di reazione che usi uno strumento come

4
00:00:20,760 --> 00:00:24,240
reagire al router per caricare il componente degli utenti.

5
00:00:24,240 --> 00:00:30,640
E se fai clic su un link che va di nuovo al mio sito dot com slash products di nuovo il router di reazione, che è la libreria aggiuntiva che hai installato, inizia

6
00:00:30,660 --> 00:00:37,950
a vedere che cambi il percorso nella tua U. R. L. e carica un altro componente

7
00:00:37,950 --> 00:00:38,820
di reazione.

8
00:00:38,850 --> 00:00:40,800
Ecco come funziona la navigazione nel web.

9
00:00:40,890 --> 00:00:47,880
Quindi sei L è la tua fonte di verità e cambiando il fatto che potresti essere raccolto da librerie come il router

10
00:00:47,880 --> 00:00:51,220
di reazione che ha poi reso diversi componenti sullo schermo.

11
00:00:51,240 --> 00:00:53,910
È così che reagisco per il web funziona.

12
00:00:54,030 --> 00:00:57,990
Ora c'è una differenza importante rispetto a ciò quando pensiamo alle app native.

13
00:00:58,070 --> 00:01:05,070
Non abbiamo nessuno che gli utenti non vadano in giro nella tua app inserendo qualcuno che sei L invece stai

14
00:01:05,070 --> 00:01:09,510
premendo i pulsanti i tuoi tocchi prementi e vai avanti e indietro.

15
00:01:09,540 --> 00:01:16,050
Hai i pulsanti posteriori e i cassetti laterali, è così che navighi sulle app mobili per essere precisi.

16
00:01:16,050 --> 00:01:19,720
Come ho già detto, avere i rubinetti è un modello comune che vedi lì.

17
00:01:19,770 --> 00:01:25,170
Il modello comune medio è che navighi in una pila di pagine e ciò significa semplicemente che vai

18
00:01:25,170 --> 00:01:31,770
su una pagina che fai clic su un elemento che viene portato in una nuova schermata e quindi automaticamente ottieni un pulsante

19
00:01:31,770 --> 00:01:36,210
indietro in alto o su Android tu ovviamente ne hai uno integrato nel dispositivo.

20
00:01:36,210 --> 00:01:41,850
E quando premi che sei tornato alla pagina in cui ti trovavi prima e ottieni una transizione

21
00:01:41,850 --> 00:01:43,100
graduale per questo.

22
00:01:43,140 --> 00:01:48,660
Quindi lì puoi navigare, ad esempio, caricare un componente utenti premendo la scheda o

23
00:01:48,870 --> 00:01:54,270
premendo un elemento speciale e navigando lì e l'accusa sembra semplicemente un po 'diversa

24
00:01:54,270 --> 00:01:55,390
dagli utenti.

25
00:01:55,500 --> 00:02:00,700
Ora, naturalmente, vogliamo dare quel look and feel anche alla nostra app nativa ReACT.

26
00:02:00,780 --> 00:02:02,570
E per fortuna è molto semplice.

27
00:02:02,580 --> 00:02:09,310
Con l'aiuto di una libreria di terze parti useremo la libreria di terze parti che la utilizzerà

28
00:02:09,310 --> 00:02:16,630
per questo Ho fermato il mio server esposto qui è Reattiva navigazione possiamo installarlo con npm Installa Dash Dash

29
00:02:16,720 --> 00:02:24,280
Reagire in sicurezza Navigazione come questa e mentre questa si chiama Reattiva navigazione in realtà è una libreria di

30
00:02:24,310 --> 00:02:26,660
navigazione creata per reagire nativamente.

31
00:02:26,680 --> 00:02:33,370
Ora puoi anche usarlo nelle app web ma il suo focus principale sono le app native create con React Native.

32
00:02:33,370 --> 00:02:40,330
Quindi, anche se si chiama la navigazione di reazione, è per React Native, non solo per reagire per il web.

33
00:02:40,870 --> 00:02:46,330
Quindi possiamo semplicemente installare questo pacchetto qui nella nostra applicazione per iniziare ad usarlo.

34
00:02:46,330 --> 00:02:51,130
E ovviamente ti insegnerò i dettagli di questo pacchetto e come usarlo per diversi

35
00:02:51,130 --> 00:02:53,200
schemi di navigazione in questo modulo.

36
00:02:53,200 --> 00:02:56,590
Ma nel caso in cui tu voglia immergerti più in profondità o desideri anche avere una guida scritta.

37
00:02:56,590 --> 00:03:02,280
Sicuramente dai un'occhiata anche al punto di navigazione reattivo ORIC che è la pagina ufficiale di questo pacchetto

38
00:03:02,290 --> 00:03:06,000
dove puoi immergerti nei dock per conoscere tutto su questo pacchetto.

39
00:03:06,040 --> 00:03:09,400
Lì puoi leggere tutto in dettaglio.

40
00:03:09,430 --> 00:03:13,320
Imparerai come usarlo come configurarlo e così via.

41
00:03:13,330 --> 00:03:19,360
C'è molto che puoi fare con esso e mentre coprirò la maggior parte di questo qui, questa è una grande risorsa

42
00:03:19,360 --> 00:03:21,680
per te per immergerti più in profondità.

43
00:03:21,760 --> 00:03:28,390
Ora una cosa che vediamo qui che dovremmo assolutamente fare è che dovremmo eseguire questo comando utente che installa

44
00:03:28,390 --> 00:03:32,350
un sacco di dipendenze extra per rispondere alle esigenze di navigazione.

45
00:03:32,510 --> 00:03:39,670
Quindi copia semplicemente questo comando dalla pagina Introduzione qui ed eseguito nel tuo progetto nella riga di comando

46
00:03:39,670 --> 00:03:46,180
nel terminale integrato non hai npm install ma Expo install anche se l'unica differenza è che

47
00:03:46,180 --> 00:03:52,210
Expo installato dietro le quinte eseguirà npm install ma sceglierà le versioni specifiche di questi

48
00:03:52,300 --> 00:03:56,540
pacchetti che funzionano con la tua specifica versione di Expo.

49
00:03:56,590 --> 00:04:01,750
Quindi è una versione più sicura dell'installazione di npm che potresti dire e quindi è consigliabile utilizzarla

50
00:04:01,750 --> 00:04:02,370
qui.

51
00:04:02,380 --> 00:04:07,600
Ora una nota aggiuntiva su questo comando e questa pagina in generale nella parte superiore sinistra di questa pagina viene visualizzata

52
00:04:07,600 --> 00:04:09,240
la versione della navigazione di React.

53
00:04:09,250 --> 00:04:16,670
Questi documenti si riferiscono ora al riutilizzo in questo corso mentre in 3 o 4 sono praticamente gli stessi.

54
00:04:16,690 --> 00:04:22,570
Non stiamo usando considerando 5 in questo momento perché la versione 5 usa una sintassi leggermente diversa che

55
00:04:22,580 --> 00:04:24,280
per il momento non tratteremo.

56
00:04:24,280 --> 00:04:30,760
Quindi assicurati che se stai tornando ai documenti in realtà selezioni la versione 4 o libera la documentazione qui

57
00:04:30,760 --> 00:04:32,500
da seguire senza problemi.

58
00:04:32,530 --> 00:04:37,300
Ovviamente puoi sempre dare un'occhiata alla versione 5 e provare manualmente ad adattarti al codice se

59
00:04:37,480 --> 00:04:42,720
vuoi, ma per un'esperienza fluida dove concentrarti ovviamente si trova su React Native e non reagire alla navigazione.

60
00:04:42,820 --> 00:04:45,160
Assicurati di scegliere la versione 4 o l'anno gratuito.

61
00:04:45,220 --> 00:04:50,560
Questa è solo una piccola nota a margine nel caso ti stia chiedendo quale sia la differenza tra i

62
00:04:50,560 --> 00:04:56,720
documenti qui e ciò che vedi in questo corso. Ora, tuttavia, una nota importante mentre continuiamo a reagire alla navigazione in cui

63
00:04:56,720 --> 00:04:57,550
ci troviamo.

64
00:04:57,560 --> 00:05:05,540
Qui più avanti, durante il corso, avrò un intero modulo sulla navigazione reattiva cinque e più tardi, dove ti

65
00:05:05,540 --> 00:05:10,100
mostrerò come convertire il tuo progetto per utilizzare l'ultima versione.

66
00:05:10,100 --> 00:05:16,130
Quindi hai avuto il meglio di entrambi i mondi e imparerai entrambi i tipi di impostazione della navigazione

67
00:05:16,130 --> 00:05:22,400
e di navigazione e reagire alle app native perché entrambi e per qualsiasi futuro in cui ha cinque anni

68
00:05:22,760 --> 00:05:25,180
e più sarà molto importante sapere.

69
00:05:25,250 --> 00:05:30,890
Quindi copiamo semplicemente questo comando e assicuriamoci che oltre a installare la navigazione di

70
00:05:30,890 --> 00:05:36,830
reazione che è il pacchetto principale ovviamente installiamo anche questi pacchetti nel progetto eseguendo Expo installa

71
00:05:36,830 --> 00:05:43,570
qui ora con l'installazione finita qui posso riavviare il mio server Expo con NPM start e ora possiamo

72
00:05:43,570 --> 00:05:46,540
iniziare a utilizzare la navigazione di reazione.

73
00:05:46,540 --> 00:05:51,550
Ora per tutto questo scambiare una nuova cartella nel mio progetto e la chiamerò navigazione.

74
00:05:51,550 --> 00:05:57,140
Questo non è qualcosa che devi fare, ma può aiutarti a mantenere pulito il tuo codice perché lì dentro.

75
00:05:57,140 --> 00:06:03,600
Creerò un nuovo file tutto creerà il mio punto di navigazione pasti J autunno.

76
00:06:03,640 --> 00:06:05,590
Ora questo nome di file dipende totalmente da te.

77
00:06:05,620 --> 00:06:12,970
Voglio solo indicare che lì configurerò la configurazione per la mia navigazione per l'app dei miei pasti qui

78
00:06:12,970 --> 00:06:14,690
che sto costruendo.

79
00:06:14,710 --> 00:06:16,630
Ecco perché un nome è così.

80
00:06:16,630 --> 00:06:22,420
Ed è l'autunno jazz del navigatore dei pasti dove voglio impostare la mia configurazione di navigazione bene

81
00:06:22,420 --> 00:06:29,530
Voglio dire a reagire alla navigazione quella biblioteca che abbiamo installato quali schermi diversi abbiamo come sono collegati e come vogliamo

82
00:06:29,830 --> 00:06:32,880
essere in grado di spostarci tra di loro.

83
00:06:33,190 --> 00:06:36,670
Ora è più semplice vederlo che parlarne.

84
00:06:36,730 --> 00:06:41,350
Quindi, nel navigatore dei pasti, iniziamo a configurare un po 'di navigazione.