1 00:00:02,160 --> 00:00:07,040 Lavoriamo ora sulla schermata degli ordini e produciamo più di questo semplice testo noioso. 2 00:00:07,040 --> 00:00:12,390 Ora, proprio come con la schermata del carrello e la schermata di panoramica dei prodotti, voglio un articolo ordine 3 00:00:12,390 --> 00:00:17,970 più complesso e quindi creerò un componente articolo ordine separato nella cartella componenti e lì in una cartella del negozio. 4 00:00:18,000 --> 00:00:20,550 Come sempre, dipende da te se lo 5 00:00:20,550 --> 00:00:26,420 fai anche tu, ma poiché questo non sarà un componente super piccolo, preferisco averlo in un file separato. 6 00:00:26,550 --> 00:00:32,880 Quindi importerò React da React qui e ovviamente non importa un sacco di cose da React Native e questo 7 00:00:32,880 --> 00:00:39,660 sarebbe il punto di vista, il testo, il foglio di stile poiché sicuramente creeremo anche alcuni stili e anche un 8 00:00:39,990 --> 00:00:47,100 pulsante perché anch'io desidera essere in grado di espandere un ordine in modo da non vedere sempre tutti gli articoli che 9 00:00:47,100 --> 00:00:54,200 fanno parte dell'ordine, ma che possiamo visualizzarli se lo desideriamo. Ora, con ciò, possiamo creare qui la costante del nostro articolo 10 00:00:54,290 --> 00:01:00,710 dell'ordine, in modo che sia il componente stesso a ricevere oggetti di scena e quindi alla fine avrà il suo corpo qui e 11 00:01:00,740 --> 00:01:08,460 restituirà un codice jsx e abbiamo bisogno di un oggetto stili qui con Stylesheet. crea in questo modo 12 00:01:08,520 --> 00:01:13,990 ed esporta anche l'articolo dell'ordine come predefinito. 13 00:01:14,070 --> 00:01:16,460 Ora come dovrebbe apparire un articolo dell'ordine? 14 00:01:16,470 --> 00:01:23,280 Ora come sempre, dipende da te, ma lavorerò con una vista qui e la mia idea è che mostrerò sempre come 15 00:01:23,280 --> 00:01:29,880 l'importo totale di quell'ordine e la data e quindi un pulsante mostra dettagli che possiamo premere per visualizzare i singoli 16 00:01:29,880 --> 00:01:35,130 articoli che fanno parte dell'ordine e per questi articoli, userò effettivamente il componente dell'articolo carrello qui 17 00:01:35,130 --> 00:01:39,620 perché voglio rendere esattamente gli stessi articoli che visualizzo in un carrello. 18 00:01:39,690 --> 00:01:46,190 Quindi in realtà importerò l'articolo del carrello dal componente dell'articolo del carrello e riutilizzerò quel componente qui. 19 00:01:46,380 --> 00:01:48,400 Ora torniamo a quel codice jsx, 20 00:01:48,540 --> 00:01:54,110 quindi abbiamo una vista a capo attorno al nostro intero oggetto ordine, la nostra intera voce dell'ordine qui. 21 00:01:54,270 --> 00:01:58,980 Ora lì, voglio avere una prima riga e quindi userò un'altra vista in 22 00:01:58,980 --> 00:02:06,660 modo che possiamo modellare questo in modo appropriato che dovrebbe contenere un testo che mostra il nostro totale, quindi diciamo la somma di 23 00:02:06,660 --> 00:02:13,470 quell'ordine e un altro testo in cui mostro la data e questa dovrebbero essere nella stessa riga con spazio tra loro. 24 00:02:14,370 --> 00:02:20,660 Sotto di loro, come ho già detto, dovrebbe esserci un pulsante che possiamo premere per mostrare i dettagli che poi mostra tutti 25 00:02:20,660 --> 00:02:25,440 gli articoli che fanno parte di quell'ordine. Ora con questo set up, 26 00:02:25,470 --> 00:02:32,040 ovviamente è chiaro che l'importo qui dovrebbe essere ricevuto con l'aiuto di oggetti di scena. 27 00:02:32,040 --> 00:02:38,100 Quindi lì mi aspetto di ottenere una quantità di prop e chiamerò fisso 2 per produrre la quantità appropriata 28 00:02:38,100 --> 00:02:40,350 di posizioni decimali. Ora per la data, 29 00:02:40,350 --> 00:02:49,360 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 30 00:02:49,380 --> 00:02:55,860 di un articolo in modo che possiamo modellare l'intero ordine e poi lì, abbiamo bisogno di dire 31 00:02:55,860 --> 00:03:00,380 un riepilogo degli stili in modo che possiamo modellare questa riga e 32 00:03:00,450 --> 00:03:09,240 per quanto riguarda il testo qui, questo dovrebbe avere uno stile di diciamo importo totale, come sempre questi identificatori di stile sono a 33 00:03:09,300 --> 00:03:10,290 te, qui 34 00:03:10,290 --> 00:03:12,720 voglio avere uno stile di data. 35 00:03:16,000 --> 00:03:21,640 Il pulsante dovrebbe anche avere il suo colore che otterrò dalla costante dei colori, quindi è necessario aggiungere 36 00:03:21,640 --> 00:03:22,830 questa importazione e 37 00:03:22,840 --> 00:03:26,130 lì userò il mio colore primario. Ok, quindi è tutto per 38 00:03:26,610 --> 00:03:27,430 ora, tornerò 39 00:03:27,450 --> 00:03:29,160 ai dettagli tra un secondo, ora 40 00:03:29,160 --> 00:03:36,380 applichiamo un po 'di styling qui in modo da poter vedere qualcosa. Per l'articolo dell'ordine stesso, riutilizzerò di nuovo l'aspetto 41 00:03:36,480 --> 00:03:43,050 del carrello che ho già nell'articolo del prodotto, quindi copierò tutte queste impostazioni qui dall'articolo del prodotto 42 00:03:43,050 --> 00:03:46,770 e le sposterò sull'articolo dell'ordine in modo da applicare 43 00:03:46,770 --> 00:03:51,770 un'ombra , è necessario applicare un colore di sfondo, un raggio del bordo. 44 00:03:52,010 --> 00:03:57,210 Inoltre, aggiungerò un margine di 20 in tutte le direzioni in modo che ogni articolo dell'ordine abbia una spaziatura attorno ad esso. 45 00:03:58,790 --> 00:04:03,830 All'interno dell'articolo dell'ordine, voglio anche avere un'imbottitura di 10 in modo che il contenuto in essa non 46 00:04:03,830 --> 00:04:10,800 si trovi direttamente sui bordi del bordo circostante e così via. Ora per il riassunto che è questa vista che contiene i 47 00:04:10,800 --> 00:04:13,700 due pezzi di testo, lì lo stile dovrebbe 48 00:04:13,770 --> 00:04:17,940 effettivamente essere che abbiamo una direzione flessibile della riga ovviamente perché gli oggetti 49 00:04:17,940 --> 00:04:22,590 dovrebbero essere seduti uno accanto all'altro. Il contenuto giustificato dovrebbe 50 00:04:22,590 --> 00:04:31,230 essere spazio tra e oltre quello, allineare gli oggetti dovrebbe essere al centro, in modo che sull'asse trasversale che qui 51 00:04:31,230 --> 00:04:34,280 è l'asse verticale, gli oggetti siano centrati. 52 00:04:34,290 --> 00:04:40,160 Voglio anche garantire che prendiamo l'intera larghezza disponibile qui per distribuire il testo. Ora per la quantità totale che è lo 53 00:04:40,180 --> 00:04:47,620 stile applicato a questo primo pezzo di testo che genera la quantità, lì come sempre puoi modellarlo come vuoi, ma imposterò 54 00:04:47,830 --> 00:04:53,350 una famiglia di caratteri di open sans in grassetto per usare quella versione in grassetto del 55 00:04:53,350 --> 00:05:01,180 mio carattere e diamo una dimensione del carattere di 16 diciamo e poi per la data che è il mio stile ho applicato 56 00:05:01,180 --> 00:05:04,630 qui il testo di quella data, lì alla fine voglio 57 00:05:04,630 --> 00:05:10,840 anche usare una dimensione del carattere di 16 ma la famiglia di caratteri sarà solo aperta senza, senza 58 00:05:10,840 --> 00:05:12,010 la versione 59 00:05:12,040 --> 00:05:20,800 in grassetto e inoltre, possiamo anche riutilizzare quel colore grigio scuro qui. Ora con questo, proviamo e usiamo quell'ordine 60 00:05:20,810 --> 00:05:24,080 nella schermata degli ordini. 61 00:05:24,080 --> 00:05:29,480 Quindi, prima di tutto, dobbiamo prima importare l'articolo dell'ordine e poi ovviamente andare nella cartella 62 00:05:29,480 --> 00:05:34,970 dei componenti, lì nella cartella del negozio e quindi importare l'articolo dell'ordine da quel file 63 00:05:34,970 --> 00:05:36,520 dell'articolo dell'ordine e 64 00:05:36,710 --> 00:05:42,800 qui invece di renderizzare quel testo, ora eseguiamo il rendering l'articolo dell'ordine qui come tag a chiusura 65 00:05:42,800 --> 00:05:44,710 automatica e, ovviamente, dobbiamo configurarlo. 66 00:05:44,720 --> 00:05:50,780 Questo ci richiede di passare l'importo e la data e successivamente anche gli articoli di dettaglio, quindi 67 00:05:50,780 --> 00:05:52,160 gli articoli nell'ordine 68 00:05:52,190 --> 00:05:54,400 ma che arriverà in un secondo passaggio. 69 00:05:54,410 --> 00:06:02,120 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 70 00:06:02,120 --> 00:06:03,290 di tutti 71 00:06:03,290 --> 00:06:07,020 gli ordini qui che sono una serie di ordini, quindi si tratta 72 00:06:07,040 --> 00:06:08,260 di un singolo ordine 73 00:06:08,720 --> 00:06:15,030 e all'interno, l'importo se diamo un'occhiata al nostro modello di ordine viene archiviato in un campo importo totale, la data 74 00:06:15,030 --> 00:06:16,830 viene quindi memorizzata nel campo data. 75 00:06:16,850 --> 00:06:21,980 Quindi qui accediamo al campo importo totale e per la data prop che dobbiamo anche passare, 76 00:06:21,980 --> 00:06:28,070 possiamo accedere a itemData. articolo. Data. Se ora salviamo 77 00:06:28,070 --> 00:06:37,940 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. 78 00:06:38,030 --> 00:06:42,980 Ora questo si riferisce a oggetti non validi come dovrebbe React e ci mostra che 79 00:06:42,980 --> 00:06:50,010 alla fine, è l'oggetto di stato con cui ha un problema e ha senso perché la data nel nostro ordine quando 80 00:06:50,010 --> 00:06:54,540 la creiamo qui nel nostro negozio Redux è una data Javascript oggetto. 81 00:06:54,650 --> 00:06:58,150 Ora non possiamo emetterlo come testo simile. Per produrlo, possiamo andare al 82 00:06:58,160 --> 00:07:03,230 nostro modello anche se qui, che è alla fine il progetto che usiamo per creare gli 83 00:07:03,820 --> 00:07:09,830 ordini e nel modello di ordine, possiamo fare qualcosa che non abbiamo mai fatto prima, possiamo aggiungere un metodo 84 00:07:10,070 --> 00:07:15,650 a questo modello o per essere precisi, un getter che è una funzionalità Javascript predefinita del moderno Javascript. 85 00:07:15,650 --> 00:07:21,200 Quindi qui, possiamo usare la parola chiave get e quindi qualsiasi nome di tua scelta come data leggibile che 86 00:07:21,200 --> 00:07:26,330 è come una funzione ma non una funzione che chiami come una funzione ma alla quale accedi 87 00:07:26,330 --> 00:07:32,600 come una proprietà alla fine che restituisce un valore calcolato e lì Voglio restituire questa data, quindi l'oggetto data che è 88 00:07:32,600 --> 00:07:40,100 memorizzato per questo oggetto, ma poi possiamo chiamare la stringa della data della locale che è un metodo Javascript incorporato che possiamo usare sugli oggetti 89 00:07:40,130 --> 00:07:46,790 data per convertire questo oggetto in una data leggibile dall'uomo. Lì passiamo nella lingua per cui vogliamo 90 00:07:46,790 --> 00:07:52,190 ottimizzarla in questo modo, ad esempio, e ora possiamo configurarlo con un secondo 91 00:07:52,220 --> 00:07:58,100 argomento che è un oggetto Javascript. Lì puoi definire come configurare 92 00:07:58,100 --> 00:08:03,260 e allegare l'anno per trovare i documenti dettagliati per questo metodo 93 00:08:03,260 --> 00:08:11,020 se vuoi imparare tutto su di esso e, ad esempio, possiamo impostare l'anno su numerico, il 94 00:08:14,470 --> 00:08:22,980 mese su lungo, il giorno su numerico, l'ora a due cifre e il minuto anche a due cifre. 95 00:08:23,160 --> 00:08:28,650 Ora abbiamo quella proprietà data leggibile a cui possiamo accedere su qualsiasi articolo dell'ordine e lì 96 00:08:29,190 --> 00:08:34,960 per ora nella schermata degli ordini, invece di passare l'oggetto dati in questo modo, accedo alla data 97 00:08:35,010 --> 00:08:41,520 leggibile che ora è questa nuova proprietà getter che abbiamo aggiunto e ora cosa vedrai che se inserisco di 98 00:08:41,520 --> 00:08:48,960 nuovo qui questo ordine facendo clic su Ordina ora e ora vado ai miei ordini, ora vedrai l'importo totale e questa data 99 00:08:48,960 --> 00:08:55,320 formattata in modo pulito e ora se faccio lo stesso su Android e faccio un ordine qui e vado 100 00:08:55,320 --> 00:09:02,130 alla schermata dei miei ordini, vedi lo stesso lì. Ora lì voglio solo modificare un po 'quel pulsante, in 101 00:09:02,130 --> 00:09:09,840 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 102 00:09:09,840 --> 00:09:21,750 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 103 00:09:21,750 --> 00:09:28,550 di nuovo e inserisco questo ordine e vado agli ordini, vedi che ora non è pressabile lì ed è ancora più 104 00:09:28,550 --> 00:09:32,760 chiaro su Android se lo ricarichiamo lì e inserisco questo ordine molto velocemente 105 00:09:35,950 --> 00:09:43,060 qui, vai alla schermata degli ordini, ora abbiamo questo pulsante. Ora ovviamente l'obiettivo è che quando 106 00:09:43,060 --> 00:09:50,530 premiamo questo pulsante, questo ordine si espande qui. Ciò che noterai su Android è che questa 107 00:09:50,530 --> 00:09:53,460 data non viene visualizzata correttamente, 108 00:09:53,470 --> 00:09:56,970 quindi è un'altra cosa che dobbiamo correggere. 109 00:09:57,050 --> 00:10:02,240 Ora il motivo per cui non viene visualizzato correttamente è come React Native funziona internamente, 110 00:10:02,300 --> 00:10:08,810 quale motore Javascript utilizza internamente e quello che utilizza per Android lì o su piattaforme Android semplicemente non 111 00:10:08,810 --> 00:10:13,980 supporta questo metodo di stringa di data locale che sto usando qui . 112 00:10:14,180 --> 00:10:17,500 Il motore utilizzato su iOS funziona, ma su 113 00:10:17,510 --> 00:10:23,030 Android, non è questo il caso, il che è ovviamente scomodo e non eccezionale. 114 00:10:23,030 --> 00:10:26,030 Quindi cosa possiamo fare su Android per risolvere questo problema? 115 00:10:26,030 --> 00:10:34,610 La soluzione è installare una libreria separata che si chiama momento. js, abbiamo installato con npm install 116 00:10:34,610 --> 00:10:36,440 --save moment. 117 00:10:36,740 --> 00:10:39,580 Questa è una libreria di terze parti che funzionerà 118 00:10:39,590 --> 00:10:43,830 su entrambe le piattaforme, il che rende anche le date di formattazione super semplici. 119 00:10:44,420 --> 00:10:47,000 Quindi aspettiamo che l'installazione sia completata. 120 00:10:47,090 --> 00:10:53,400 Ora con quello installato, importa tutto come momento dai momenti e dalla libreria che hai appena installato e 121 00:10:53,570 --> 00:10:56,530 ora puoi usarlo in questo file qui. 122 00:10:56,540 --> 00:11:03,950 Ora possiamo commentare questo quaggiù e invece restituire il momento, eseguito come una funzione e passare in 123 00:11:03,950 --> 00:11:05,030 questo. data, 124 00:11:05,050 --> 00:11:12,800 quindi l'oggetto data che vogliamo formattare e chiamare formato. Ora format prende una stringa in cui puoi configurare come formattare questo 125 00:11:12,800 --> 00:11:16,880 e allegato, trovi anche un link ai documenti ufficiali dove puoi imparare 126 00:11:16,880 --> 00:11:19,330 tutto sulle possibilità che hai lì. 127 00:11:19,360 --> 00:11:26,760 Ora qui, un esempio, un modo per formattare questo, diciamo un lungo mese che fai 128 00:11:26,770 --> 00:11:34,570 con 4 M maiuscole, quindi o per avere una data ben formattata in quel mese, output 129 00:11:34,570 --> 00:11:44,730 del giorno in mese, un anno rappresentato da quattro cifre e quindi un'ora sempre rappresentata con due cifre e i minuti e 130 00:11:45,180 --> 00:11:47,160 ora se salviamo questo 131 00:11:47,180 --> 00:11:56,250 e lo proviamo, inizia su iOS, aggiungilo qui al carrello, vai al carrello e ordina questo e ora vai 132 00:11:56,250 --> 00:11:57,840 agli ordini, questo sembra 133 00:11:57,840 --> 00:11:58,870 bene. 134 00:11:59,040 --> 00:12:02,440 E ora se lo proviamo anche su Android, lo 135 00:12:02,730 --> 00:12:06,860 ordiniamo e quindi eccoci agli ordini, ora anche qui sembra bello. 136 00:12:06,960 --> 00:12:10,610 Ora questa è una piccola correzione, ora lavoriamo sul pulsante 137 00:12:10,740 --> 00:12:17,220 e diamo un po 'di spazio oltre a ridurne le dimensioni e ciò può essere fatto andando al riepilogo qui che 138 00:12:17,220 --> 00:12:22,260 è lo stile applicato alla vista che contiene i due pezzi di testo, lì possiamo semplicemente 139 00:12:22,260 --> 00:12:29,190 aggiungere un margine nella parte inferiore di diciamo 15 in modo da avere una certa spaziatura tra quella riga di riepilogo che è 140 00:12:29,190 --> 00:12:36,540 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, 141 00:12:36,690 --> 00:12:37,750 ora questo sembra buono. 142 00:12:37,770 --> 00:12:39,300 Ora assicuriamoci che anche 143 00:12:39,300 --> 00:12:41,000 il pulsante Mostra dettagli faccia qualcosa.