Quindi iniziamo a lavorare su questa app quindi e per
questo, ho una nuovissima app qui, la
troverai allegata nel caso in cui desideri costruire su questa stessa app iniziale.
Questa semplice app ci dà questo qui, un'app molto brutta in cui abbiamo del testo che è sovrapposto
dalla barra di stato, dalla tacca.
Ora potremmo risolvere il problema con la visualizzazione dell'area di salvataggio come hai imparato in precedenza, ma non
sarà necessario perché non terremo comunque questi contenuti e utilizzeremo una libreria di terze parti che ci consente di navigare facilmente
tra schermate diverse e ottenere simpatiche animazioni lungo la strada, in
modo che non ci dobbiamo
preoccupare di questo e questa libreria di terze parti gestirà anche la tacca sul dispositivo e ci darà questa area di
salvataggio pronta all'uso.
Ora prima di aggiungere quella libreria di terze parti, iniziamo a scrivere un po 'di codice perché
possiamo navigare tra le schermate solo se abbiamo più schermate.
Quindi, creerò una nuova cartella di schermate qui e creerò anche una cartella di
componenti, la differenza sarà che nella cartella delle schermate abbiamo questi componenti di
React che poi utilizzeremo come schermate complete invece nella cartella dei componenti, avremo i componenti che utilizziamo sui
nostri schermi,
quindi ad esempio quando abbiamo quella griglia di categorie di pasti, di categorie di alimenti, il
nostro elemento della griglia sarebbe un componente, l'intera griglia, le intere categorie di alimenti lo schermo tuttavia
sarebbe uno schermo e immagino che abbia senso. Ora come abbozzato, come disposto, in questa app avremo bisogno di un paio di schermate e
creerò già tutti i file e ovviamente li riempiremo di vita in questo modulo. Avremo bisogno della schermata delle categorie
e nominerò la schermata delle categorie di file per chiarire cosa c'è
dentro.
Questa è la schermata in cui possiamo selezionare una categoria come italiano, tedesco, americano, quindi dove possiamo selezionare
una categoria di alimenti, quindi aggiungeremo contenuti che riflettono questo, aggiungeremo una griglia simile in questa schermata, in
questa schermata componente più tardi.
Ora una volta selezionata una categoria, vedremo un elenco di pasti che rientrano in questa categoria e nominerò questa schermata
che vedremo, a cui andremo, schermata della categoria pasti perché questa è la schermata che
carica i pasti per una categoria scelta.
Quindi è un'altra schermata di cui abbiamo bisogno e un'altra schermata su cui saremo in grado di navigare.
Ora avremo anche bisogno di una schermata dei preferiti che è la schermata che contiene tutte le nostre ricette preferite, i
nostri pasti preferiti e avremo anche bisogno di una MealDetailScreen, questa è la schermata che vediamo se tocchiamo un singolo pasto all'interno
di una categoria scelta o su lo schermo preferito. Questo quindi ci mostra gli ingredienti e
i passaggi dettagliati per questo pasto.
Ora e ultimo ma non meno importante, abbiamo bisogno di una schermata di filtri e questa schermata di filtri è la schermata
che ci consente di impostare filtri, come cibo vegano in modo da vedere solo ricette che sono vegane o vegetariane o senza glutine o
senza lattosio, queste saranno le quattro
categorie che avrò in questa app, quindi queste sono le schermate. Ora aggiungeremo i componenti quando ne abbiamo bisogno
e non aggiungeremo tutti i file in anticipo
e, con ciò, abbiamo la configurazione di base di cui abbiamo bisogno qui, anche se ovviamente tutti
i nostri schermi sono completamente vuoti. Ora li popoleremo con più vita passo dopo passo, ma
almeno voglio impostare un componente di base in ciascuna di queste schermate.
Quindi inizierò nella schermata delle categorie e, naturalmente, dobbiamo importare React da React lì perché
costruiremo un componente React e importeremo anche qualcosa da React Native perché ovviamente costruiremo un componente React qui
che utilizza alcuni componenti nativi di React. Per essere precisi, inizierò qui semplicemente e importerò
una vista e un testo da React Native e quindi creerò il mio componente, la schermata delle
categorie in questo caso che accetta oggetti di scena o che potrebbero ricevere oggetti di scena almeno perché è un normale
componente React dopo tutto e dove esporterò questo come componente predefinito. Aggiungerò anche un foglio di stile perché è
probabile che ne avremo bisogno e, in caso contrario, possiamo ancora eliminarlo in seguito.
Quindi imposterò qui i miei stili con
la creazione di fogli di stile, in questo modo.
Quindi questo è un componente di React molto semplice, ma
non rende nulla, quindi all'interno della funzione del componente qui, dovremo restituire qualcosa e quel qualcosa è
un codice jsx dove voglio renderizzare una vista e lì dentro un testo e qui dico la schermata delle categorie.
Ora darò anche a quel punto di vista uno stile in cui dico stili. schermo, con un layout dello schermo molto semplice o uno stile dello schermo
qui in cui ho impostato la flessibilità su uno e quindi giustificare il contenuto al centro e allineare gli elementi
al centro e, come hai appreso, questo
farà una cosa, centrerà il contenuto sullo schermo, quindi centrerà questo testo sullo schermo alla fine.
Questo è il componente di base e copierò quel contenuto in tutte le altre schermate e,
naturalmente, questo non è il contenuto finale che avremo lì, solo alcuni contenuti fittizi in modo che
possiamo iniziare a navigare tra alcune di queste schermate e vedere qualcosa .
Quindi qui, abbiamo la schermata dei pasti di categoria, questo è questo componente qui ed è quindi quello di cui
abbiamo bisogno per esportare qui e qui, quindi dirò la schermata dei pasti di categoria come questa. Ora aggiungerò anche questo alla schermata dei preferiti e lo rinominerò nella schermata dei
preferiti e ovviamente esporterò la schermata dei preferiti
qui e poi qui,
posso dire
la schermata dei preferiti, copiarla nella schermata dei
filtri e fare la stessa cosa lì, è lo schermo
dei filtri, l'ho rinominato e l'ho
esportato e dico anche lo schermo dei filtri qui nel nostro testo e, ultimo
ma non meno importante, questo è il MealDetailScreen.
Quindi qui abbiamo MealDetailScreen,
lo chiamerò anche MealDetailScreen qui ed esporterò MealDetailScreen.
Quindi, con quello, abbiamo impostato tutto in queste schermate, ora abbiamo quasi finito
con tutta la preparazione, voglio solo aggiungere alcuni
caratteri speciali a questa app e, successivamente, ci immergeremo subito nell'aggiungere un po 'di navigazione.