Attualmente nel componente del nostro articolo prodotto qui nella cartella componenti, i pulsanti fanno parte del componente, così
come il componente avvolgente toccabile.
Non possiamo cambiare così tanto il componente toccabile perché appartiene ai nostri contenuti qui e anche questo non
è un grosso problema perché nella schermata di amministrazione qui, voglio anche che gli elementi siano toccabili
ma voglio andare alla mia schermata di modifica in quello Astuccio.
Voglio anche avere due pulsanti: uno per la modifica
e uno per l'eliminazione, ma ovviamente i sottotitoli e le azioni dovrebbero essere diversi.
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
un modo più generico, in modo da poterli utilizzare per visualizzare i dettagli nella schermata di
panoramica dei prodotti e per modificarli o eliminarli la schermata del prodotto dell'utente. C'è anche un modo alternativo di
gestirlo.
Quindi per uno quando premiamo questo componente in generale, lo rinominerò in on per avere un nome più generico che abbia
senso in una più ampia gamma di casi d'uso e cambierò anche
il modo in cui riceviamo questi pulsanti qui.
Li taglierò da qui e, invece, output puntelli per bambini che è quel puntello speciale che si riferisce a tutto ciò che
passiamo tra il tag di apertura e chiusura del nostro componente. Ora, con ciò, posso anche sbarazzarmi dell'importazione dei colori qui e
dell'importazione dei pulsanti e ora andare nei luoghi in
cui utilizziamo l'articolo del prodotto,
ad esempio la schermata di panoramica dei prodotti.
Qui ora dobbiamo importare il componente pulsante e assicurarci di importare i tuoi colori,
quindi importa i colori
dai colori delle costanti e ora vai al tuo articolo di prodotto e cambialo da un componente a chiusura automatica in un
componente che hai chiuso e aperto con
il tuo tag dei componenti propri. Tra questi tag, ora puoi aggiungere nuovamente questi due
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
la tua logica proprio qui perché ora stiamo passando dinamicamente questo nel componente dell'articolo del prodotto, ma
quindi siamo in grado di passare pulsanti diversi a seconda di
dove utilizziamo quel componente dell'articolo del prodotto. Quindi ora qui aggiungerò un nuovo gestore,
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
precedenza sui dettagli di visualizzazione, lo taglierò e lo
aggiungerò qui e mi aspetto di ottenere l'ID e il titolo qui come argomento in modo da
poter inoltrare ID e titolo qui in questo modo e ora
selezionare il gestore articoli è ciò che voglio innescare qui su select, ricorda che l'ho rinominato nell'elemento prodotto , questo touchable
ora si attiva solo su select, quindi dovrai rinominarlo nei
punti in cui usi quel componente come qui e poi qui, eseguo il gestore degli elementi select qui
e inoltro itemData. articolo. id e itemData. articolo. titolo qui in
modo che questi dati finiscano in questa funzione. Lo sto facendo perché ora posso usare lo
stesso gestore di articoli qui su questo pulsante di visualizzazione dettagli, essenzialmente posso semplicemente copiare questa funzione anonima e aggiungerlo qui
a questo gestore di stampa di questo
pulsante, quindi ora riusiamo quello e su Aggiungi a
carrello, bene lì lo spediamo,
questo ora viene rimosso qui dal componente dell'articolo del prodotto perché non abbiamo più
quel puntello, invece è ora qui, questo puntello che assume questa funzione anonima che poi alla fine dovrebbe spedire
questa azione.
Quindi ora la modifica principale è che sposto i pulsanti dal componente, dal componente dell'articolo del prodotto al componente della
schermata di panoramica dei prodotti e che ci consente di fare ancora la stessa cosa di prima, se
lo salvo, dovrebbe comunque funzionare come prima. Possiamo toccare un articolo, possiamo toccare
Visualizza dettagli, possiamo toccare per carrello e tutto funziona, ma ora
possiamo anche personalizzarlo nella schermata del prodotto dell'utente.
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
costanti di colori perché ne avremo bisogno per i pulsanti delle costanti e poi qui nell'articolo del prodotto , invece di
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
personalizzato e di nuovo,
aggiungiamo i nostri pulsanti qui ma invece di visualizzare
i dettagli, ora Dico modifica
ed elimina e per il momento, posso semplicemente rimuovere tutte le altre logiche perché per il momento
non abbiamo una logica per la modifica e l'eliminazione, ma è
qualcosa che possiamo aggiungere in seguito.
E qui per selezionare, è anche solo una funzione vuota per il momento.
Questo ha il vantaggio che ora abbiamo i nostri articoli come in precedenza qui, ma nella sezione admin, ora
abbiamo modifica ed eliminazione e questo
ci consente di fare cose diverse riutilizzando ancora il componente dell'articolo del prodotto che è ovviamente
abbastanza carino.