Per questo modulo e per questa app
che stiamo costruendo, troverai di nuovo un progetto iniziale allegato a questa lezione che puoi usare per iniziare
con questo o puoi creare una nuova app expo da solo, ovviamente.
Ora questa è l'app che ho allegato, un'app molto semplice con io sono la tua app che possiamo a malapena vedere che
non ha importanza perché non terremo comunque questo testo e
abbiamo solo quell'app. file js.
Ora molte delle cose che faccio in questo modulo saranno cose che hai visto nei moduli precedenti perché ovviamente questa
è l'idea di base qui.
Praticheremo ciò che abbiamo appreso finora e ci saranno alcune cose nuove o alcuni schemi che
potrebbero essere interessanti anche per te.
Ora, ovviamente, in questa app che ho delineato nell'ultima lezione, avremo un paio di schermate, quindi avremo sicuramente bisogno
di navigazione e quindi aggiungerò una cartella di navigazione in modo da poter memorizzare la mia configurazione di
navigazione lì e questo è ovviamente solo
un possibile setup, come ho già detto prima, puoi lavorare
con qualsiasi struttura di cartelle desideri e che funzioni per te. Oltre alla cartella di navigazione, voglio anche
avere
una cartella di schermate qui, in quella cartella di schermate voglio anche
memorizzare le schermate tra cui possiamo navigare e aggiungerò una cartella di componenti per
tutti i miei componenti normali, ovviamente
anche le schermate sono React componenti ma i componenti normali intendo qui sono i
componenti che non cariciamo direttamente come schermate ma che invece incorporiamo nelle schermate o in
altri componenti, quindi è quello che avremo qui. Aggiungerò anche una cartella delle costanti perché, di nuovo,
lavorerò qui con le mie costanti di colore in modo da poter usare i miei colori preselezionati nell'intera applicazione.
Ora ci sono un sacco di modi diversi di iniziare, quello che mi piace fare prima nelle mie
app è che inizio con
le schermate, anche se non aggiungo ancora il contenuto a tutte, mi piace aggiungere questo generale struttura in modo
da poter sempre vedere su cosa ho ancora bisogno di lavorare, quali funzioni mancano ancora.
Quindi, aggiungerò le schermate che avrò in questa app e
qui farò qualcosa che non ho mai fatto prima e che è totalmente opzionale ma organizzerò
le mie schermate in sottocartelle separate.
Avrò una cartella con le schermate relative al mio negozio e
ovviamente poiché costruiremo un'app per lo shopping, tutte le schermate sono in qualche modo correlate al
negozio ma qui voglio avere le schermate che ci aiutano direttamente a visualizzare i nostri prodotti, aggiungendoli al
carrello
e così via e quindi desidero avere una cartella separata e quella è la mia cartella utente che potresti dire, lì voglio
avere le schermate relative all'utente, in
modo che siano i miei prodotti utente e i prodotti di amministrazione.
È così che lo
dividerò, ma ovviamente puoi organizzarlo come preferisci.
Quindi nella cartella del negozio qui, ad esempio, voglio avere la schermata di panoramica dei miei prodotti e quella sarà la
schermata che vediamo quando l'app carica dove abbiamo tutti i prodotti con cui lavorare e dove possiamo
quindi selezionare un prodotto o aggiungerlo direttamente al carrello. Avremo quindi bisogno anche di una schermata di dettaglio del prodotto, che è
la schermata che vediamo quando selezioniamo un prodotto e vogliamo saperne di più su di esso, quindi possiamo fare clic su
di esso o toccarlo e portarci a quella schermata di dettagli. Avremo anche bisogno di una schermata del carrello, che è ovviamente lo
schermo che vediamo quando aggiungiamo un articolo al carrello o meno che poi vediamo ma che possiamo visitare per visualizzare
l'oggetto
lì, quindi è qualcosa che
possiamo fare lì e io ' Aggiungerò anche una schermata degli ordini in cui possiamo visualizzare i nostri ordini.
Ora potresti in ogni caso affermare che la schermata del carrello e la schermata dell'ordine appartengono alla cartella
dell'utente perché sono in qualche modo esclusive per l'utente, ogni utente ha i
suoi ordini e il suo carrello e quindi puoi andare in entrambi i modi, Credo che siano
un po 'più dal punto di vista dei prodotti del negozio, ma
ancora una volta, dipende da te. Nella cartella utente, voglio
avere la schermata dei miei prodotti utente, quindi quella sarà la schermata in cui vedo un elenco di tutti i
prodotti che appartengono a quell'utente e la schermata di modifica del prodotto che è la schermata che useremo per aggiungere nuovi prodotti
o per la modifica di prodotti
esistenti, saremo in grado di riutilizzarli.
Queste sono le schermate in cui lavoreremo
in questo modulo e non le popoleremo di vita immediatamente in questo momento, invece lavoreremo su quel passo per passo
ma
è quello di cui avremo bisogno.
Ora, naturalmente, c'è anche un'altra cartella che possiamo già aggiungere e questa è la cartella
del negozio in cui gestiremo il nostro negozio Redux e il nostro stato Redux, quindi quale è il nostro
sistema di gestione dello stato con cui voglio lavorare, di cui ovviamente abbiamo bisogno perché ne abbiamo molti schermi
che devono funzionare su tipi di dati correlati e quindi abbiamo bisogno di gestire quei dati, i nostri prodotti e cosa c'è
nel carrello
e così via a livello globale e Redux è davvero
ottimo per questo, quindi ne avremo sicuramente bisogno . Sulla stessa nota, dobbiamo anche installare alcuni pacchetti,
quindi eseguirò npm install --save e installerò Redux e anche React Redux. Avremo anche bisogno di React -navigation
perché ovviamente aggiungeremo di nuovo la navigazione, quindi possiamo già inserirla.
Aggiungerò anche i pulsanti di intestazione di navigazione di React perché aggiungerò qui i pulsanti di intestazione e voglio avere
questi pulsanti ben posizionati e posizionati senza dover fare tutto quel posizionamento di
stile da solo e dovrebbe essere per ora.
Quindi installerò già tutti questi pacchetti, ne avremo bisogno in tutto questo
modulo e con questi pacchetti installati e questi file di base creati, abbiamo una solida base per iniziare.
Ora oltre a questi pacchetti, abbiamo anche bisogno di installare altri due pacchetti con
l'aiuto del comando expo install e questo è il gestore di gesti-reazione-nativi, quindi expo installa il gestore di gesti-nativi di
React e anche il pacchetto rianimato di reazione-nativa . Entrambi i pacchetti devono anche essere installati
con il comando expo install.
Ora, ovviamente, si tratta di popolarlo con la vita e lì
voglio iniziare con la prima schermata che vedremo effettivamente qual è la schermata di panoramica dei prodotti.