Lavoriamo ora sulla schermata degli ordini e produciamo più di questo semplice testo noioso.
Ora, proprio come con la schermata del carrello e la schermata di panoramica dei prodotti, voglio un articolo ordine
più complesso e quindi creerò un componente articolo ordine separato nella cartella componenti e lì in una cartella del negozio.
Come sempre, dipende da te se lo
fai anche tu, ma poiché questo non sarà un componente super piccolo, preferisco averlo in un file separato.
Quindi importerò React da React qui e ovviamente non importa un sacco di cose da React Native e questo
sarebbe il punto di vista, il testo, il foglio di stile poiché sicuramente creeremo anche alcuni stili e anche un
pulsante perché anch'io desidera essere in grado di espandere un ordine in modo da non vedere sempre tutti gli articoli che
fanno parte dell'ordine, ma che possiamo visualizzarli se lo desideriamo. Ora, con ciò, possiamo creare qui la costante del nostro articolo
dell'ordine, in modo che sia il componente stesso a ricevere oggetti di scena e quindi alla fine avrà il suo corpo qui e
restituirà un codice jsx e abbiamo bisogno di un oggetto stili qui con Stylesheet. crea in questo modo
ed esporta anche l'articolo dell'ordine come predefinito.
Ora come dovrebbe apparire un articolo dell'ordine?
Ora come sempre, dipende da te, ma lavorerò con una vista qui e la mia idea è che mostrerò sempre come
l'importo totale di quell'ordine e la data e quindi un pulsante mostra dettagli che possiamo premere per visualizzare i singoli
articoli che fanno parte dell'ordine e per questi articoli, userò effettivamente il componente dell'articolo carrello qui
perché voglio rendere esattamente gli stessi articoli che visualizzo in un carrello.
Quindi in realtà importerò l'articolo del carrello dal componente dell'articolo del carrello e riutilizzerò quel componente qui.
Ora torniamo a quel codice jsx,
quindi abbiamo una vista a capo attorno al nostro intero oggetto ordine, la nostra intera voce dell'ordine qui.
Ora lì, voglio avere una prima riga e quindi userò un'altra vista in
modo che possiamo modellare questo in modo appropriato che dovrebbe contenere un testo che mostra il nostro totale, quindi diciamo la somma di
quell'ordine e un altro testo in cui mostro la data e questa dovrebbero essere nella stessa riga con spazio tra loro.
Sotto di loro, come ho già detto, dovrebbe esserci un pulsante che possiamo premere per mostrare i dettagli che poi mostra tutti
gli articoli che fanno parte di quell'ordine. Ora con questo set up,
ovviamente è chiaro che l'importo qui dovrebbe essere ricevuto con l'aiuto di oggetti di scena.
Quindi lì mi aspetto di ottenere una quantità di prop e chiamerò fisso 2 per produrre la quantità appropriata
di posizioni decimali. Ora per la data,
voglio fornire qui la data degli oggetti di scena in modo da avere una data che possiamo produrre. Per lo stile, nel complesso qui voglio avere un'assegnazione di stile
di un articolo in modo che possiamo modellare l'intero ordine e poi lì, abbiamo bisogno di dire
un riepilogo degli stili in modo che possiamo modellare questa riga e
per quanto riguarda il testo qui, questo dovrebbe avere uno stile di diciamo importo totale, come sempre questi identificatori di stile sono a
te, qui
voglio avere uno stile di data.
Il pulsante dovrebbe anche avere il suo colore che otterrò dalla costante dei colori, quindi è necessario aggiungere
questa importazione e
lì userò il mio colore primario. Ok, quindi è tutto per
ora, tornerò
ai dettagli tra un secondo, ora
applichiamo un po 'di styling qui in modo da poter vedere qualcosa. Per l'articolo dell'ordine stesso, riutilizzerò di nuovo l'aspetto
del carrello che ho già nell'articolo del prodotto, quindi copierò tutte queste impostazioni qui dall'articolo del prodotto
e le sposterò sull'articolo dell'ordine in modo da applicare
un'ombra , è necessario applicare un colore di sfondo, un raggio del bordo.
Inoltre, aggiungerò un margine di 20 in tutte le direzioni in modo che ogni articolo dell'ordine abbia una spaziatura attorno ad esso.
All'interno dell'articolo dell'ordine, voglio anche avere un'imbottitura di 10 in modo che il contenuto in essa non
si trovi direttamente sui bordi del bordo circostante e così via. Ora per il riassunto che è questa vista che contiene i
due pezzi di testo, lì lo stile dovrebbe
effettivamente essere che abbiamo una direzione flessibile della riga ovviamente perché gli oggetti
dovrebbero essere seduti uno accanto all'altro. Il contenuto giustificato dovrebbe
essere spazio tra e oltre quello, allineare gli oggetti dovrebbe essere al centro, in modo che sull'asse trasversale che qui
è l'asse verticale, gli oggetti siano centrati.
Voglio anche garantire che prendiamo l'intera larghezza disponibile qui per distribuire il testo. Ora per la quantità totale che è lo
stile applicato a questo primo pezzo di testo che genera la quantità, lì come sempre puoi modellarlo come vuoi, ma imposterò
una famiglia di caratteri di open sans in grassetto per usare quella versione in grassetto del
mio carattere e diamo una dimensione del carattere di 16 diciamo e poi per la data che è il mio stile ho applicato
qui il testo di quella data, lì alla fine voglio
anche usare una dimensione del carattere di 16 ma la famiglia di caratteri sarà solo aperta senza, senza
la versione
in grassetto e inoltre, possiamo anche riutilizzare quel colore grigio scuro qui. Ora con questo, proviamo e usiamo quell'ordine
nella schermata degli ordini.
Quindi, prima di tutto, dobbiamo prima importare l'articolo dell'ordine e poi ovviamente andare nella cartella
dei componenti, lì nella cartella del negozio e quindi importare l'articolo dell'ordine da quel file
dell'articolo dell'ordine e
qui invece di renderizzare quel testo, ora eseguiamo il rendering l'articolo dell'ordine qui come tag a chiusura
automatica e, ovviamente, dobbiamo configurarlo.
Questo ci richiede di passare l'importo e la data e successivamente anche gli articoli di dettaglio, quindi
gli articoli nell'ordine
ma che arriverà in un secondo passaggio.
Quindi per ora qui, dobbiamo passare l'importo e quello ovviamente è semplicemente itemData. articolo che è un singolo ordine, non dimenticare che stiamo eseguendo il ciclo
di tutti
gli ordini qui che sono una serie di ordini, quindi si tratta
di un singolo ordine
e all'interno, l'importo se diamo un'occhiata al nostro modello di ordine viene archiviato in un campo importo totale, la data
viene quindi memorizzata nel campo data.
Quindi qui accediamo al campo importo totale e per la data prop che dobbiamo anche passare,
possiamo accedere a itemData. articolo. Data. Se ora salviamo
questo e diamo un'occhiata a questo, aggiungiamo alcuni contenuti qui, ordiniamo questo e poi andiamo alla schermata dei nostri ordini e otteniamo questo errore.
Ora questo si riferisce a oggetti non validi come dovrebbe React e ci mostra che
alla fine, è l'oggetto di stato con cui ha un problema e ha senso perché la data nel nostro ordine quando
la creiamo qui nel nostro negozio Redux è una data Javascript oggetto.
Ora non possiamo emetterlo come testo simile. Per produrlo, possiamo andare al
nostro modello anche se qui, che è alla fine il progetto che usiamo per creare gli
ordini e nel modello di ordine, possiamo fare qualcosa che non abbiamo mai fatto prima, possiamo aggiungere un metodo
a questo modello o per essere precisi, un getter che è una funzionalità Javascript predefinita del moderno Javascript.
Quindi qui, possiamo usare la parola chiave get e quindi qualsiasi nome di tua scelta come data leggibile che
è come una funzione ma non una funzione che chiami come una funzione ma alla quale accedi
come una proprietà alla fine che restituisce un valore calcolato e lì Voglio restituire questa data, quindi l'oggetto data che è
memorizzato per questo oggetto, ma poi possiamo chiamare la stringa della data della locale che è un metodo Javascript incorporato che possiamo usare sugli oggetti
data per convertire questo oggetto in una data leggibile dall'uomo. Lì passiamo nella lingua per cui vogliamo
ottimizzarla in questo modo, ad esempio, e ora possiamo configurarlo con un secondo
argomento che è un oggetto Javascript. Lì puoi definire come configurare
e allegare l'anno per trovare i documenti dettagliati per questo metodo
se vuoi imparare tutto su di esso e, ad esempio, possiamo impostare l'anno su numerico, il
mese su lungo, il giorno su numerico, l'ora a due cifre e il minuto anche a due cifre.
Ora abbiamo quella proprietà data leggibile a cui possiamo accedere su qualsiasi articolo dell'ordine e lì
per ora nella schermata degli ordini, invece di passare l'oggetto dati in questo modo, accedo alla data
leggibile che ora è questa nuova proprietà getter che abbiamo aggiunto e ora cosa vedrai che se inserisco di
nuovo qui questo ordine facendo clic su Ordina ora e ora vado ai miei ordini, ora vedrai l'importo totale e questa data
formattata in modo pulito e ora se faccio lo stesso su Android e faccio un ordine qui e vado
alla schermata dei miei ordini, vedi lo stesso lì. Ora lì voglio solo modificare un po 'quel pulsante, in
generale anche su iOS, non dovrebbe essere così largo, non così largo qui. Quindi nel componente dell'articolo dell'ordine in cui ho questo pulsante, alla
fine quello che possiamo fare è in questa vista qui, possiamo aggiungere allineare il centro degli articoli per centrare il contenuto lungo l'asse trasversale che è da sinistra a destra e quindi ora se provo questo
di nuovo e inserisco questo ordine e vado agli ordini, vedi che ora non è pressabile lì ed è ancora più
chiaro su Android se lo ricarichiamo lì e inserisco questo ordine molto velocemente
qui, vai alla schermata degli ordini, ora abbiamo questo pulsante. Ora ovviamente l'obiettivo è che quando
premiamo questo pulsante, questo ordine si espande qui. Ciò che noterai su Android è che questa
data non viene visualizzata correttamente,
quindi è un'altra cosa che dobbiamo correggere.
Ora il motivo per cui non viene visualizzato correttamente è come React Native funziona internamente,
quale motore Javascript utilizza internamente e quello che utilizza per Android lì o su piattaforme Android semplicemente non
supporta questo metodo di stringa di data locale che sto usando qui .
Il motore utilizzato su iOS funziona, ma su
Android, non è questo il caso, il che è ovviamente scomodo e non eccezionale.
Quindi cosa possiamo fare su Android per risolvere questo problema?
La soluzione è installare una libreria separata che si chiama momento. js, abbiamo installato con npm install
--save moment.
Questa è una libreria di terze parti che funzionerà
su entrambe le piattaforme, il che rende anche le date di formattazione super semplici.
Quindi aspettiamo che l'installazione sia completata.
Ora con quello installato, importa tutto come momento dai momenti e dalla libreria che hai appena installato e
ora puoi usarlo in questo file qui.
Ora possiamo commentare questo quaggiù e invece restituire il momento, eseguito come una funzione e passare in
questo. data,
quindi l'oggetto data che vogliamo formattare e chiamare formato. Ora format prende una stringa in cui puoi configurare come formattare questo
e allegato, trovi anche un link ai documenti ufficiali dove puoi imparare
tutto sulle possibilità che hai lì.
Ora qui, un esempio, un modo per formattare questo, diciamo un lungo mese che fai
con 4 M maiuscole, quindi o per avere una data ben formattata in quel mese, output
del giorno in mese, un anno rappresentato da quattro cifre e quindi un'ora sempre rappresentata con due cifre e i minuti e
ora se salviamo questo
e lo proviamo, inizia su iOS, aggiungilo qui al carrello, vai al carrello e ordina questo e ora vai
agli ordini, questo sembra
bene.
E ora se lo proviamo anche su Android, lo
ordiniamo e quindi eccoci agli ordini, ora anche qui sembra bello.
Ora questa è una piccola correzione, ora lavoriamo sul pulsante
e diamo un po 'di spazio oltre a ridurne le dimensioni e ciò può essere fatto andando al riepilogo qui che
è lo stile applicato alla vista che contiene i due pezzi di testo, lì possiamo semplicemente
aggiungere un margine nella parte inferiore di diciamo 15 in modo da avere una certa spaziatura tra quella riga di riepilogo che è
questa riga di testo in alto e il pulsante sotto di essa. Quindi aggiungerò questo al mio carrello qui, lo ordinerò, quindi tornerò qui, andremo agli ordini,
ora questo sembra buono.
Ora assicuriamoci che anche
il pulsante Mostra dettagli faccia qualcosa.