Cominciamo con la finestra di dialogo di conferma qui nella schermata di modifica del prodotto. Possiamo semplicemente importare l'API di avviso da
React Native che ci consente di mostrare un bel avviso e quindi aggiungere un nuovo metodo qui forse, potremmo farlo tutti in
linea ma per avere un codice un po 'più strutturato dove ho il mio gestore di eliminazione.
A proposito, il modo in cui nominate le vostre funzioni dipende totalmente da voi, mi piace solo questo gestore nominare qui se lo assegno ai
miei emettitori di eventi nel codice jsx, per così dire e lì possiamo chiamare alert. avviso per mostrare un avviso con il
titolo del messaggio
sicuro,
vuoi davvero eliminare questo elemento e quindi un array con
tutti i pulsanti che vogliamo presentare
in cui il pulsante numero uno ha un testo di no e uno stile di default.
Esistono solo tre stili predefiniti o stili preconfigurati tra cui scegliere e nessun gestore speciale su
questo primo pulsante.
Il secondo pulsante ha sì, lì voglio
avere uno stile distruttivo per contrassegnarlo come ehi
questo eliminerà qualcosa e il gestore onPress qui è quindi alla fine con una funzione che
invierà davvero l'azione di eliminazione.
Quindi ora è il gestore di eliminazione che voglio eseguire quando facciamo clic su quel pulsante di eliminazione e quindi ovviamente sono nel
componente sbagliato che ho appena visto.
Tagliamo questo, non è
all'interno della schermata di modifica del prodotto,
non abbiamo bisogno dell'importazione degli avvisi
lì, è la schermata dei prodotti dell'utente di cui sto parlando. Lì dobbiamo importare l'avviso, lì dovremmo aggiungere
questo gestore e ora il gestore di eliminazione dovrebbe essere assegnato a questo pulsante
di eliminazione qui, quindi qui possiamo semplicemente puntare al gestore di eliminazione e questa funzione anonima può
essere tagliata da laggiù e può essere spostato qui e sostituisci questo gestore onPress per questo pulsante e
ora con quello, dovremmo ottenere questo popup, questa finestra di dialogo di conferma prima di eliminare effettivamente qualcosa.
Quindi, se faccio clic su Elimina, ora sto chiedendo,
se
premo no, non succede nulla,
solo se faccio clic su Sì lo eliminiamo. Il piccolo errore ovviamente è che i
dati dell'articolo di cui abbiamo bisogno
devono essere disponibili.
Quindi qui inoltriamo l'ID che vogliamo eliminare, quindi in realtà
per il gestore di eliminazione, abbiamo bisogno dell'ID del prodotto a cui stiamo applicando questo gestore in
modo che qui ho quell'ID disponibile e ciò significa che quando viene chiamato il gestore di
eliminazione laggiù, dobbiamo assicurarci che ottenga l'ID.
Quindi ci sono due modi per farlo, una funzione
anonima in cui eseguiamo manualmente il gestore di eliminazione e inoltriamo itemData. articolo. id o alternativa
a questo, passando il gestore di eliminazione in questo modo, ma usa bind per preconfigurare tutti gli argomenti
che questa funzione otterrà. Bind ha sempre bisogno di valore per questa parola chiave all'interno della funzione che eseguirà. Lì possiamo semplicemente passare questo,
non importa, ma il secondo argomento ora è
il primo argomento che riceverà il gestore di eliminazione, quindi
qui passiamo itemData. articolo. id. Ora con ciò, ci
assicuriamo di poter effettivamente premere Sì e funzionerà, se ora torniamo qui ad admin, facciamo clic su Elimina, premi
Sì, ora funziona davvero e se premiamo no, non succede nulla, sì lo elimina.
Quindi questa è
la prima cosa e per assicurarci di tornare indietro, se salviamo questo, ora dobbiamo andare alla schermata
di modifica del prodotto e lì nel nostro gestore di invio, non importa se inviamo l'aggiornamento o creiamo un'azione del prodotto, nella fine
Voglio anche chiamare la navigazione degli oggetti di scena tornare indietro per tornare alla schermata precedente. E se ora lo salviamo e andiamo nella schermata di
amministrazione e per ora invio un prodotto vuoto, ovviamente ricevo un
avviso ma generalmente funziona, questo torna indietro e se modifico un prodotto,
funziona anche.
Quindi ora con questo, abbiamo finito per quanto riguarda tutta la gestione degli input,
la cosa rimanente che ora voglio fare prima di finire davvero tutto questo è ora che voglio
ottimizzare un po 'di più l'articolo
del prodotto e il modo in cui' riutilizzando la nostra scheda guarda qui con l'ombra e così via
perché lo stiamo
usando in più componenti e se ti ritrovi a utilizzare qualcosa in più componenti, potresti sempre pensare a
come ottimizzare questo un po 'di
più e in effetti qui , abbiamo un potenziale di ottimizzazione.
Quindi, come possiamo ottimizzare questo però?
Bene, potremmo creare un componente separato qui nella nostra cartella UI della cartella
componenti che chiamiamo carrello. js, dove abbiamo appena memorizzato questo aspetto del carrello. Un componente carrello
può essere un componente molto semplice alla fine. Importiamo React da React qui perché dobbiamo creare un componente e importiamo una
vista da React Native, proprio così e ora qui creiamo il nostro componente carrello dove semplicemente otteniamo i nostri oggetti di scena, restituiamo un
po 'di jsx ed esportiamo questo componente nel Alla fine, anche se dovremo anche impostare un po 'di styling
perché questa è l'idea principale dietro
questo componente, si tratta di darci alcuni stili preconfigurati. Quindi aggiungerò anche i miei stili costanti con
Stylesheet. creare
laggiù e ora, qual è il codice jsx che voglio restituire qui?
Bene, questa è una vista, una vista che avvolgerà effettivamente qualsiasi cosa passiamo lì,
quindi tra i tag del mio componente, quindi propaga solo i bambini lì
dentro ma ora quella vista può avere uno stile predefinito qui che chiamerò carrello e che dovrebbe essere
gli stili con cui altrimenti copierò.
Quindi qui il mio stile di carrello in questo componente carrello è esattamente quello che ho qui, l'articolo del prodotto,
è questa roba
ombre qui, l'elevazione, il raggio del bordo e il colore di sfondo. Puoi tagliare tutto questo e spostarlo nel carrello
qui.
Ora, per essere ancora in grado di configurarlo un po ', in realtà lo
migliorerò e imposterò lo stile su un oggetto in cui unirò i miei valori nel carrello degli stili e tutti i valori che ottengo qui sullo stile, come questo.
Quindi ora possiamo anche impostare un puntello di stile quando utilizziamo il nostro carrello
e passiamo nei nostri stili che verranno uniti a questi stili di carte predefiniti perché questo ora
mi consente di utilizzare il carrello qui nell'articolo del prodotto, ad esempio importando il carrello da , e ora passa di un livello nella cartella UI, nel file del carrello
e sostituisci qui
questa vista, questa vista esterna con
la carta e ovviamente sostituisce anche il tag di chiusura e passa ancora nelle specifiche del mio
prodotto qui, quindi questa altezza e il margine .
Questo si fonderà con gli altri aspetti della carta e tutto tra i
tag di apertura e chiusura della carta funzionerà, lo passo nella mia carta qui con
l'aiuto di oggetti di scena per bambini. Ora lo stesso per
l'articolo dell'ordine, lì dobbiamo solo importare la carta e ora andare nella cartella dell'interfaccia utente, cardare qui e
quindi utilizzare card invece di quella vista, quella vista
esterna qui, sostituirla con una carta e sbarazzarsi di questi stili di carte qui,
le ombre, l'elevazione, il raggio del bordo e il colore di sfondo e
mantengono solo gli stili speciali in cui vuoi unirti. E ora l'ultima cosa, l'ultimo posto dove possiamo usare questo è lo
schermo del carrello, lì ho anche il mio riassunto che usa questi stili di carte.
Bene, ancora una volta, possiamo importare il componente della scheda dalla cartella dei componenti, la
cartella UI qua e là, dal carrello. js file e ora usa il componente card invece della vista
nel punto in cui vogliamo
questi stili di card, quindi qui sarebbe la vista che aveva gli
stili di riepilogo, lo sostituirò con card. E negli stili di riepilogo, manteniamo tutto
ciò che è specifico per questa schermata o per questo componente, ma possiamo eliminare il colore dell'ombra, il
raggio dell'ombra, l'elevazione, il colore di sfondo del raggio del bordo, che possono essere tutti rimossi.
Ora salviamolo e vedrai che ovviamente l'app funziona ancora e ha lo stesso aspetto
di prima se
ad esempio aggiungo questo al carrello e lo ordino e guardo i miei ordini, tutto sembra il come
prima, ma ora lo fa con un po 'di un codice più ottimale in cui riutilizziamo effettivamente i nostri stili
e abbiamo un componente di presentazione separato per loro in modo che
i nostri altri componenti possano essere un po' più snelli e non ci ripetiamo
come spesso quando si configura l'aspetto del carrello. Un altro vantaggio è che non possiamo sbagliare, se impostiamo il
raggio dell'ombra su 8 in un componente e 10 in un altro, la nostra app potrebbe apparire leggermente incoerente.
Lo evitiamo avendo alcuni componenti focalizzati sullo styling centrale che impostano questi stili di base che poi utilizziamo
in altri componenti mentre lo facciamo qui.