Lavoriamo nella schermata degli ordini prima di aggiungere la navigazione, non è necessario
completarla ma voglio essere in grado di visualizzarla.
Quindi, lì, importa React da React in modo da poter costruire un componente React valido, importare qualcosa da React Native
come sempre e che qualcosa è anche ciò a cui siamo praticamente abituati, giusto?
Non è mai così sorprendente.
Avremo bisogno
di una vista, probabilmente avremo bisogno di un elenco piatto perché avremo potenzialmente più ordini, un importo infinito
e voglio essere in grado di renderlo e con quello qui, possiamo costruire la schermata dei nostri ordini in questo modo.
Esporterò anche questo ovviamente e lo styling non dovrebbe davvero essere richiesto qui, in realtà non dovremmo nemmeno aver bisogno della vista qui
perché voglio solo produrre il mio elenco di ordini. Quindi, ovviamente, i dati di cui abbiamo bisogno verranno
da Redux, quindi dovremmo importare
utilizzare il selettore da React Redux che ci consente di accedere al negozio Redux.
Quindi qui, possiamo ottenere i nostri ordini con l'aiuto del selettore di utilizzo e usa il selettore ora indica lo stato. ordini e che ovviamente è l'identificatore che ho assegnato qui
negli ordini di riduttori combinati qui, questo ci dà accesso alla porzione di stato gestita
dal riduttore di ordini e lì, abbiamo un'altra
proprietà di ordini che contiene la matrice effettiva di ordini.
Quindi qui ho bisogno di accedere allo stato. ordini. gli ordini alla fine,
che mi dà i miei ordini che sono memorizzati in Redux.
Ora qui, abbiamo solo bisogno di restituire la nostra lista piatta e questo riceve ordini che dovrebbero
essere una matrice e quali sono come dati. Ora un estrattore di chiavi non è richiesto nelle versioni più recenti di React
Native perché ogni ordine se dai un'occhiata al modello ha un ID e le versioni più
recenti di React dovrebbero cercarlo ma per sicurezza, lo aggiungerò qui e renderò l'articolo ora ovviamente dovrebbe contenere una funzione che riceve i dati dell'articolo e che
alla fine restituisce tutto ciò che vogliamo rendere per ordine. Ora un articolo dell'ordine sarà più complesso in futuro, per
ora
emetterò un po 'di testo, di nuovo in modo da avere rapidamente qualcosa sullo schermo che
possiamo vedere prima di perfezionarlo.
Il testo qui per l'articolo dato potrebbe essere e ora diamo
un'occhiata all'ordine, lì abbiamo l'ID, abbiamo gli articoli che sono ancora un altro elenco,
quindi
la cosa più semplice da produrre è semplicemente l'importo. Quindi qui emetterò solo la proprietà dell'importo totale
che il mio ordine ha qui.
Questo è ciò che
ho prodotto nell'elenco piatto, ora abbiamo una schermata
degli ordini di base, ovviamente ora dobbiamo essere in grado di raggiungerlo. Quindi andiamo al navigatore del negozio e importiamo
qui la schermata degli ordini, la schermata degli ordini dalla cartella delle schermate, dalla schermata degli ordini del negozio e ora qui la
cosa importante è che non voglio aggiungerlo a questo navigatore dello stack perché non fa parte di
questo stack,
invece voglio raggiungerlo con un menu, con un menu laterale.
Quindi avremo bisogno di costruire un navigatore dei cassetti.
Ovviamente potresti anche lavorare con le schede se preferisci questo, ma voglio lavorare con un cassetto qui,
quindi abbiamo bisogno di quel navigatore dei cassetti.
Ora la schermata degli ordini, anche se sarà l'unico elemento, dovrebbe essere nel suo stack,
in modo da avere anche un'intestazione lì.
Quindi, creerò un nuovo navigatore ordini qui dove creo un altro navigatore dello stack e lì, l'unica mappatura di cui ho bisogno sono gli ordini che puntano alla
schermata degli ordini, il secondo argomento qui dovrebbe ancora impostare alcune opzioni di navigazione predefinite e userò le stesse opzioni
che faccio qui, quindi prenderò effettivamente questo oggetto, lo taglierò
da qui e lo memorizzerò in una costante separata, opzioni di navigazione predefinite, come questo, questo è
un modello che ho già
usato nel modulo di navigazione perché ora possiamo usare questa costante qui
nel navigatore prodotti per le opzioni di navigazione predefinite e anche qui nel navigatore ordini.
Ora, ovviamente, l'obiettivo è quello di creare un navigatore dei cassetti che chiamerò il navigatore del negozio in generale perché
combina diverse funzionalità del negozio che
potresti dire con l'aiuto della creazione del navigatore dei cassetti. Ora voglio unire queste due pile, il
navigatore dei prodotti e il navigatore degli ordini, quindi
qui abbiamo bisogno dei prodotti con il navigatore dei prodotti e gli ordini che puntano sul navigatore
degli ordini, quindi su questi navigatori dello stack. Voglio anche configurare le mie opzioni di contenuto lì
sul cassetto, questo mi permette ad esempio di impostare il colore della tinta degli elementi quando
sono selezionati e lì voglio impostare il colore della tinta attiva su Colori. primario in modo che siano colorati con il colore primario se sono selezionati.
Ora è il navigatore del negozio che dovrebbe essere restituito qui. Questo da solo non farà il trucco, ma è un
primo passo, ora
prima di aggiungere il pulsante del menu, andiamo alla schermata degli ordini e lì effettivamente aggiungiamo un titolo, quindi aggiungerò lì le opzioni di
navigazione, impostarlo su un oggetto, in questo momento non
abbiamo bisogno di opzioni
dinamiche qui perché voglio solo impostare il titolo dell'intestazione per i tuoi ordini e ora che ci penso, dovremmo
anche
aggiungere questo sullo schermo del
carrello dove non lo sto ancora facendo. Lì voglio anche
impostare questo sullo schermo del carrello, impostarlo sul carrello.
Quindi questo è ora nelle opzioni di navigazione nella schermata
del carrello, questo è nella schermata degli ordini o questo navigatore è impostato. Con tutto ciò impostato, dobbiamo aggiungere questo pulsante di
menu, questa icona di hamburger ad esempio nella schermata di panoramica dei prodotti in cui voglio essere in grado di aprire
il cassetto e andare ai miei ordini. Ora per aggiungerlo lì, andiamo alle opzioni
di navigazione della schermata di panoramica del prodotto che è già dinamica,
il
che è buono e quindi oltre ad aggiungere l'intestazione a destra per questa icona del carrello, aggiungiamo
headerLeft e headerLeft dovrebbe contenere anche i pulsanti di intestazione, ma ovviamente lì , saranno le mie voci di menu, quindi lo
chiamerò così e lì, voglio usare il menu md o il menu ios a seconda della piattaforma su cui siamo in
esecuzione e voglio navigare ovviamente
da nessuna parte, invece con la navigazione prop qui per così dire, voglio chiamare cassetto a levetta che aprirà
il cassetto laterale. Ora la stessa
configurazione è richiesta anche nella schermata degli ordini in modo che possiamo lasciare quella schermata.
Quindi in realtà qui, avremo bisogno di quella configurazione dinamica delle opzioni di navigazione in cui abbiamo
una funzione qui in cui restituiamo il nostro oggetto di configurazione in modo che in là, possiamo anche aggiungere headerLeft con
i pulsanti header, con il nostro menu che attiva / disattiva il cassetto che si basa sui dati
di navigazione qui e, naturalmente, per questo, dobbiamo importare i pulsanti di intestazione, il pulsante di intestazione e l'elemento, quindi alla fine della
schermata di panoramica del prodotto, devo importare
queste cose qui, queste due righe devono essere aggiunte anche alla schermata degli ordini.
Quindi, lasciami aggiungere, aggiungendo
i pulsanti di intestazione e l'importazione degli elementi dai pulsanti di intestazione di navigazione di React e
l'importazione dei pulsanti di intestazione dal nostro componente personalizzato. Ora con questo, se salviamo questo, dovremmo avere un
pulsante di menu qui e lo facciamo, apre il cassetto, possiamo andare agli ordini e qui ricevo un errore
perché nella schermata dell'ordine, ovviamente sto
usando la piattaforma API quindi dovremmo importarlo lì,
facciamolo, aggiungiamo la piattaforma e ora se torniamo indietro, possiamo andare agli ordini e lì possiamo anche tornare indietro e lo stesso è il caso su Android.
Ora, con quello, abbiamo aggiunto il cassetto.
C'è una cosa che voglio aggiungere al cassetto,
ma che non ho mai fatto prima di continuare a lavorare sul mio elenco ordini, non stiamo ancora producendo
nulla perché non stiamo davvero aggiungendo ordini, non abbiamo collegato questo pulsante ordina ora, non stiamo vedendo nulla
che cambi se aggiungiamo qualcosa al carrello, fai clic su Ordina ora una
volta, facendo clic più volte ti darà un errore in questo momento e
poi vedremo quell'ordine qui. Ora dovremo svuotare il
carrello, è un'altra cosa che dobbiamo fare, ma prima di farlo, nel cassetto, voglio anche avere
icone accanto alle mie voci qui e aggiungere queste icone è in realtà molto semplice, vero ' Ho
fatto questo nel modulo di navigazione ma lo faremo ora. Per aggiungere icone, devi solo andare alle schermate che stai
navigando nel tuo cassetto e nel
nostro caso, ovviamente questi due navigatori, quindi questi non sono schermate ma questi due navigatori e
su questi navigatori o se erano schermate , su queste schermate, è possibile impostare le opzioni di navigazione
e, con ciò, non intendo le opzioni di navigazione predefinite impostate per tutte le schermate di quel navigatore, ma
si imposta per questo navigatore se viene utilizzato all'interno di un altro navigatore come è il caso qui.
Quindi possiamo aggiungere qui
le opzioni di navigazione, ancora una volta questo non verrà applicato alle
schermate di questo navigatore, ma invece configurerà questo navigatore
se è una schermata di un altro navigatore e qui il navigatore degli ordini è una schermata del navigatore
del negozio alla fine e lì in queste opzioni di navigazione, possiamo aggiungere una voce dell'icona del cassetto che può essere una funzione che diciamo diciamo la configurazione del
cassetto, questa funzione è chiamata per te dalla navigazione di React e ti dà questa configurazione
del cassetto che ti dice soprattutto qual è il tuo colore di tinta perché qui puoi ora restituire un componente,
come un componente Ionicons per il rendering di un'icona. Per questo devi solo assicurarti di importare Ionicon
da @ expo /
vector-icons, quindi devi aggiungere quell'importazione nel file del navigatore
del negozio e ora con quello aggiunto, se andiamo qui, sto restituendo il mio Ionicon, ora posso
configurarlo
come ho sempre fatto e per quello ancora, possiamo usare l'API della piattaforma che
stiamo già importando qui, se non lo sei, assicurati di farlo. Possiamo usarlo per controllare il sistema operativo e se è
uguale ad Android, allora qui renderò md create come
icona, altrimenti iOS create e questa è solo un'icona che ho scelto in anticipo.
Ora ovviamente, possiamo anche configurare le dimensioni qui e mi atterrò al mio buon vecchio 23 e in aggiunta a ciò, impostare
un colore se lo si desidera e ora ovviamente, che non dovrebbe essere i colori primari
perché quindi questa icona hanno sempre quel colore, invece questo colore dovrebbe essere assegnato dal cassetto che è
la cosa che sa se l'oggetto è selezionato o meno e che cambierà il colore in modo appropriato.
Quindi qui, dovresti accedere a drawer config. TintColor e questo
ti dice quale colore dovrebbe avere al momento e questo colore cambierà a seconda
che sia attualmente selezionato o meno.
Ora è il caso dei miei ordini, mi scusi,
l'icona
qui dovrebbe essere l'elenco md e l'elenco iOS, non creare. Quindi questa è la mia configurazione dell'ordine ora con le icone dell'elenco e ovviamente questa
stessa cosa può essere fatta qui copiandola sul navigatore dei prodotti e lì, voglio usare il carrello md o il carrello iOS, quindi questa
icona del carrello di nuovo e ora questo è quasi pronto per essere utilizzato. Una cosa che devi fare tuttavia è che devi
importare React da React ora in questo file di navigazione perché ora
stai utilizzando componenti con quella sintassi jsx. Come sai, jsx viene
compilato o convertito in React. createElement alla fine e quindi è necessario importare React affinché
questa sintassi funzioni qui.
Ora con questo se torni indietro, hai queste belle icone qui accanto ai tuoi articoli
e sono anche
colorate correttamente, anche qui su Android ovviamente.
Quindi ora che è finito il cassetto laterale, possiamo anche andare alla schermata degli ordini e possiamo persino vedere un
ordine lì.
Tuttavia, in questo momento, il carrello non viene cancellato e quindi se fai clic più volte,
riceverai effettivamente un avviso perché quindi ciò che fai è fare clic su questo troppo velocemente e quindi
creare più ordini con lo stesso pseudo ID univoco in cui noi alla fine usa il timestamp corrente, se fai clic
più volte troppo velocemente è lo
stesso timestamp, ecco perché sta arrivando questo avviso e vorrei cancellare il carrello dopo aver comunque effettuato un ordine.
Quindi assicuriamoci di cancellare il carrello dopo aver effettuato un ordine e quindi, naturalmente, assicuriamo di emettere gli ordini
in un modo migliore di quello che facciamo attualmente.