Sugli articoli del carrello.
Ancora una volta, creerò un componente separato per ogni articolo del carrello
che voglio produrre qui.
Potrei farlo qui ma, di nuovo, sarà un po 'più lungo e non voglio gonfiare questo file con esso e
in realtà lo userò anche in un altro posto dopo, il che potrebbe sembrare strano
dato che abbiamo solo una schermata del carrello ma vedrai dove altro potremo utilizzare un
articolo del carrello in seguito.
Quindi, torniamo alla cartella dei componenti e lì forse nella cartella del negozio e
aggiungiamo un CartItem. file js accanto all'elemento del prodotto.
Ora ovviamente abbiamo un normale componente React lì dentro, quindi conosci il
gioco, come vengono creati.
Importiamo React da React e quindi qui poiché questo è il componente che dovrebbe produrre qualcosa, importeremo
un mucchio di componenti da React Native, i primitivi fondamentali con cui abbiamo costruito l'interfaccia utente.
Avrò bisogno di una vista, avrò bisogno di un testo, avrò sicuramente bisogno di un foglio di stile qui e poi aggiungerò la mia costante qui, carrello
che riceve oggetti di scena e alla fine qui restituirà un codice jsx. Aggiungerò qui l'oggetto mio stile con
la creazione del
foglio di stile e lo esporterò come articolo carrello predefinito.
Ora il codice jsx che dovrebbe essere restituito qui ovviamente dipende sempre da te, ma avrò una
vista qui e in quella vista, voglio produrre la quantità e il titolo ovviamente, anche l'importo totale per questo articolo del
carrello nel caso ne abbiamo aggiunto più di uno, quindi questo non è solo il prezzo di un singolo
articolo, ma ovviamente il prezzo è la quantità e in realtà voglio anche avere un pulsante che mi
consente di eliminare questo articolo dal
carrello, un'icona del cestino.
Quindi alla fine, avrò una riga qui con un testo e questo testo avrà la quantità e il titolo, quindi lì avrò
la quantità e il titolo e in realtà questo dovrebbe avere uno stile diverso, quindi avvolgerò il quantità qui in un nodo di
testo separato e faccio lo stesso per il titolo, in modo che io abbia due nodi
di testo separati qui alla fine e quindi dopo questo blocco di testo qui, ci dovrebbe essere una vista per raggruppare altri due elementi insieme, un
altro pezzo di testo che rappresenta l'importo totale per questo elemento qui, quindi importo
e accanto a questo, un pulsante o in realtà non un pulsante ma in realtà un'icona selezionabile.
Quindi costruirò la mia cosa tangibile con opacità tangibile e, naturalmente, potresti ancora fare
quella differenziazione della piattaforma per l'effetto increspatura, ma andrò con l'opacità su entrambe le piattaforme
qui e importerò Ionicon da @ expo / vector-icons che abbiamo già aggiunto prima perché voglio avere
solo un'icona
qui che possiamo premere, quindi qui voglio avere un'opacità tangibile e avvolgerla attorno
a un'icona che possiamo aggiungere con Ionicon come hai aggiunto in precedenza in questo corso, con questo
come un componente qui e quindi usa semplicemente un nome che dovrebbe effettivamente differire per piattaforma
perché il nome è l'identificatore dell'icona e lì, possiamo controllare il sistema operativo della piattaforma
e se quello è Android, l'icona che dovrebbe essere utilizzata avrà un nome di md trash e altrimenti sarà il cestino di iOS che rende una bella
icona del cestino e possiamo anche dare a questa icona una dimensione di diciamo 23 che di nuovo dovrebbe apparire
abbastanza carina e un colore e qui, userò effettivamente il rosso perché sta rimuovendo questo oggetto in
modo che dovrebbe avere come un warni di colore direi. L'opacità toccabile quando premuta dovrebbe fare qualcosa e dovrebbe inoltrare l'evento stampa al
componente che utilizza il componente
articolo carrello, quindi mi aspetto di ottenere un puntello su rimozione, questo nome come sempre dipende da
te che detiene una funzione che è nella fine eseguito quindi e possiamo anche aggiungere uno stile qui, stile molto semplice in cui punto il pulsante Elimina per esempio e questa è
una dichiarazione di stile che possiamo aggiungere in seguito.
Parlando di stili, ci sono ovviamente più
stili da aggiungere, ad esempio nella vista più in alto qui, darò a
questo uno stile di carrello, questo testo qui
riceverà forse uno
stile di dati di un articolo. Questo testo con la quantità può ricevere uno stile che possiamo nominare stili. quantità, ancora una volta tutti
questi identificatori di stile come sempre dipendono da te.
Qui sul titolo, ho uno stile
del titolo e poi qui in questa vista, aggiungerò di nuovo uno stile dei dati degli oggetti, quindi riutilizzerò questo stile perché voglio
avere lo stesso set qui e questo importo qui anche ottenere uno stile di importo. Quindi un sacco di stili da aggiungere, passiamo al foglio di stile
e lì dentro, aggiungiamo l'articolo del carrello
che è il nostro stile di root, quindi
i dati e la quantità
degli articoli, quindi
la
quantità di dati dell'articolo, quindi il titolo qui e la quantità e l'ultima ma non almeno, il pulsante Elimina.
Quindi è anche qualcosa che dobbiamo aggiungere qui. Ora sul pulsante Elimina, è semplice, aggiungerò
solo
un margine a sinistra di 20 per avere una spaziatura tra l'icona e il testo che si trova accanto ad essa
e con quello, andiamo all'elemento del carrello.
Lì, voglio avere un'imbottitura di 10, un colore di sfondo bianco, non userò il
mio aspetto della carta qui, non aggiungerò un'ombra qui, potresti farlo ma preferisco un aspetto
diverso.
Importante è la riga di direzione flessibile in modo che tutti gli elementi in quella vista, così
questo testo e questa vista siano seduti uno accanto all'altro nella stessa riga. Giustifica il contenuto dovrebbe essere spazio tra in modo
che tutti gli spazi vuoti tra questi due blocchi di contenuto e aggiungerò anche un margine in direzione orizzontale di 20 in
modo che ci sia una
spaziatura a sinistra e a destra attorno agli articoli del mio carrello.
Ora i dati degli articoli, questo è lo stile che ripetiamo per quantità, titolo e quantità e il
pulsante Elimina, i dati degli articoli dovrebbero avere una riga di direzione flessibile per assicurarsi che gli articoli in essi contenuti siano posizionati in una riga e imposterò l'allineamento
degli articoli qui su centra per centrare tutto il contenuto in verticale. Ora per la quantità qui, voglio impostare una famiglia di caratteri
di open-sans, a proposito, in realtà possiamo anche usare una vista qui invece di un testo attorno a questi due nodi di testo perché non
sto impostando stili di testo specifici qui , quindi diamo un'occhiata invece,
ma con quello, torniamo alla quantità. Possiamo dare a questo una
famiglia di caratteri open-sans, un colore forse di questo colore grigio scuro che abbiamo usato prima
per i prezzi, ora per la quantità e una dimensione del carattere di 16
forse e poi qui per il titolo, imposterò un la famiglia di caratteri di open sans in grassetto per renderlo
audace, date anche a questo una dimensione del carattere di 16 e sulla quantità qui, farò esattamente la stessa cosa.
Pertanto, ovviamente, potremmo anche unire questo nello stesso stesso stile, magari nominare questo testo principale o qualcosa del genere, sbarazzarci
della quantità
poiché abbiamo le stesse identiche definizioni di stile e ora usiamo il testo principale qui invece del
titolo e qui invece di importo.
Va bene.
Questo è un
articolo del carrello, ora usiamolo nella schermata
del carrello con l'aiuto di un elenco
piatto lì perché in questo momento non stiamo producendo alcun elemento lì sullo schermo del carrello.
Quindi questa vista qui può essere sostituita con un elenco
semplice ora e i dati in cui ci troviamo dovrebbero essere una serie di articoli del carrello ed è proprio quello
che abbiamo qui nella costante
degli articoli del carrello, quindi usiamo qui.
Ora
qui, aggiungerò anche un estrattore di chiavi e qui devi assolutamente aggiungerlo per far sapere a React Native
dove si trova la tua chiave perché ogni articolo qui alla fine è di questo formato e questo non
ha né una chiave né un ID proprietà ma sappiamo che l'ID prodotto può essere utilizzato come chiave perché
sarà univoco per ogni articolo.
Quindi qui, punto l'oggetto. productId alla fine e ora per
l'oggetto di rendering, voglio usare questo articolo del carrello che abbiamo appena aggiunto.
Quindi qui, dobbiamo importare l'articolo del carrello dalla cartella dei componenti, la cartella del negozio e lì, l'articolo del carrello e quindi utilizzare questo
componente dell'articolo del carrello laggiù nella nostra funzione di rendering dove otteniamo i nostri dati dell'articolo
alla fine e dove poi restituiamo il nostro articolo carrello come questo e ora sull'articolo carrello, dobbiamo passare alcuni
dati, giusto? Nell'articolo del carrello,
in questo momento ho segnaposto fittizi, ovviamente qui mi aspetto di ottenere la mia quantità diciamo su una quantità denominata
prop, mi aspetto di ottenere il mio titolo su un titolo con nome prop e la quantità su un importo denominato prop e qui, chiamerò
fixed to 2 per essere sicuro di avere sempre due cifre decimali lì e abbiamo anche il
puntale on remove che ci aspettiamo giusto.
Quindi abbiamo ottenuto quantità, titolo, importo e alla rimozione, quindi di nuovo nella schermata del
carrello, ecco cosa dobbiamo aggiungere, la quantità è ovviamente ItemData. articolo. quantità perché un singolo
articolo qui è ovviamente un articolo del genere e
quindi avremo una quantità mantenuta e oltre alla quantità, dobbiamo passare il titolo, l'importo
e rimuoverlo.
Quindi il titolo è ovviamente itemData. articolo. Prodotto. titolo, questo è il nome
che ho scelto lì, per importo che possiamo trasmettere in ItemData. articolo. se diamo un'occhiata al modo
in cui definiamo i nostri dati, questa sarebbe la somma, è l'importo per un articolo, indipendentemente dalla
quantità presente o dal rispetto della quantità effettiva.
E poi ultimo ma non meno importante per la rimozione, dovremmo puntare a una funzione e al momento, non abbiamo una logica per questo, quindi indicherò
solo una funzione
vuota e questo è ora un articolo del carrello come voglio renderizzare esso. Facciamo
una prova. Aggiungiamo due camicie rosse e un tappeto blu, andiamo al carrello e ora ho
le stringhe di testo che devono essere renderizzate all'interno di un componente di testo e sta puntando all'elemento del carrello, linea
14, quindi diamo un'occhiata a questo,
sì, è qui di che il mio IDE ha aggiunto automaticamente, questo spazio bianco voglio avere qui dopo
la mia quantità. Voglio davvero averlo qui,
quindi aggiungerò solo uno spazio extra qui prima di chiudere il mio testo. Ora, riprovaci, due camicie rosse,
un tappeto blu.
Vedi l'importo qui, vedi
il titolo qui vedi la
somma e questo ovviamente si somma anche a questa somma totale.
Ora è il momento di far funzionare questo pulsante di eliminazione.