1 00:00:02,420 --> 00:00:06,140 Quindi concentriamoci sulla schermata dei dettagli del pasto per ora, 2 00:00:06,170 --> 00:00:06,770 quindi 3 00:00:09,660 --> 00:00:13,950 la parte qui in cui visualizziamo i dettagli della ricetta selezionata. 4 00:00:14,070 --> 00:00:19,590 In questo momento, abbiamo solo il contenuto fittizio lì, della schermata dei dettagli del pasto e questo non 5 00:00:19,590 --> 00:00:21,810 è ovviamente il contenuto che voglio davvero avere 6 00:00:22,020 --> 00:00:24,190 lì, invece cosa dovrebbe essere lì? 7 00:00:24,210 --> 00:00:30,280 Bene, se diamo un'occhiata al nostro modello di pasto, probabilmente ha senso avere l'immagine lì, tieni presente che 8 00:00:30,330 --> 00:00:35,340 il titolo è già mostrato nella nostra intestazione, quindi ha senso avere l'immagine qui in 9 00:00:35,340 --> 00:00:43,710 alto forse e al di sotto di questo, forse ripeto ancora una volta durata, convenienza e complessità proprio come lo stiamo facendo qui sotto la 10 00:00:43,710 --> 00:00:47,140 nostra ricetta e poi anche al di sotto di 11 00:00:47,370 --> 00:00:56,730 questo, elenca tutti gli ingredienti e i passaggi necessari per preparare quel piatto. Quindi è alla fine quello che voglio avere in questa 12 00:00:56,730 --> 00:01:02,170 pagina qui su MealDetailScreen e quindi, penso che abbia senso prima di tutto 13 00:01:02,340 --> 00:01:08,220 aggiungere una vista di scorrimento perché avremo sicuramente un sacco di contenuti lì che 14 00:01:08,220 --> 00:01:15,340 molto probabilmente non adattarsi a uno schermo e certamente non su tutte le dimensioni possibili del dispositivo. 15 00:01:15,390 --> 00:01:22,320 Quindi aggiungerò una vista di scorrimento qui e la avvolgerò attorno al mio contenuto qui. 16 00:01:22,330 --> 00:01:24,920 Ora avremo un paio di 17 00:01:25,030 --> 00:01:30,750 sezioni diverse qui, ad esempio in alto, voglio avere la mia immagine e per 18 00:01:30,750 --> 00:01:36,300 questo, importerò anche il componente immagine da React Native qui in modo che 19 00:01:36,300 --> 00:01:39,030 possiamo rendere un'immagine qui, non un'immagine di 20 00:01:39,270 --> 00:01:45,260 sfondo ma un'immagine normale e voglio aggiungere questa, diciamo qui in alto, qualcosa del genere. 21 00:01:45,260 --> 00:01:51,390 Ora dopo l'immagine, voglio avere una vista con la durata, l'accessibilità economica e la complessità di cui ho 22 00:01:51,400 --> 00:01:57,930 parlato, quindi sostanzialmente la stessa configurazione che abbiamo nell'elemento pasto, questo qui potresti dire e quindi copierò effettivamente la 23 00:01:57,930 --> 00:02:03,330 vista da lì e quindi possiamo regolarlo quando ne abbiamo bisogno qui in MealDetailScreen, quindi sostituirò 24 00:02:03,360 --> 00:02:06,220 semplicemente questa vista con la vista copia. 25 00:02:06,360 --> 00:02:10,510 Naturalmente ciò ci richiede di importare qui il 26 00:02:10,710 --> 00:02:11,700 componente 27 00:02:11,720 --> 00:02:16,370 di testo predefinito, quindi aggiungiamo questo, importiamo il testo predefinito 28 00:02:16,610 --> 00:02:21,450 dal testo predefinito dei componenti. Quindi questa è la riga successiva 29 00:02:21,500 --> 00:02:26,580 e, successivamente, voglio avere i miei ingredienti e i passaggi che devi eseguire. 30 00:02:26,890 --> 00:02:39,790 Quindi possiamo aggiungere del testo qui dove diciamo gli ingredienti e lì, voglio anche applicare uno stile, come stili di testo, titolo, qualcosa di simile o solo titolo 31 00:02:39,820 --> 00:02:42,910 perché voglio avere un'intestazione in grassetto 32 00:02:45,630 --> 00:02:52,320 qui, forse aumentare la dimensione del carattere. Di seguito, ho il mio elenco di ingredienti, 33 00:02:52,320 --> 00:02:58,770 quindi un elenco di ingredienti e ovviamente non è il contenuto finale, invece renderemo un elenco 34 00:02:58,770 --> 00:03:07,260 qui e sotto quello, lo ripeterò qui perché poi voglio avere un titolo in cui dico passaggi e poi un elenco di 35 00:03:07,980 --> 00:03:14,760 passaggi sotto quello e ora mi sbarazzerò di questo vecchio contenuto laggiù ed è quello con cui 36 00:03:14,760 --> 00:03:15,940 voglio lavorare. 37 00:03:15,960 --> 00:03:20,790 Ora, naturalmente, mancano tutti gli stili e anche la durata degli oggetti di scena e 38 00:03:20,790 --> 00:03:26,080 così via, che non produce nulla, invece dobbiamo lavorare con il pasto selezionato qui, la durata del 39 00:03:26,130 --> 00:03:34,560 pasto selezionato, la complessità del pasto selezionato, l'accessibilità del pasto selezionato e per l'immagine ad esempio, voglio aggiungere una fonte qui, fonte poiché è un'immagine di rete, 40 00:03:34,590 --> 00:03:42,210 è un oggetto con una proprietà URI che punta a selectedMeal. imageUrl per caricare questo e dobbiamo anche applicare 41 00:03:42,240 --> 00:03:47,210 uno stile lì, per impostare una larghezza e un'altezza, quindi 42 00:03:47,310 --> 00:03:53,190 qui voglio puntare all'immagine degli stili diciamo e tutti questi stili mancano 43 00:03:53,190 --> 00:04:02,470 come ho detto, quindi aggiungiamolo. Qui per questo stile, voglio anche dire stili. dettagli forse perché stiamo visualizzando i dettagli 44 00:04:02,470 --> 00:04:08,680 di questa ricetta e andiamo quindi al foglio di stile, quindi rimuoviamo lo schermo di 45 00:04:08,680 --> 00:04:09,340 cui 46 00:04:09,520 --> 00:04:16,920 non abbiamo più bisogno, invece aggiungiamo immagine e dettagli. Ora per i dettagli, dobbiamo impostare la direzione del flex su row perché 47 00:04:16,920 --> 00:04:19,180 dovrebbero essere tutti i dettagli di fila. 48 00:04:19,380 --> 00:04:27,060 Possiamo aggiungere un po 'di imbottitura in tutte le direzioni forse di 15 e anche aggiungere un contenuto giustificato di 49 00:04:27,120 --> 00:04:33,550 spazio intorno per distribuire bene i nostri elementi di dettaglio qui, che dovrebbe essere buono. 50 00:04:35,210 --> 00:04:42,270 Oltre a ciò, sull'immagine qui, dobbiamo anche aggiungere uno stile, lì la larghezza dovrebbe essere del 51 00:04:42,440 --> 00:04:48,100 100% diciamo, per prendere l'intera larghezza disponibile e per l'altezza, andrò con 200, 52 00:04:48,140 --> 00:04:49,580 anche se ovviamente 53 00:04:49,580 --> 00:04:54,680 potresti calcola dinamicamente questo con l'API delle dimensioni, ad esempio per 54 00:04:54,740 --> 00:05:00,720 prendere sempre una certa frazione dell'altezza disponibile o semplicemente giocare con valori diversi qui. 55 00:05:00,890 --> 00:05:03,520 Vado con quello e guardo qui e non sembra 56 00:05:03,740 --> 00:05:04,940 troppo malandato, non è 57 00:05:04,970 --> 00:05:06,130 poi così male. 58 00:05:07,450 --> 00:05:13,990 Ora puoi sicuramente provare anche qualche lavoro bonus qui, alcune attività bonus e ad esempio 59 00:05:13,990 --> 00:05:20,200 colorare questi dettagli: semplici, convenienti e la durata a seconda che sia piuttosto breve o 60 00:05:20,200 --> 00:05:25,810 dipendente dai diversi valori che hai per semplicità, complessità e convenienza . 61 00:05:25,810 --> 00:05:31,150 Non è qualcosa che farò qui, ma puoi dare un'occhiata ai dati dei pasti ovviamente per vedere quali valori abbiamo lì 62 00:05:31,150 --> 00:05:37,090 per ricavare ciò che è breve, che cos'è una durata media che è una lunga durata e per vedere quali valori vengono utilizzati per 63 00:05:37,090 --> 00:05:41,800 la complessità e così via e quindi potresti effettivamente aggiungerne alcuni se controlli per applicare uno stile diverso 64 00:05:41,800 --> 00:05:47,470 ai diversi valori che stiamo presentando qui nella schermata dei dettagli del pasto per questi dettagli in modo da colorare il testo in 65 00:05:47,470 --> 00:05:52,360 modo diverso a seconda che sia lungo o meno. Non è qualcosa che farò qui perché 66 00:05:52,360 --> 00:05:58,150 è solo un po 'di lavoro extra che non aggiunge molto alla navigazione che è al 67 00:05:58,150 --> 00:05:59,740 centro di questo modulo. 68 00:05:59,740 --> 00:06:08,110 Quindi, invece, mi concentrerò su ingredienti e passaggi e lì, un primo passo è assicurarsi che il titolo qui 69 00:06:08,530 --> 00:06:10,250 sia disegnato correttamente. 70 00:06:10,330 --> 00:06:17,660 Quindi aggiungiamo il titolo al foglio di stile e lì dentro, aggiungerò la famiglia di caratteri e imposterò questa opzione 71 00:06:19,080 --> 00:06:26,790 per aprire sans grassetto, impostare forse la dimensione del carattere su 22 e impostare l'allineamento del testo al centro per centrare 72 00:06:26,810 --> 00:06:32,160 il testo al centro e con quello se controlliamo questo, sembra abbastanza carino. 73 00:06:32,230 --> 00:06:37,540 Ora voglio anche produrre i miei ingredienti nei miei passi ovviamente e per questo, è importante capire che 74 00:06:37,540 --> 00:06:40,770 nei dati fittizi, questi sono array, questi sono i miei 75 00:06:40,780 --> 00:06:42,480 ingredienti per esempio, questi sono 76 00:06:42,490 --> 00:06:49,540 i miei passi e vedi che c'è solo testo in questi array. Quindi voglio solo visualizzare il mio testo qui 77 00:06:49,720 --> 00:06:56,410 come elenco e non userò una FlatList perché potresti farlo, potresti avere dei contenitori scorrevoli lì dentro per 78 00:06:56,410 --> 00:07:01,470 così dire, ma renderò semplicemente gli ingredienti e i passaggi sopra ogni altro. 79 00:07:01,480 --> 00:07:07,690 Quindi qui, possiamo usare un buon vecchio approccio che conosciamo da Vanilla React o React per il web 80 00:07:07,690 --> 00:07:14,140 a cui ho anche mostrato in precedenza nel corso. Possiamo usare il nostro pasto selezionato e lì, gli ingredienti che 81 00:07:14,140 --> 00:07:17,640 sono un array di stringhe e mapparlo in un array di 82 00:07:17,650 --> 00:07:23,230 componenti, ecco come puoi generare un elenco di dati in React e anche React Native e spesso, usi 83 00:07:23,230 --> 00:07:27,660 FlatList ma qui non è necessario perché non è una quantità infinita, quindi non 84 00:07:27,670 --> 00:07:33,300 abbiamo bisogno di queste ottimizzazioni e abbiamo una vista a scorrimento avvolgente su tutto lo schermo, quindi saremo 85 00:07:33,400 --> 00:07:38,050 in grado di scorrere anche se stiamo producendo più di adattamenti sullo schermo, quindi stiamo 86 00:07:38,050 --> 00:07:39,950 assolutamente bene usando questo approccio e 87 00:07:39,950 --> 00:07:45,220 quindi qui, avrò il mio unico ingrediente in questa funzione di mappa e la mappa è un 88 00:07:45,220 --> 00:07:46,900 metodo incorporato in JavaScript come 89 00:07:46,990 --> 00:07:50,030 sai e qui dobbiamo restituire un elemento jsx ora e 90 00:07:50,170 --> 00:07:55,660 quello che voglio restituire è un componente di testo in cui ho semplicemente prodotto ingrediente perché ingredienti è 91 00:07:55,720 --> 00:07:56,880 un array 92 00:07:56,890 --> 00:07:59,010 di stringhe, quindi ingrediente è solo una 93 00:07:59,020 --> 00:08:03,280 stringa e quindi qui dobbiamo anche fornire una chiave, questo è un requisito di 94 00:08:03,280 --> 00:08:07,980 React e possiamo usare ingrediente come chiave perché avere sempre ogni ingrediente una sola volta. 95 00:08:07,990 --> 00:08:10,230 In modo che sia garantito per essere unico, 96 00:08:10,240 --> 00:08:12,510 ecco come vengono preparati i nostri pasti e con ciò 97 00:08:12,550 --> 00:08:19,520 se salviamo questo e diamo un'occhiata a una ricetta qui, vediamo i nostri ingredienti. Ora per lo styling, possiamo sicuramente fare qualcosa 98 00:08:19,520 --> 00:08:21,620 lì e lo farò 99 00:08:21,650 --> 00:08:26,960 in un secondo, ma prima di farlo, lasciatemelo ripetere per i passaggi 100 00:08:26,960 --> 00:08:34,250 qui, sostituisco questo testo con il pasto selezionato. passaggi e quindi emettere ogni passaggio qui che è anche solo una 101 00:08:34,350 --> 00:08:41,910 stringa e che è anche unico in un testo e con quello aggiunto, dovremmo anche vedere i passaggi per il nostro pasto, anzi lo facciamo. 102 00:08:42,630 --> 00:08:46,730 Ora di nuovo, lo stile può essere migliorato un po 'e faremo proprio 103 00:08:47,010 --> 00:08:53,460 questo e penso che abbia senso creare un componente separato o renderizzare la funzione per questo e creerò un componente separato, 104 00:08:53,460 --> 00:08:58,830 lo memorizzeremo nello stesso file però perché lo usiamo davvero solo in quel file ma potresti anche 105 00:08:58,830 --> 00:08:59,310 creare 106 00:08:59,340 --> 00:09:03,260 un nuovo file, totalmente a te. Lì avrò la mia voce 107 00:09:03,270 --> 00:09:11,340 di elenco che riceve oggetti di scena dove torno e ora qui voglio usare una vista che sto importando come 108 00:09:11,350 --> 00:09:17,500 un wrapper in modo da poter dare uno stile a questo contenitore e lì dentro, 109 00:09:17,500 --> 00:09:24,690 ho il mio testo dove ho prodotto oggetti di scena figli e ora quella vista qui otterrà uno 110 00:09:24,700 --> 00:09:28,450 stile dagli stili. ListItem forse in modo che 111 00:09:28,450 --> 00:09:33,490 possiamo modellarlo bene e qui, ovviamente, non voglio usare il testo ma in realtà il 112 00:09:33,490 --> 00:09:34,630 testo predefinito, anche 113 00:09:34,780 --> 00:09:38,010 qui ovviamente, in modo da sfruttare il nostro testo personalizzato. 114 00:09:38,170 --> 00:09:47,430 Ora per lo stile dell'elemento elenco qui, scendiamo al foglio di stile e aggiungiamo l'elemento elenco e ogni elemento dell'elenco dovrebbe 115 00:09:47,460 --> 00:09:55,530 avere un margine, un margine verticale diciamo 10 e un margine orizzontale diciamo 20, quindi più spazio a 116 00:09:55,530 --> 00:10:05,600 sinistra e a destra e potremmo anche aggiungere un colore del bordo di un colore grigiastro chiaro qui con #ccc e una 117 00:10:05,600 --> 00:10:09,540 larghezza del bordo di 1, vedremo come appare e 118 00:10:09,540 --> 00:10:16,730 quindi aggiungere anche un po 'di imbottitura, 10 in tutte le direzioni e noi vedrò 119 00:10:17,570 --> 00:10:18,930 come sembra. 120 00:10:18,950 --> 00:10:25,910 Ora dobbiamo solo assicurarci di utilizzare il nostro componente dell'elemento dell'elenco e di usarlo restituendo questo invece del testo qui quando emettiamo 121 00:10:25,910 --> 00:10:30,590 gli ingredienti, passiamo comunque ingrediente tra i tag di apertura e chiusura del nostro 122 00:10:30,590 --> 00:10:36,200 componente personalizzato perché lì, siamo usare oggetti di scena per bambini che usano il contenuto che passiamo tra 123 00:10:36,470 --> 00:10:38,920 i tag di apertura e chiusura e facciamo 124 00:10:39,110 --> 00:10:43,870 lo stesso per i nostri passi. Detto questo, 125 00:10:44,530 --> 00:10:47,520 diamo un'occhiata a questo, 126 00:10:47,670 --> 00:10:55,870 sì, non sembra troppo male. Facciamo i nostri passi qui, abbiamo i nostri ingredienti, ovviamente puoi perfezionare questo 127 00:10:55,870 --> 00:11:02,650 stile, sintonizzarti sulle tue esigenze, sul modo in cui vuoi che appaia, ma in realtà sono abbastanza soddisfatto di ciò e con quello, 128 00:11:02,650 --> 00:11:08,050 abbiamo ottenuto un dettaglio di base schermo e, naturalmente, questa schermata di dettaglio funziona anche per i nostri 129 00:11:08,050 --> 00:11:10,610 preferiti perché stiamo usando la stessa schermata lì. 130 00:11:10,660 --> 00:11:15,500 Quindi sembra abbastanza bello, lo schermo del filtro è ciò che ora manca.