Quindi per questo modulo, in allegato trovi di nuovo un semplice progetto iniziale.
Ecco l'app. file js con una
vista vuota, quindi non succede molto.
Ottieni una cartella delle costanti con un colore di base che ho impostato per te e basta.
A parte questo, non c'è nulla di interessante qui, è un'applicazione
molto semplice che ora useremo per creare questa applicazione che ho appena abbozzato.
Ora, ovviamente, puoi assolutamente andare avanti e costruire le basi da solo,
quindi questi tre diversi schermi di cui abbiamo bisogno alla fine o quattro schermi diversi, uno per tutti i luoghi, uno
per i dettagli del luogo, uno per la creazione di un nuovo posto e uno per la mappa a
schermo intero che vogliamo anche mostrare, puoi assolutamente farlo e costruire lo scheletro di base per questi schermi
da solo, impostare anche la navigazione di base perché queste sono ovviamente tutte cose che abbiamo già fatto più
volte in questo corso.
Sono anche cose che inizierò nelle prossime lezioni nel caso in cui tu voglia seguire la stessa
o confrontare la tua soluzione con la mia e, successivamente, ci immergeremo
nella carne di questo modulo, ci immergeremo in come aggiungere funzionalità native del dispositivo . Quindi iniziamo con le basi
quindi.
Aggiungerò le schermate di una nuova cartella con le quattro schermate che desidero avere e che sarebbero il file
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
schermo intero e li popolerò con i contenuti di questo modulo, ma queste sono le
quattro schermate di base di cui avrò bisogno.
Aggiungerò anche una cartella di navigazione in modo che possiamo impostare la navigazione lì e
qui configurerò il mio PlacesNavigator. file js. Ora nel progetto iniziale che ho fornito,
la navigazione di
React e tutte le sue dipendenze sono già installate, quindi se
lo stai usando, non è necessario installarlo manualmente, altrimenti se stai usando il tuo progetto iniziale,
assicurati di installa React navigation con npm installa React navigation e assicurati di installare queste dipendenze extra qui
per assicurarti che React navigation funzioni con expo.
Quindi, con quello installato, ora ovviamente possiamo impostare la navigazione qui nei luoghi navigatore e per questo, qui
importerò dalla navigazione React e quello che importerò è ovviamente la funzione
di creazione dello stack navigator, quindi crea stack navigator e
creare anche un contenitore di app che dobbiamo anche fare perché dovremo fare entrambe le cose:
creare un navigatore dello stack e configurare successivamente il contenitore dell'app.
Ora dobbiamo anche importare le schermate con cui vogliamo lavorare e quella sarebbe la schermata dell'elenco dei luoghi che importerò
dalla cartella delle schermate e lì, è la schermata dell'elenco dei luoghi. Avremo anche bisogno della schermata dei dettagli del
luogo, della schermata dei dettagli del luogo che viene importata dalle schermate della schermata dei dettagli del
luogo e, ovviamente, delle altre due schermate.
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
della mappa qui dalla cartella delle schermate e quindi quella sarebbe la schermata della mappa.
Ora possiamo impostare il nostro navigatore dello stack qui e memorizzerò questo navigatore di posti in una costante e, come
hai anche imparato, ora stiamo mappando gli identificatori alle nostre schermate,
quindi abbiamo forse l'identificatore dei luoghi mappato alla schermata dell'elenco dei luoghi , abbiamo identificato l'identificatore del
dettaglio del luogo sulla schermata
dei dettagli del luogo, abbiamo anche mappato il nuovo identificatore del luogo sulla nuova schermata del luogo e, ultimo ma
non meno importante, forse mappato sulla schermata della mappa. E con ciò, qui possiamo impostare alcune opzioni di navigazione predefinite,
quindi passerò un secondo argomento e ovviamente l'impostazione è totalmente facoltativa, ma aggiungerò quindi le opzioni di
navigazione predefinite su ogni schermata e voglio definire il mio stile di intestazione qui e assicurati che ci stiamo usando un colore
di sfondo a seconda che sia in esecuzione su Android o meno.
Quindi importerò questa cosa API della piattaforma da React Native e avrò bisogno anche del mio colore, quindi importerò anche
i colori da Costanti / colori, che è anche necessario perché con ciò, ora possiamo verificare se il sistema operativo della piattaforma
è Android e se lo è, possiamo assicurarci che il colore di sfondo dell'intestazione sia
il nostro colore principale, altrimenti
non imposterò alcun colore, voglio usare l'aspetto trasparente predefinito che utilizza iOS e qui anche impostare un colore
di tinta per il testo lì, controllando ancora la piattaforma perché se la piattaforma è Android
poiché abbiamo uno sfondo solido, imposterò il colore della tinta su bianco, per iOS farò il
contrario, lì lo imposterò sul mio colore primario. Ora che è qui, non ho caratteri personalizzati in questo
progetto, ovviamente potresti aggiungerne alcuni se lo desideri. Con questa configurazione, possiamo esportare il nostro contenitore di app che
dobbiamo quindi creare con il contenitore di app creato e passare qui il navigatore dei luoghi. Ora questa è la navigazione impostata,
ovviamente nell'app.
js file ora possiamo usarlo.
Quindi qui dovremmo importare i luoghi navigatore dalla cartella di navigazione, luoghi navigatore, quindi non abbiamo più bisogno di importare
la vista qui e possiamo semplicemente restituire luoghi navigatore. Dal momento che non sto caricando alcun carattere personalizzato,
non ho nemmeno bisogno di fare questa app caricando cose che
abbiamo fatto in precedenza o in altri moduli, qui posso solo restituirlo dall'inizio.
Ora in queste schermate qui, nella schermata dell'elenco dei luoghi, importerò React da React, importerò un paio di cose da React Native,
probabilmente una vista, un testo e un
foglio di
stile e quindi possiamo vedere se abbiamo bisogno di qualcos'altro più tardi da React Native e quindi impostare la costante
qui, la schermata dell'elenco dei luoghi è un normale componente React che riceve oggetti di scena e che alla fine restituisce del
contenuto, qui restituirò semplicemente una vista con un testo dello schermo dell'elenco
dei luoghi, quindi solo alcuni contenuto fittizio per ora e anche il foglio di
stile impostato qui con il foglio di stile. creare e infine
esportare la schermata dell'elenco dei luoghi.
E questo sarà lo scheletro di base che possiamo usare
per ogni vista, quindi lo lascerò cadere in ogni vista e regolerò questo nome qui.
Quindi qui abbiamo la schermata dei dettagli del luogo che voglio usare e quindi copiarla anche nella nuova schermata del luogo
e sostituire questo nome qui in tutti e tre i
luoghi e, ultimo ma non meno importante, rilascialo anche nella schermata della mappa per averlo qui
come bene e poi ovviamente aggiungeremo il contenuto reale in questo modulo.
Quindi sono le schermate create, se ora
lo salviamo e lo esegui con npm start o con expo start e lo esegui sul tuo
emulatore o emulatore preferito, una volta terminato questo edificio, dovremmo vedere la schermata dell'elenco dei luoghi
alla fine, come Questo.
Ora, ovviamente, non abbiamo un titolo dell'intestazione qui, quindi assicuriamoci di impostarne uno, anche su Android
andando alla schermata dell'elenco dei luoghi e lì, possiamo aggiungere opzioni di navigazione nella schermata dell'elenco dei luoghi e impostarlo su
un oggetto statico qui dove possiamo aggiungere un titolo di intestazione di tutti i luoghi o qualcosa del genere e con quello
ovviamente, una volta ricaricato, vediamo quel titolo qui nella schermata dell'elenco dei luoghi.
Quindi questa è la schermata di base impostata di cui avremo bisogno per questo modulo qui. Detto questo, prima di approfondire ulteriormente il contenuto
delle altre schermate, assicuriamoci di avere
un pulsante più anche qui nell'intestazione che ci porti alla schermata del
nuovo posto perché è lì che possiamo iniziare a toccare funzionalità del dispositivo nativo e
con l'aggiunta di luoghi.
Ora ovviamente sai come aggiungere un pulsante all'intestazione del tuo navigatore, tutto ciò che devi fare è installare un nuovo pacchetto
con npm install --save e questo è il pacchetto di intestazione-pulsanti di reattiva navigazione che abbiamo usato un paio di
volte durante questo corso e lo userò esattamente nello stesso modo in cui l'ho usato
nel resto del corso.
Quindi creerò una cartella di componenti in cui posso impostare il mio
componente pulsante intestazione per avere quel componente pulsante riutilizzabile preconfigurato e in quel componente, importare il pulsante intestazione da questo pacchetto di
pulsanti di intestazione di navigazione React che abbiamo appena installato. Importa Ionicons da expo / vector-icons, un pacchetto che potresti voler installare nel
caso in cui tu stia riscontrando errori qui con npm
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
personalizzato componente regolare che riceve oggetti di scena che restituiscono alcuni jsx e qui
voglio restituire il pulsante di intestazione che stiamo importando, ma ora lo configureremo solo per
i nostri requisiti.
Innanzitutto inoltrando tutti i puntelli ad esso e quindi possiamo impostare la componente icona su ionicon
in modo
che venga utilizzata, impostare la dimensione dell'icona qui forse su 23 perché penso che abbia funzionato abbastanza
bene finora e impostare
il colore su e ora avrò bisogno di un'altra importazione, dovrò importare la piattaforma da React Native perché ora voglio controllare la
piattaforma qui e se la piattaforma
è Android, avremo uno sfondo solido, quindi quindi voglio usare il bianco come un icona
a colori, altrimenti uso il mio colore principale.
Ora, l'unica cosa che resta da fare è esportare questo pulsante di intestazione personalizzato qui e ora possiamo iniziare
a usarlo nella schermata dell'elenco dei luoghi. Lì anche come prima,
importerò altri due pacchetti da reagire-navigazione-intestazione-pulsanti, altre due cose da questo pacchetto e che sarebbero i miei pulsanti di intestazione
e l'oggetto, entrambi devono essere importati e inoltre, possiamo anche importare il nostro proprio il pulsante
dell'intestazione personalizzato ora dalla cartella dei componenti e lì da questo file del pulsante
dell'intestazione in cui abbiamo appena lavorato. Ma con quello importato, possiamo cambiare qui le
nostre opzioni di navigazione in modo che siano dinamiche, dove abbiamo questa funzione che ci fornisce i dati di
navigazione e che alla fine restituisce questo oggetto di configurazione perché questo ci permetterà quindi di associare il pulsante a qualche
funzione che riceviamo tramite parametri di rotta perché qui, voglio aggiungere l'intestazione giusta per aggiungere i miei pulsanti di intestazione e ovviamente
questo è anche uno schema che abbiamo fatto molte volte durante questo corso, abbiamo aggiunto i
pulsanti di intestazione in questo modo e abbiamo l'oggetto lì dentro. Sul componente pulsanti intestazione, possiamo impostare il componente
pulsante intestazione e puntare al componente pulsante intestazione personalizzato qui e sull'elemento, ora impostiamo un titolo, come aggiungi
luogo e impostiamo un nome icona qui che dipende dalla piattaforma,
quindi quindi in realtà importerò questa API della piattaforma qui da React Native e ora possiamo verificare se il
sistema operativo della piattaforma è Android, in tal caso, quindi voglio impostarlo su md aggiungi, altrimenti su iOS aggiungere
che aggiunge un pulsante più per il piattaforma specifica, quindi
seguendo l'aspetto specifico di quella piattaforma. Dobbiamo anche aggiungere la funzione onPress e
lì se lo tocchiamo, voglio semplicemente navigare con il metodo di navigazione qui ed è per questo che dobbiamo avere
questa funzione dinamica qui, in modo da avere accesso ai dati di navigazione e quindi alla navigazione,
navigare verso un nuovo posto e un nuovo posto qui, ovviamente, è il mio identificatore nel navigatore dei luoghi di questa nuova schermata dei luoghi.
Quindi, con quello, abbiamo un modo di andare a quello schermo e quindi se salviamo questo, dovremmo essere
in grado di farlo.
Ovviamente sto ricevendo un errore perché nel mio componente pulsante intestazione, poiché ho un componente React lì dentro,
importare React da React non sembra l'idea peggiore, quindi ripariamolo rapidamente qui nel componente
pulsante intestazione ma ora con quello , mentre questo viene ricaricato, abbiamo questo pulsante più e possiamo
andare alla schermata dei nuovi luoghi, alla schermata dei nuovi luoghi, ovviamente anche qui su Android.
Ora su quella nuova schermata del luogo, possiamo quindi aggiungere anche opzioni di navigazione per impostare un titolo,
nuove opzioni di navigazione della schermata del luogo, impostarlo su un oggetto statico per il momento perché in questo momento
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
per aggiungere posto e con quello se lo salviamo, ovviamente se andiamo lì, vediamo quel titolo nell'intestazione.
Quindi questa è la configurazione di base qui,
ora possiamo lavorare su quella schermata Aggiungi posto per assicurarci di poter aggiungere un posto.