1 00:00:02,120 --> 00:00:08,560 Attualmente nel componente del nostro articolo prodotto qui nella cartella componenti, i pulsanti fanno parte del componente, così 2 00:00:08,580 --> 00:00:10,660 come il componente avvolgente toccabile. 3 00:00:12,480 --> 00:00:18,990 Non possiamo cambiare così tanto il componente toccabile perché appartiene ai nostri contenuti qui e anche questo non 4 00:00:18,990 --> 00:00:25,200 è un grosso problema perché nella schermata di amministrazione qui, voglio anche che gli elementi siano toccabili 5 00:00:25,590 --> 00:00:30,210 ma voglio andare alla mia schermata di modifica in quello Astuccio. 6 00:00:30,360 --> 00:00:33,530 Voglio anche avere due pulsanti: uno per la modifica 7 00:00:33,540 --> 00:00:37,710 e uno per l'eliminazione, ma ovviamente i sottotitoli e le azioni dovrebbero essere diversi. 8 00:00:38,370 --> 00:00:46,150 Ora potremmo passare questo testo della didascalia qui come oggetti di scena e rinominare gli oggetti di scena che attiviamo quando i pulsanti vengono premuti in 9 00:00:46,150 --> 00:00:50,880 un modo più generico, in modo da poterli utilizzare per visualizzare i dettagli nella schermata di 10 00:00:50,920 --> 00:00:59,500 panoramica dei prodotti e per modificarli o eliminarli la schermata del prodotto dell'utente. C'è anche un modo alternativo di 11 00:00:59,500 --> 00:01:00,320 gestirlo. 12 00:01:00,370 --> 00:01:07,720 Quindi per uno quando premiamo questo componente in generale, lo rinominerò in on per avere un nome più generico che abbia 13 00:01:07,720 --> 00:01:12,000 senso in una più ampia gamma di casi d'uso e cambierò anche 14 00:01:12,770 --> 00:01:15,810 il modo in cui riceviamo questi pulsanti qui. 15 00:01:15,890 --> 00:01:22,310 Li taglierò da qui e, invece, output puntelli per bambini che è quel puntello speciale che si riferisce a tutto ciò che 16 00:01:22,310 --> 00:01:29,560 passiamo tra il tag di apertura e chiusura del nostro componente. Ora, con ciò, posso anche sbarazzarmi dell'importazione dei colori qui e 17 00:01:29,560 --> 00:01:32,540 dell'importazione dei pulsanti e ora andare nei luoghi in 18 00:01:32,830 --> 00:01:35,180 cui utilizziamo l'articolo del prodotto, 19 00:01:35,230 --> 00:01:38,010 ad esempio la schermata di panoramica dei prodotti. 20 00:01:38,290 --> 00:01:44,100 Qui ora dobbiamo importare il componente pulsante e assicurarci di importare i tuoi colori, 21 00:01:44,110 --> 00:01:46,150 quindi importa i colori 22 00:01:48,490 --> 00:01:57,630 dai colori delle costanti e ora vai al tuo articolo di prodotto e cambialo da un componente a chiusura automatica in un 23 00:01:57,630 --> 00:02:00,450 componente che hai chiuso e aperto con 24 00:02:00,450 --> 00:02:06,090 il tuo tag dei componenti propri. Tra questi tag, ora puoi aggiungere nuovamente questi due 25 00:02:06,090 --> 00:02:13,680 pulsanti e ora, ovviamente, non usare oggetti di scena per visualizzare i dettagli e oggetti di scena per aggiungere al carrello qui, ma invece, aggiungi 26 00:02:13,680 --> 00:02:18,690 la tua logica proprio qui perché ora stiamo passando dinamicamente questo nel componente dell'articolo del prodotto, ma 27 00:02:18,690 --> 00:02:21,950 quindi siamo in grado di passare pulsanti diversi a seconda di 28 00:02:21,960 --> 00:02:26,970 dove utilizziamo quel componente dell'articolo del prodotto. Quindi ora qui aggiungerò un nuovo gestore, 29 00:02:29,840 --> 00:02:39,030 selezionerò ad esempio il gestore articoli che è solo una funzione memorizzata in una costante come questa e lì voglio fare quello che ho fatto in 30 00:02:39,140 --> 00:02:42,280 precedenza sui dettagli di visualizzazione, lo taglierò e lo 31 00:02:42,350 --> 00:02:48,440 aggiungerò qui e mi aspetto di ottenere l'ID e il titolo qui come argomento in modo da 32 00:02:48,440 --> 00:02:52,350 poter inoltrare ID e titolo qui in questo modo e ora 33 00:02:52,610 --> 00:02:59,860 selezionare il gestore articoli è ciò che voglio innescare qui su select, ricorda che l'ho rinominato nell'elemento prodotto , questo touchable 34 00:02:59,870 --> 00:03:03,590 ora si attiva solo su select, quindi dovrai rinominarlo nei 35 00:03:03,590 --> 00:03:09,770 punti in cui usi quel componente come qui e poi qui, eseguo il gestore degli elementi select qui 36 00:03:09,770 --> 00:03:17,360 e inoltro itemData. articolo. id e itemData. articolo. titolo qui in 37 00:03:17,360 --> 00:03:23,690 modo che questi dati finiscano in questa funzione. Lo sto facendo perché ora posso usare lo 38 00:03:23,690 --> 00:03:31,760 stesso gestore di articoli qui su questo pulsante di visualizzazione dettagli, essenzialmente posso semplicemente copiare questa funzione anonima e aggiungerlo qui 39 00:03:31,760 --> 00:03:34,560 a questo gestore di stampa di questo 40 00:03:34,610 --> 00:03:37,970 pulsante, quindi ora riusiamo quello e su Aggiungi a 41 00:03:38,060 --> 00:03:39,740 carrello, bene lì lo spediamo, 42 00:03:39,890 --> 00:03:45,320 questo ora viene rimosso qui dal componente dell'articolo del prodotto perché non abbiamo più 43 00:03:45,320 --> 00:03:52,340 quel puntello, invece è ora qui, questo puntello che assume questa funzione anonima che poi alla fine dovrebbe spedire 44 00:03:52,340 --> 00:03:53,510 questa azione. 45 00:03:53,900 --> 00:04:00,170 Quindi ora la modifica principale è che sposto i pulsanti dal componente, dal componente dell'articolo del prodotto al componente della 46 00:04:00,170 --> 00:04:05,930 schermata di panoramica dei prodotti e che ci consente di fare ancora la stessa cosa di prima, se 47 00:04:05,930 --> 00:04:11,330 lo salvo, dovrebbe comunque funzionare come prima. Possiamo toccare un articolo, possiamo toccare 48 00:04:11,330 --> 00:04:15,420 Visualizza dettagli, possiamo toccare per carrello e tutto funziona, ma ora 49 00:04:15,740 --> 00:04:18,890 possiamo anche personalizzarlo nella schermata del prodotto dell'utente. 50 00:04:19,250 --> 00:04:28,410 Quindi lì copierò anche questi pulsanti e passerò alla schermata del prodotto dell'utente e lì, importa il pulsante da React Native, importa le nostre 51 00:04:28,470 --> 00:04:36,870 costanti di colori perché ne avremo bisogno per i pulsanti delle costanti e poi qui nell'articolo del prodotto , invece di 52 00:04:37,320 --> 00:04:47,480 configurarlo, dobbiamo analizzare il nostro puntello selezionato quando l'elemento viene toccato in generale, ma ora aggiungiamo anche tag di apertura e chiusura per il nostro componente 53 00:04:47,480 --> 00:04:49,450 personalizzato e di nuovo, 54 00:04:49,550 --> 00:04:53,240 aggiungiamo i nostri pulsanti qui ma invece di visualizzare 55 00:04:53,240 --> 00:04:55,380 i dettagli, ora Dico modifica 56 00:04:55,490 --> 00:05:01,940 ed elimina e per il momento, posso semplicemente rimuovere tutte le altre logiche perché per il momento 57 00:05:02,060 --> 00:05:06,380 non abbiamo una logica per la modifica e l'eliminazione, ma è 58 00:05:06,380 --> 00:05:08,630 qualcosa che possiamo aggiungere in seguito. 59 00:05:08,870 --> 00:05:13,630 E qui per selezionare, è anche solo una funzione vuota per il momento. 60 00:05:13,780 --> 00:05:19,690 Questo ha il vantaggio che ora abbiamo i nostri articoli come in precedenza qui, ma nella sezione admin, ora 61 00:05:19,690 --> 00:05:21,430 abbiamo modifica ed eliminazione e questo 62 00:05:21,550 --> 00:05:26,290 ci consente di fare cose diverse riutilizzando ancora il componente dell'articolo del prodotto che è ovviamente 63 00:05:26,290 --> 00:05:27,330 abbastanza carino.