1 00:00:02,410 --> 00:00:07,070 Quindi per questo modulo, in allegato trovi di nuovo un semplice progetto iniziale. 2 00:00:07,090 --> 00:00:09,640 Ecco l'app. file js con una 3 00:00:09,790 --> 00:00:11,680 vista vuota, quindi non succede molto. 4 00:00:11,770 --> 00:00:16,870 Ottieni una cartella delle costanti con un colore di base che ho impostato per te e basta. 5 00:00:16,870 --> 00:00:21,010 A parte questo, non c'è nulla di interessante qui, è un'applicazione 6 00:00:21,010 --> 00:00:25,320 molto semplice che ora useremo per creare questa applicazione che ho appena abbozzato. 7 00:00:25,420 --> 00:00:28,930 Ora, ovviamente, puoi assolutamente andare avanti e costruire le basi da solo, 8 00:00:28,930 --> 00:00:34,870 quindi questi tre diversi schermi di cui abbiamo bisogno alla fine o quattro schermi diversi, uno per tutti i luoghi, uno 9 00:00:34,870 --> 00:00:40,390 per i dettagli del luogo, uno per la creazione di un nuovo posto e uno per la mappa a 10 00:00:40,390 --> 00:00:45,590 schermo intero che vogliamo anche mostrare, puoi assolutamente farlo e costruire lo scheletro di base per questi schermi 11 00:00:45,590 --> 00:00:51,100 da solo, impostare anche la navigazione di base perché queste sono ovviamente tutte cose che abbiamo già fatto più 12 00:00:51,370 --> 00:00:52,600 volte in questo corso. 13 00:00:52,750 --> 00:00:57,310 Sono anche cose che inizierò nelle prossime lezioni nel caso in cui tu voglia seguire la stessa 14 00:00:57,310 --> 00:01:01,000 o confrontare la tua soluzione con la mia e, successivamente, ci immergeremo 15 00:01:01,090 --> 00:01:09,150 nella carne di questo modulo, ci immergeremo in come aggiungere funzionalità native del dispositivo . Quindi iniziamo con le basi 16 00:01:09,210 --> 00:01:10,510 quindi. 17 00:01:10,510 --> 00:01:17,080 Aggiungerò le schermate di una nuova cartella con le quattro schermate che desidero avere e che sarebbero il file 18 00:01:17,080 --> 00:01:28,360 della schermata dell'elenco dei luoghi, il file della schermata dei dettagli dei luoghi, il nuovo file della schermata dei luoghi e anche la schermata della mappa in cui possiamo quindi vedere questo 19 00:01:28,360 --> 00:01:33,770 schermo intero e li popolerò con i contenuti di questo modulo, ma queste sono le 20 00:01:33,820 --> 00:01:36,970 quattro schermate di base di cui avrò bisogno. 21 00:01:36,970 --> 00:01:43,460 Aggiungerò anche una cartella di navigazione in modo che possiamo impostare la navigazione lì e 22 00:01:43,470 --> 00:01:51,030 qui configurerò il mio PlacesNavigator. file js. Ora nel progetto iniziale che ho fornito, 23 00:01:51,450 --> 00:01:52,920 la navigazione di 24 00:01:52,920 --> 00:01:56,720 React e tutte le sue dipendenze sono già installate, quindi se 25 00:01:58,260 --> 00:02:03,480 lo stai usando, non è necessario installarlo manualmente, altrimenti se stai usando il tuo progetto iniziale, 26 00:02:03,480 --> 00:02:09,660 assicurati di installa React navigation con npm installa React navigation e assicurati di installare queste dipendenze extra qui 27 00:02:09,660 --> 00:02:12,280 per assicurarti che React navigation funzioni con expo. 28 00:02:12,330 --> 00:02:19,290 Quindi, con quello installato, ora ovviamente possiamo impostare la navigazione qui nei luoghi navigatore e per questo, qui 29 00:02:19,380 --> 00:02:24,150 importerò dalla navigazione React e quello che importerò è ovviamente la funzione 30 00:02:26,730 --> 00:02:31,020 di creazione dello stack navigator, quindi crea stack navigator e 31 00:02:31,020 --> 00:02:37,110 creare anche un contenitore di app che dobbiamo anche fare perché dovremo fare entrambe le cose: 32 00:02:37,110 --> 00:02:41,580 creare un navigatore dello stack e configurare successivamente il contenitore dell'app. 33 00:02:41,580 --> 00:02:46,830 Ora dobbiamo anche importare le schermate con cui vogliamo lavorare e quella sarebbe la schermata dell'elenco dei luoghi che importerò 34 00:02:47,070 --> 00:02:53,640 dalla cartella delle schermate e lì, è la schermata dell'elenco dei luoghi. Avremo anche bisogno della schermata dei dettagli del 35 00:02:53,640 --> 00:02:59,910 luogo, della schermata dei dettagli del luogo che viene importata dalle schermate della schermata dei dettagli del 36 00:02:59,910 --> 00:03:02,850 luogo e, ovviamente, delle altre due schermate. 37 00:03:02,850 --> 00:03:12,800 Quindi abbiamo ottenuto la nuova schermata dei luoghi dalle schermate, la nuova schermata dei luoghi e, ultimo ma non meno importante, dobbiamo anche importare la nostra schermata 38 00:03:12,830 --> 00:03:18,770 della mappa qui dalla cartella delle schermate e quindi quella sarebbe la schermata della mappa. 39 00:03:18,770 --> 00:03:26,800 Ora possiamo impostare il nostro navigatore dello stack qui e memorizzerò questo navigatore di posti in una costante e, come 40 00:03:26,990 --> 00:03:31,440 hai anche imparato, ora stiamo mappando gli identificatori alle nostre schermate, 41 00:03:31,550 --> 00:03:38,720 quindi abbiamo forse l'identificatore dei luoghi mappato alla schermata dell'elenco dei luoghi , abbiamo identificato l'identificatore del 42 00:03:38,840 --> 00:03:41,180 dettaglio del luogo sulla schermata 43 00:03:41,180 --> 00:03:49,300 dei dettagli del luogo, abbiamo anche mappato il nuovo identificatore del luogo sulla nuova schermata del luogo e, ultimo ma 44 00:03:49,330 --> 00:03:57,040 non meno importante, forse mappato sulla schermata della mappa. E con ciò, qui possiamo impostare alcune opzioni di navigazione predefinite, 45 00:03:57,130 --> 00:04:02,680 quindi passerò un secondo argomento e ovviamente l'impostazione è totalmente facoltativa, ma aggiungerò quindi le opzioni di 46 00:04:02,680 --> 00:04:09,970 navigazione predefinite su ogni schermata e voglio definire il mio stile di intestazione qui e assicurati che ci stiamo usando un colore 47 00:04:09,970 --> 00:04:14,010 di sfondo a seconda che sia in esecuzione su Android o meno. 48 00:04:14,140 --> 00:04:21,880 Quindi importerò questa cosa API della piattaforma da React Native e avrò bisogno anche del mio colore, quindi importerò anche 49 00:04:21,910 --> 00:04:30,790 i colori da Costanti / colori, che è anche necessario perché con ciò, ora possiamo verificare se il sistema operativo della piattaforma 50 00:04:30,790 --> 00:04:37,120 è Android e se lo è, possiamo assicurarci che il colore di sfondo dell'intestazione sia 51 00:04:37,120 --> 00:04:39,400 il nostro colore principale, altrimenti 52 00:04:39,580 --> 00:04:46,600 non imposterò alcun colore, voglio usare l'aspetto trasparente predefinito che utilizza iOS e qui anche impostare un colore 53 00:04:46,600 --> 00:04:53,080 di tinta per il testo lì, controllando ancora la piattaforma perché se la piattaforma è Android 54 00:04:53,080 --> 00:04:59,560 poiché abbiamo uno sfondo solido, imposterò il colore della tinta su bianco, per iOS farò il 55 00:04:59,590 --> 00:05:06,520 contrario, lì lo imposterò sul mio colore primario. Ora che è qui, non ho caratteri personalizzati in questo 56 00:05:06,520 --> 00:05:12,790 progetto, ovviamente potresti aggiungerne alcuni se lo desideri. Con questa configurazione, possiamo esportare il nostro contenitore di app che 57 00:05:12,790 --> 00:05:21,230 dobbiamo quindi creare con il contenitore di app creato e passare qui il navigatore dei luoghi. Ora questa è la navigazione impostata, 58 00:05:21,230 --> 00:05:24,620 ovviamente nell'app. 59 00:05:24,620 --> 00:05:24,620 js file ora possiamo usarlo. 60 00:05:24,620 --> 00:05:32,200 Quindi qui dovremmo importare i luoghi navigatore dalla cartella di navigazione, luoghi navigatore, quindi non abbiamo più bisogno di importare 61 00:05:32,240 --> 00:05:39,920 la vista qui e possiamo semplicemente restituire luoghi navigatore. Dal momento che non sto caricando alcun carattere personalizzato, 62 00:05:39,920 --> 00:05:44,540 non ho nemmeno bisogno di fare questa app caricando cose che 63 00:05:44,540 --> 00:05:49,610 abbiamo fatto in precedenza o in altri moduli, qui posso solo restituirlo dall'inizio. 64 00:05:51,500 --> 00:05:58,660 Ora in queste schermate qui, nella schermata dell'elenco dei luoghi, importerò React da React, importerò un paio di cose da React Native, 65 00:05:58,700 --> 00:06:01,190 probabilmente una vista, un testo e un 66 00:06:01,220 --> 00:06:02,070 foglio di 67 00:06:02,120 --> 00:06:08,570 stile e quindi possiamo vedere se abbiamo bisogno di qualcos'altro più tardi da React Native e quindi impostare la costante 68 00:06:08,600 --> 00:06:15,740 qui, la schermata dell'elenco dei luoghi è un normale componente React che riceve oggetti di scena e che alla fine restituisce del 69 00:06:15,740 --> 00:06:19,550 contenuto, qui restituirò semplicemente una vista con un testo dello schermo dell'elenco 70 00:06:19,550 --> 00:06:24,330 dei luoghi, quindi solo alcuni contenuto fittizio per ora e anche il foglio di 71 00:06:24,590 --> 00:06:30,230 stile impostato qui con il foglio di stile. creare e infine 72 00:06:31,190 --> 00:06:34,800 esportare la schermata dell'elenco dei luoghi. 73 00:06:34,800 --> 00:06:37,420 E questo sarà lo scheletro di base che possiamo usare 74 00:06:37,430 --> 00:06:40,880 per ogni vista, quindi lo lascerò cadere in ogni vista e regolerò questo nome qui. 75 00:06:40,880 --> 00:06:48,250 Quindi qui abbiamo la schermata dei dettagli del luogo che voglio usare e quindi copiarla anche nella nuova schermata del luogo 76 00:06:48,850 --> 00:06:52,720 e sostituire questo nome qui in tutti e tre i 77 00:06:52,720 --> 00:06:58,300 luoghi e, ultimo ma non meno importante, rilascialo anche nella schermata della mappa per averlo qui 78 00:06:58,300 --> 00:07:02,650 come bene e poi ovviamente aggiungeremo il contenuto reale in questo modulo. 79 00:07:02,800 --> 00:07:05,530 Quindi sono le schermate create, se ora 80 00:07:05,530 --> 00:07:12,190 lo salviamo e lo esegui con npm start o con expo start e lo esegui sul tuo 81 00:07:12,220 --> 00:07:18,660 emulatore o emulatore preferito, una volta terminato questo edificio, dovremmo vedere la schermata dell'elenco dei luoghi 82 00:07:18,990 --> 00:07:21,020 alla fine, come Questo. 83 00:07:21,120 --> 00:07:26,790 Ora, ovviamente, non abbiamo un titolo dell'intestazione qui, quindi assicuriamoci di impostarne uno, anche su Android 84 00:07:27,180 --> 00:07:34,830 andando alla schermata dell'elenco dei luoghi e lì, possiamo aggiungere opzioni di navigazione nella schermata dell'elenco dei luoghi e impostarlo su 85 00:07:34,830 --> 00:07:42,690 un oggetto statico qui dove possiamo aggiungere un titolo di intestazione di tutti i luoghi o qualcosa del genere e con quello 86 00:07:42,690 --> 00:07:47,840 ovviamente, una volta ricaricato, vediamo quel titolo qui nella schermata dell'elenco dei luoghi. 87 00:07:48,030 --> 00:07:55,260 Quindi questa è la schermata di base impostata di cui avremo bisogno per questo modulo qui. Detto questo, prima di approfondire ulteriormente il contenuto 88 00:07:55,260 --> 00:07:58,530 delle altre schermate, assicuriamoci di avere 89 00:07:58,650 --> 00:08:04,020 un pulsante più anche qui nell'intestazione che ci porti alla schermata del 90 00:08:04,020 --> 00:08:10,770 nuovo posto perché è lì che possiamo iniziare a toccare funzionalità del dispositivo nativo e 91 00:08:10,770 --> 00:08:13,010 con l'aggiunta di luoghi. 92 00:08:13,090 --> 00:08:20,200 Ora ovviamente sai come aggiungere un pulsante all'intestazione del tuo navigatore, tutto ciò che devi fare è installare un nuovo pacchetto 93 00:08:20,200 --> 00:08:27,040 con npm install --save e questo è il pacchetto di intestazione-pulsanti di reattiva navigazione che abbiamo usato un paio di 94 00:08:27,040 --> 00:08:32,170 volte durante questo corso e lo userò esattamente nello stesso modo in cui l'ho usato 95 00:08:32,170 --> 00:08:33,790 nel resto del corso. 96 00:08:33,880 --> 00:08:39,880 Quindi creerò una cartella di componenti in cui posso impostare il mio 97 00:08:40,000 --> 00:08:51,020 componente pulsante intestazione per avere quel componente pulsante riutilizzabile preconfigurato e in quel componente, importare il pulsante intestazione da questo pacchetto di 98 00:08:51,080 --> 00:09:02,460 pulsanti di intestazione di navigazione React che abbiamo appena installato. Importa Ionicons da expo / vector-icons, un pacchetto che potresti voler installare nel 99 00:09:02,510 --> 00:09:07,110 caso in cui tu stia riscontrando errori qui con npm 100 00:09:07,110 --> 00:09:18,840 install --save e importa anche la costante dei colori dalla cartella delle costanti e lì, il file dei colori e poi qui avere un pulsante di intestazione 101 00:09:18,840 --> 00:09:24,870 personalizzato componente regolare che riceve oggetti di scena che restituiscono alcuni jsx e qui 102 00:09:24,880 --> 00:09:31,260 voglio restituire il pulsante di intestazione che stiamo importando, ma ora lo configureremo solo per 103 00:09:31,260 --> 00:09:32,750 i nostri requisiti. 104 00:09:33,000 --> 00:09:39,240 Innanzitutto inoltrando tutti i puntelli ad esso e quindi possiamo impostare la componente icona su ionicon 105 00:09:39,270 --> 00:09:40,480 in modo 106 00:09:40,590 --> 00:09:47,250 che venga utilizzata, impostare la dimensione dell'icona qui forse su 23 perché penso che abbia funzionato abbastanza 107 00:09:47,250 --> 00:09:48,870 bene finora e impostare 108 00:09:48,870 --> 00:09:57,240 il colore su e ora avrò bisogno di un'altra importazione, dovrò importare la piattaforma da React Native perché ora voglio controllare la 109 00:09:57,600 --> 00:09:59,940 piattaforma qui e se la piattaforma 110 00:10:01,560 --> 00:10:07,470 è Android, avremo uno sfondo solido, quindi quindi voglio usare il bianco come un icona 111 00:10:07,800 --> 00:10:10,680 a colori, altrimenti uso il mio colore principale. 112 00:10:10,740 --> 00:10:16,080 Ora, l'unica cosa che resta da fare è esportare questo pulsante di intestazione personalizzato qui e ora possiamo iniziare 113 00:10:16,080 --> 00:10:20,600 a usarlo nella schermata dell'elenco dei luoghi. Lì anche come prima, 114 00:10:20,610 --> 00:10:29,280 importerò altri due pacchetti da reagire-navigazione-intestazione-pulsanti, altre due cose da questo pacchetto e che sarebbero i miei pulsanti di intestazione 115 00:10:29,280 --> 00:10:36,480 e l'oggetto, entrambi devono essere importati e inoltre, possiamo anche importare il nostro proprio il pulsante 116 00:10:36,480 --> 00:10:42,810 dell'intestazione personalizzato ora dalla cartella dei componenti e lì da questo file del pulsante 117 00:10:42,810 --> 00:10:48,060 dell'intestazione in cui abbiamo appena lavorato. Ma con quello importato, possiamo cambiare qui le 118 00:10:48,060 --> 00:10:53,880 nostre opzioni di navigazione in modo che siano dinamiche, dove abbiamo questa funzione che ci fornisce i dati di 119 00:10:54,270 --> 00:11:00,750 navigazione e che alla fine restituisce questo oggetto di configurazione perché questo ci permetterà quindi di associare il pulsante a qualche 120 00:11:00,750 --> 00:11:07,380 funzione che riceviamo tramite parametri di rotta perché qui, voglio aggiungere l'intestazione giusta per aggiungere i miei pulsanti di intestazione e ovviamente 121 00:11:07,380 --> 00:11:12,540 questo è anche uno schema che abbiamo fatto molte volte durante questo corso, abbiamo aggiunto i 122 00:11:12,540 --> 00:11:19,560 pulsanti di intestazione in questo modo e abbiamo l'oggetto lì dentro. Sul componente pulsanti intestazione, possiamo impostare il componente 123 00:11:19,590 --> 00:11:27,330 pulsante intestazione e puntare al componente pulsante intestazione personalizzato qui e sull'elemento, ora impostiamo un titolo, come aggiungi 124 00:11:27,330 --> 00:11:31,930 luogo e impostiamo un nome icona qui che dipende dalla piattaforma, 125 00:11:32,010 --> 00:11:39,870 quindi quindi in realtà importerò questa API della piattaforma qui da React Native e ora possiamo verificare se il 126 00:11:39,960 --> 00:11:48,090 sistema operativo della piattaforma è Android, in tal caso, quindi voglio impostarlo su md aggiungi, altrimenti su iOS aggiungere 127 00:11:48,240 --> 00:11:52,560 che aggiunge un pulsante più per il piattaforma specifica, quindi 128 00:11:52,560 --> 00:11:58,290 seguendo l'aspetto specifico di quella piattaforma. Dobbiamo anche aggiungere la funzione onPress e 129 00:11:58,290 --> 00:12:05,160 lì se lo tocchiamo, voglio semplicemente navigare con il metodo di navigazione qui ed è per questo che dobbiamo avere 130 00:12:05,160 --> 00:12:11,310 questa funzione dinamica qui, in modo da avere accesso ai dati di navigazione e quindi alla navigazione, 131 00:12:11,430 --> 00:12:19,990 navigare verso un nuovo posto e un nuovo posto qui, ovviamente, è il mio identificatore nel navigatore dei luoghi di questa nuova schermata dei luoghi. 132 00:12:20,040 --> 00:12:24,780 Quindi, con quello, abbiamo un modo di andare a quello schermo e quindi se salviamo questo, dovremmo essere 133 00:12:24,780 --> 00:12:25,960 in grado di farlo. 134 00:12:26,100 --> 00:12:32,800 Ovviamente sto ricevendo un errore perché nel mio componente pulsante intestazione, poiché ho un componente React lì dentro, 135 00:12:32,920 --> 00:12:38,680 importare React da React non sembra l'idea peggiore, quindi ripariamolo rapidamente qui nel componente 136 00:12:38,680 --> 00:12:45,290 pulsante intestazione ma ora con quello , mentre questo viene ricaricato, abbiamo questo pulsante più e possiamo 137 00:12:45,290 --> 00:12:51,760 andare alla schermata dei nuovi luoghi, alla schermata dei nuovi luoghi, ovviamente anche qui su Android. 138 00:12:51,980 --> 00:12:57,680 Ora su quella nuova schermata del luogo, possiamo quindi aggiungere anche opzioni di navigazione per impostare un titolo, 139 00:12:58,070 --> 00:13:04,010 nuove opzioni di navigazione della schermata del luogo, impostarlo su un oggetto statico per il momento perché in questo momento 140 00:13:04,010 --> 00:13:11,210 non abbiamo bisogno che questo sia una funzione, don non abbiamo bisogno di accedere ai dati di navigazione, dobbiamo solo impostare il titolo dell'intestazione 141 00:13:11,930 --> 00:13:17,340 per aggiungere posto e con quello se lo salviamo, ovviamente se andiamo lì, vediamo quel titolo nell'intestazione. 142 00:13:17,540 --> 00:13:20,440 Quindi questa è la configurazione di base qui, 143 00:13:20,570 --> 00:13:25,430 ora possiamo lavorare su quella schermata Aggiungi posto per assicurarci di poter aggiungere un posto.