Ora che abbiamo il flusso di base verso il basso, che possiamo navigare tra i nostri prodotti, aggiungerli al carrello
e quindi utilizzare anche il carrello per effettuare un ordine e anche visualizzare tale ordine e, naturalmente, anche
modificare il carrello
se volessimo, ora che tutto ciò è fatto, è tempo di passare all'ultima parte di questa applicazione,
che è ovviamente la parte in cui è possibile aggiungere nuovi prodotti.
Ora questa è anche la parte che perfezioneremo più avanti perché in seguito, ovviamente, ci immergeremo più a fondo nella gestione dell'input dell'utente
e persino memorizzeremo quei dati su un server, ma possiamo già iniziare qui. Per iniziare, la schermata del prodotto dell'utente e la
schermata di
modifica del prodotto diventeranno importanti ora perché sono le schermate in cui
vediamo tutti i nostri prodotti e in cui possiamo anche modificare i prodotti.
Quindi iniziamo con la schermata
dei prodotti dell'utente e trasformiamola in un componente React
importando React da React e, ovviamente, importando cose da React Native. Le cose che voglio importare qui sono di nuovo l'elenco piatto
perché alla fine visualizzerò un elenco di prodotti nella schermata dei
prodotti di questo utente.
Quindi qui, abbiamo il componente dello schermo dei prodotti dell'utente che riceve i puntelli e dove
poi devo restituire un po 'di jsx e nella parte inferiore del file, esporterò questo componente come predefinito.
Questo è il mio componente predefinito impostato che ho usato più e più volte. Ora qui, voglio produrre i miei
componenti, i miei prodotti con un elenco semplice e riutilizzerò quel componente dell'articolo prodotto che
abbiamo creato in precedenza.
Quindi, tornando ai prodotti degli utenti, possiamo importare
l'articolo del prodotto dalla cartella dei componenti, quindi andiamo qua
e là, per fare acquisti e quindi ordinare, non ordinare ma articolo del prodotto e
qui, ovviamente, passiamo anche alcuni dati. Ora i dati che voglio passare qui dovrebbero essere i prodotti
che appartenevano al mio utente che ha effettuato l'accesso.
Al momento non abbiamo effettuato l'accesso, ma se ricordi il riduttore dei prodotti, stiamo fingendo che
abbiamo perché lì abbiamo quell'array di prodotti utente che contiene tutti i prodotti che in questo caso hanno
un ID utente, un ID proprietario di U1 e suppongo per il momento di avere alcuni dati fittizi sul fatto che questi sono i nostri
dati utente attualmente registrati, in seguito questo sarà ovviamente dinamico. Quindi il prodotto dell'utente è ciò di
cui abbiamo bisogno, nella schermata dei prodotti dell'utente, quindi abbiamo bisogno di
ottenere quei dati da Redux con l'aiuto del selettore d'uso da React Redux, come
questo e qui otteniamo i nostri prodotti utente chiamando selettore d'uso dove passiamo in quella funzione, ottiene lo stato, quindi raggiunge la parte
dei prodotti dei prodotti del nostro negozio perché è l'identificatore che uso lì e
quindi, come ho appena detto, accedi a questo campo prodotti utente qui, quindi nella schermata del prodotto
utente, qui abbiamo accesso. prodotti per l'utente. I prodotti utente sono ora l'array che
inseriamo nei dati, come sempre qui aggiungerò un estrattore di chiavi che mi fornisce l'ID perché il mio prodotto come memorizzato qui nei
prodotti dell'utente utilizza ovviamente il mio modello di prodotto alla fine e quindi ha
un ID che è un identificatore univoco che posso usare, quindi lo userò e poi ovviamente come sempre, anche
noi dobbiamo aggiungere un oggetto di rendering, ovviamente già conosci quel modello. Il rendering dell'articolo ottiene i dati dell'articolo qui e desidero restituire un
nuovo articolo prodotto per ogni voce qui e l'articolo prodotto, se lo guardiamo, prende un paio di informazioni.
Qui ci vuole un dettaglio di visualizzazione, ci vuole un titolo, un prezzo, un immagine e poi anche un elemento Aggiungi
al carrello.
Ora potresti già vedere che non tutti questi oggetti di scena si adattano davvero al nostro scopo se
lo usiamo sullo schermo del prodotto dell'utente perché questo non sarà uno schermo in cui possiamo acquistare prodotti, questo non
è uno schermo in cui voglio poter aggiungere prodotti in un carrello. Voglio riprodurli come faccio qui con l'immagine, il prezzo e così via, ma
non mi interessa molto se possiamo fare clic su di essi o su questi pulsanti. Quindi inizierò ad aggiungere l'articolo del
prodotto in questo modo, ma dovremo perfezionarlo.
Ciò di cui abbiamo bisogno è il titolo, il prezzo, l'immagine, i dettagli visualizzati e il carrello Aggiungi.
Quindi abbiamo bisogno dell'immagine qui e quella ovviamente è itemData. articolo. imageUrl perché non
devi dimenticare l'articolo ItemData. elemento nei punti finali di un
prodotto come definito qui nel modello, quindi avremo questa proprietà imageUrl e quindi qui avremo anche bisogno del titolo
accessibile tramite itemData. articolo. titolo. Abbiamo bisogno del prezzo accessibile con itemData. articolo. prezzo e se diamo uno
sguardo al componente dell'articolo del prodotto, che soddisfa tutto ciò di cui abbiamo bisogno qui, ma ora abbiamo
bisogno di visualizzare i dettagli su e su aggiungi al carrello e li aggiungerò temporaneamente, ma dovremo trovare una soluzione diversa
qui.
Quindi, in dettaglio i dettagli sono una funzione
vuota al momento e su aggiungi al carrello, anche una funzione vuota e la implementeremo in modo diverso in seguito.
Per il momento, tuttavia, sto producendo un articolo del prodotto qui e quindi
ora possiamo navigare alla schermata dei prodotti dell'utente. Per arrivarci, è tempo di tornare al navigatore del negozio e alla fine,
voglio aggiungerli al mio navigatore dei cassetti ma come stack separato, proprio come i prodotti e gli ordini sono uno stack
separato, anche questo dovrebbe essere uno stack separato .
Possiamo semplicemente copiare lo stack del navigatore degli ordini qui, replicarlo e importare qui la schermata del prodotto dell'utente,
quindi la schermata dei prodotti dell'utente dalla cartella delle schermate, lì dalla cartella dell'utente e quindi la schermata del prodotto
dell'utente e mapparla nella pila appena copiata laggiù che Non nominerò il navigatore degli ordini perché ho già questo
nome qui ma lo nominerò, diciamo forse admin navigator forse e qui, ho il mio identificativo dei
prodotti utente che punta alla schermata dei prodotti dell'utente. Ora qui come icona, nel cassetto voglio
avere un md create e ios creare un'icona e altro, questo dovrebbe andare bene.
Ora non ci resta che aggiungere questo navigatore al nostro navigatore dei cassetti.
Lì aggiungerò la chiave dell'amministratore e indicherò il navigatore dell'amministratore, quindi ora dovremmo effettivamente
essere in grado di raggiungerlo. Se torniamo all'app, abbiamo la voce dell'amministratore e
se faccio clic su di essa, otteniamo un problema relativo ai miei prodotti utente,
lo stato non definito non è un oggetto, diamo una rapida occhiata alla schermata del prodotto
dell'utente, sì, che dovrebbe essere prodotti perché la nostra fetta è denominata prodotti qui nel riduttore combinato.
Quindi qui dovrebbero esserci anche
prodotti, piccolo errore di battitura da parte mia. Ora questo sembra migliore e ora, potrebbe sembrare che non sia cambiato nulla,
ma in realtà, puoi vedere che i miei elementi di navigazione sono spariti perché ora sono su una nuova schermata ma ho la mia
vecchia lista qui ma con meno prodotti.
Se si confronta Android dove sono nella schermata iniziale, ci sono più prodotti lì,
ora ho solo quelli in cui U1 è l'ID proprietario.
Quindi va
bene, ma ovviamente non mi piacciono questi pulsanti qui e
voglio anche avere una voce di menu qui e un titolo di intestazione ovviamente.
Ci sono alcune cose che dobbiamo correggere, ovviamente questi pulsanti sono la cosa più importante o
la cosa più sorprendente che è sbagliata. Tuttavia, inizierò con l'intestazione,
nella schermata dei prodotti dell'utente qui, possiamo
aggiungere le opzioni di navigazione, schermata dei prodotti dell'utente. opzioni di navigazione e lì, ad esempio impostare un titolo
di intestazione dei tuoi prodotti e abbiamo anche bisogno del pulsante menu, quindi possiamo effettivamente andare anche alla schermata di panoramica del prodotto
e da lì, copiare questa parte di intestazione a sinistra qui, tornare alla
schermata del prodotto dell'utente e aggiungilo qui.
Ora, tuttavia, abbiamo bisogno di quella forma di funzione delle opzioni di navigazione in cui poi alla
fine restituiamo un oggetto con tutte le opzioni lì dentro, quindi è qualcosa che dobbiamo cambiare in questo
modo e dobbiamo anche assicurarci di importare l'elemento dei pulsanti di intestazione e pulsante di intestazione.
Quindi, nella schermata di panoramica del prodotto, ho queste importazioni qui, copiarle dalla
schermata di panoramica del prodotto, andare alla schermata
del prodotto dell'utente e aggiungerle in questo
modo, ad esempio in modo da importare tutto ciò
di cui hai bisogno.
Dobbiamo anche importare un'API della piattaforma perché la stiamo usando anche durante l'impostazione dei pulsanti di intestazione.
Ora almeno, quando andiamo nell'area di amministrazione, abbiamo il nostro titolo qui, abbiamo di nuovo il cassetto, il pulsante del menu,
ma ora
che dire di questi pulsanti qui?
Dovremo cambiare l'aspetto del nostro prodotto.