1 00:00:02,200 --> 00:00:08,380 Ora che abbiamo il flusso di base verso il basso, che possiamo navigare tra i nostri prodotti, aggiungerli al carrello 2 00:00:08,410 --> 00:00:13,900 e quindi utilizzare anche il carrello per effettuare un ordine e anche visualizzare tale ordine e, naturalmente, anche 3 00:00:13,930 --> 00:00:15,040 modificare il carrello 4 00:00:15,070 --> 00:00:20,530 se volessimo, ora che tutto ciò è fatto, è tempo di passare all'ultima parte di questa applicazione, 5 00:00:20,530 --> 00:00:24,430 che è ovviamente la parte in cui è possibile aggiungere nuovi prodotti. 6 00:00:24,430 --> 00:00:29,960 Ora questa è anche la parte che perfezioneremo più avanti perché in seguito, ovviamente, ci immergeremo più a fondo nella gestione dell'input dell'utente 7 00:00:29,980 --> 00:00:36,770 e persino memorizzeremo quei dati su un server, ma possiamo già iniziare qui. Per iniziare, la schermata del prodotto dell'utente e la 8 00:00:36,770 --> 00:00:37,910 schermata di 9 00:00:37,910 --> 00:00:42,560 modifica del prodotto diventeranno importanti ora perché sono le schermate in cui 10 00:00:42,560 --> 00:00:47,450 vediamo tutti i nostri prodotti e in cui possiamo anche modificare i prodotti. 11 00:00:47,480 --> 00:00:49,720 Quindi iniziamo con la schermata 12 00:00:49,750 --> 00:00:53,420 dei prodotti dell'utente e trasformiamola in un componente React 13 00:00:53,600 --> 00:01:01,970 importando React da React e, ovviamente, importando cose da React Native. Le cose che voglio importare qui sono di nuovo l'elenco piatto 14 00:01:01,970 --> 00:01:06,250 perché alla fine visualizzerò un elenco di prodotti nella schermata dei 15 00:01:06,320 --> 00:01:08,260 prodotti di questo utente. 16 00:01:08,630 --> 00:01:15,650 Quindi qui, abbiamo il componente dello schermo dei prodotti dell'utente che riceve i puntelli e dove 17 00:01:15,650 --> 00:01:22,960 poi devo restituire un po 'di jsx e nella parte inferiore del file, esporterò questo componente come predefinito. 18 00:01:23,090 --> 00:01:29,670 Questo è il mio componente predefinito impostato che ho usato più e più volte. Ora qui, voglio produrre i miei 19 00:01:30,000 --> 00:01:38,070 componenti, i miei prodotti con un elenco semplice e riutilizzerò quel componente dell'articolo prodotto che 20 00:01:38,070 --> 00:01:40,560 abbiamo creato in precedenza. 21 00:01:40,560 --> 00:01:44,130 Quindi, tornando ai prodotti degli utenti, possiamo importare 22 00:01:47,030 --> 00:01:51,020 l'articolo del prodotto dalla cartella dei componenti, quindi andiamo qua 23 00:01:51,020 --> 00:01:57,090 e là, per fare acquisti e quindi ordinare, non ordinare ma articolo del prodotto e 24 00:01:57,230 --> 00:02:03,320 qui, ovviamente, passiamo anche alcuni dati. Ora i dati che voglio passare qui dovrebbero essere i prodotti 25 00:02:03,320 --> 00:02:06,140 che appartenevano al mio utente che ha effettuato l'accesso. 26 00:02:06,140 --> 00:02:11,450 Al momento non abbiamo effettuato l'accesso, ma se ricordi il riduttore dei prodotti, stiamo fingendo che 27 00:02:11,450 --> 00:02:17,300 abbiamo perché lì abbiamo quell'array di prodotti utente che contiene tutti i prodotti che in questo caso hanno 28 00:02:17,300 --> 00:02:25,130 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 29 00:02:25,130 --> 00:02:31,930 dati utente attualmente registrati, in seguito questo sarà ovviamente dinamico. Quindi il prodotto dell'utente è ciò di 30 00:02:31,930 --> 00:02:37,930 cui abbiamo bisogno, nella schermata dei prodotti dell'utente, quindi abbiamo bisogno di 31 00:02:37,930 --> 00:02:44,540 ottenere quei dati da Redux con l'aiuto del selettore d'uso da React Redux, come 32 00:02:44,560 --> 00:02:55,680 questo e qui otteniamo i nostri prodotti utente chiamando selettore d'uso dove passiamo in quella funzione, ottiene lo stato, quindi raggiunge la parte 33 00:02:55,680 --> 00:03:02,520 dei prodotti dei prodotti del nostro negozio perché è l'identificatore che uso lì e 34 00:03:02,520 --> 00:03:10,590 quindi, come ho appena detto, accedi a questo campo prodotti utente qui, quindi nella schermata del prodotto 35 00:03:10,590 --> 00:03:18,990 utente, qui abbiamo accesso. prodotti per l'utente. I prodotti utente sono ora l'array che 36 00:03:18,990 --> 00:03:26,870 inseriamo nei dati, come sempre qui aggiungerò un estrattore di chiavi che mi fornisce l'ID perché il mio prodotto come memorizzato qui nei 37 00:03:26,880 --> 00:03:31,860 prodotti dell'utente utilizza ovviamente il mio modello di prodotto alla fine e quindi ha 38 00:03:31,860 --> 00:03:38,400 un ID che è un identificatore univoco che posso usare, quindi lo userò e poi ovviamente come sempre, anche 39 00:03:38,400 --> 00:03:46,830 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 40 00:03:46,830 --> 00:03:53,130 nuovo articolo prodotto per ogni voce qui e l'articolo prodotto, se lo guardiamo, prende un paio di informazioni. 41 00:03:53,670 --> 00:04:05,790 Qui ci vuole un dettaglio di visualizzazione, ci vuole un titolo, un prezzo, un immagine e poi anche un elemento Aggiungi 42 00:04:05,790 --> 00:04:07,300 al carrello. 43 00:04:07,400 --> 00:04:12,840 Ora potresti già vedere che non tutti questi oggetti di scena si adattano davvero al nostro scopo se 44 00:04:12,840 --> 00:04:18,840 lo usiamo sullo schermo del prodotto dell'utente perché questo non sarà uno schermo in cui possiamo acquistare prodotti, questo non 45 00:04:18,840 --> 00:04:26,310 è 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 46 00:04:26,310 --> 00:04:34,920 non mi interessa molto se possiamo fare clic su di essi o su questi pulsanti. Quindi inizierò ad aggiungere l'articolo del 47 00:04:34,920 --> 00:04:39,310 prodotto in questo modo, ma dovremo perfezionarlo. 48 00:04:39,510 --> 00:04:46,170 Ciò di cui abbiamo bisogno è il titolo, il prezzo, l'immagine, i dettagli visualizzati e il carrello Aggiungi. 49 00:04:46,170 --> 00:04:53,430 Quindi abbiamo bisogno dell'immagine qui e quella ovviamente è itemData. articolo. imageUrl perché non 50 00:04:53,430 --> 00:04:59,400 devi dimenticare l'articolo ItemData. elemento nei punti finali di un 51 00:04:59,400 --> 00:05:08,540 prodotto come definito qui nel modello, quindi avremo questa proprietà imageUrl e quindi qui avremo anche bisogno del titolo 52 00:05:08,570 --> 00:05:17,840 accessibile tramite itemData. articolo. titolo. Abbiamo bisogno del prezzo accessibile con itemData. articolo. prezzo e se diamo uno 53 00:05:17,840 --> 00:05:23,570 sguardo al componente dell'articolo del prodotto, che soddisfa tutto ciò di cui abbiamo bisogno qui, ma ora abbiamo 54 00:05:23,570 --> 00:05:30,380 bisogno di visualizzare i dettagli su e su aggiungi al carrello e li aggiungerò temporaneamente, ma dovremo trovare una soluzione diversa 55 00:05:30,380 --> 00:05:31,100 qui. 56 00:05:31,100 --> 00:05:34,290 Quindi, in dettaglio i dettagli sono una funzione 57 00:05:34,290 --> 00:05:41,760 vuota al momento e su aggiungi al carrello, anche una funzione vuota e la implementeremo in modo diverso in seguito. 58 00:05:42,270 --> 00:05:47,370 Per il momento, tuttavia, sto producendo un articolo del prodotto qui e quindi 59 00:05:47,370 --> 00:05:54,600 ora possiamo navigare alla schermata dei prodotti dell'utente. Per arrivarci, è tempo di tornare al navigatore del negozio e alla fine, 60 00:05:54,600 --> 00:06:00,420 voglio aggiungerli al mio navigatore dei cassetti ma come stack separato, proprio come i prodotti e gli ordini sono uno stack 61 00:06:00,420 --> 00:06:03,120 separato, anche questo dovrebbe essere uno stack separato . 62 00:06:03,120 --> 00:06:11,160 Possiamo semplicemente copiare lo stack del navigatore degli ordini qui, replicarlo e importare qui la schermata del prodotto dell'utente, 63 00:06:11,160 --> 00:06:19,440 quindi la schermata dei prodotti dell'utente dalla cartella delle schermate, lì dalla cartella dell'utente e quindi la schermata del prodotto 64 00:06:19,440 --> 00:06:27,180 dell'utente e mapparla nella pila appena copiata laggiù che Non nominerò il navigatore degli ordini perché ho già questo 65 00:06:28,000 --> 00:06:35,140 nome qui ma lo nominerò, diciamo forse admin navigator forse e qui, ho il mio identificativo dei 66 00:06:35,570 --> 00:06:43,900 prodotti utente che punta alla schermata dei prodotti dell'utente. Ora qui come icona, nel cassetto voglio 67 00:06:43,920 --> 00:06:51,670 avere un md create e ios creare un'icona e altro, questo dovrebbe andare bene. 68 00:06:51,680 --> 00:06:55,460 Ora non ci resta che aggiungere questo navigatore al nostro navigatore dei cassetti. 69 00:06:55,460 --> 00:07:02,830 Lì aggiungerò la chiave dell'amministratore e indicherò il navigatore dell'amministratore, quindi ora dovremmo effettivamente 70 00:07:02,830 --> 00:07:08,980 essere in grado di raggiungerlo. Se torniamo all'app, abbiamo la voce dell'amministratore e 71 00:07:08,980 --> 00:07:14,080 se faccio clic su di essa, otteniamo un problema relativo ai miei prodotti utente, 72 00:07:14,090 --> 00:07:19,880 lo stato non definito non è un oggetto, diamo una rapida occhiata alla schermata del prodotto 73 00:07:19,910 --> 00:07:25,880 dell'utente, sì, che dovrebbe essere prodotti perché la nostra fetta è denominata prodotti qui nel riduttore combinato. 74 00:07:25,880 --> 00:07:27,990 Quindi qui dovrebbero esserci anche 75 00:07:28,080 --> 00:07:34,590 prodotti, piccolo errore di battitura da parte mia. Ora questo sembra migliore e ora, potrebbe sembrare che non sia cambiato nulla, 76 00:07:34,590 --> 00:07:40,830 ma in realtà, puoi vedere che i miei elementi di navigazione sono spariti perché ora sono su una nuova schermata ma ho la mia 77 00:07:40,830 --> 00:07:42,910 vecchia lista qui ma con meno prodotti. 78 00:07:43,020 --> 00:07:47,190 Se si confronta Android dove sono nella schermata iniziale, ci sono più prodotti lì, 79 00:07:47,190 --> 00:07:50,340 ora ho solo quelli in cui U1 è l'ID proprietario. 80 00:07:50,730 --> 00:07:51,550 Quindi va 81 00:07:51,960 --> 00:07:54,850 bene, ma ovviamente non mi piacciono questi pulsanti qui e 82 00:07:54,930 --> 00:07:58,960 voglio anche avere una voce di menu qui e un titolo di intestazione ovviamente. 83 00:07:58,980 --> 00:08:03,930 Ci sono alcune cose che dobbiamo correggere, ovviamente questi pulsanti sono la cosa più importante o 84 00:08:03,930 --> 00:08:08,270 la cosa più sorprendente che è sbagliata. Tuttavia, inizierò con l'intestazione, 85 00:08:08,270 --> 00:08:11,420 nella schermata dei prodotti dell'utente qui, possiamo 86 00:08:11,450 --> 00:08:19,910 aggiungere le opzioni di navigazione, schermata dei prodotti dell'utente. opzioni di navigazione e lì, ad esempio impostare un titolo 87 00:08:19,910 --> 00:08:30,130 di intestazione dei tuoi prodotti e abbiamo anche bisogno del pulsante menu, quindi possiamo effettivamente andare anche alla schermata di panoramica del prodotto 88 00:08:30,160 --> 00:08:35,930 e da lì, copiare questa parte di intestazione a sinistra qui, tornare alla 89 00:08:36,020 --> 00:08:39,620 schermata del prodotto dell'utente e aggiungilo qui. 90 00:08:39,620 --> 00:08:44,900 Ora, tuttavia, abbiamo bisogno di quella forma di funzione delle opzioni di navigazione in cui poi alla 91 00:08:44,900 --> 00:08:50,210 fine restituiamo un oggetto con tutte le opzioni lì dentro, quindi è qualcosa che dobbiamo cambiare in questo 92 00:08:50,660 --> 00:08:55,880 modo e dobbiamo anche assicurarci di importare l'elemento dei pulsanti di intestazione e pulsante di intestazione. 93 00:08:55,880 --> 00:09:00,300 Quindi, nella schermata di panoramica del prodotto, ho queste importazioni qui, copiarle dalla 94 00:09:00,440 --> 00:09:03,310 schermata di panoramica del prodotto, andare alla schermata 95 00:09:03,440 --> 00:09:05,990 del prodotto dell'utente e aggiungerle in questo 96 00:09:06,010 --> 00:09:09,050 modo, ad esempio in modo da importare tutto ciò 97 00:09:09,050 --> 00:09:10,940 di cui hai bisogno. 98 00:09:10,940 --> 00:09:16,400 Dobbiamo anche importare un'API della piattaforma perché la stiamo usando anche durante l'impostazione dei pulsanti di intestazione. 99 00:09:18,210 --> 00:09:25,800 Ora almeno, quando andiamo nell'area di amministrazione, abbiamo il nostro titolo qui, abbiamo di nuovo il cassetto, il pulsante del menu, 100 00:09:25,800 --> 00:09:26,860 ma ora 101 00:09:26,940 --> 00:09:29,250 che dire di questi pulsanti qui? 102 00:09:29,310 --> 00:09:33,840 Dovremo cambiare l'aspetto del nostro prodotto.