Quindi concentriamoci sulla schermata dei dettagli del pasto per ora,
quindi
la parte qui in cui visualizziamo i dettagli della ricetta selezionata.
In questo momento, abbiamo solo il contenuto fittizio lì, della schermata dei dettagli del pasto e questo non
è ovviamente il contenuto che voglio davvero avere
lì, invece cosa dovrebbe essere lì?
Bene, se diamo un'occhiata al nostro modello di pasto, probabilmente ha senso avere l'immagine lì, tieni presente che
il titolo è già mostrato nella nostra intestazione, quindi ha senso avere l'immagine qui in
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
nostra ricetta e poi anche al di sotto di
questo, elenca tutti gli ingredienti e i passaggi necessari per preparare quel piatto. Quindi è alla fine quello che voglio avere in questa
pagina qui su MealDetailScreen e quindi, penso che abbia senso prima di tutto
aggiungere una vista di scorrimento perché avremo sicuramente un sacco di contenuti lì che
molto probabilmente non adattarsi a uno schermo e certamente non su tutte le dimensioni possibili del dispositivo.
Quindi aggiungerò una vista di scorrimento qui e la avvolgerò attorno al mio contenuto qui.
Ora avremo un paio di
sezioni diverse qui, ad esempio in alto, voglio avere la mia immagine e per
questo, importerò anche il componente immagine da React Native qui in modo che
possiamo rendere un'immagine qui, non un'immagine di
sfondo ma un'immagine normale e voglio aggiungere questa, diciamo qui in alto, qualcosa del genere.
Ora dopo l'immagine, voglio avere una vista con la durata, l'accessibilità economica e la complessità di cui ho
parlato, quindi sostanzialmente la stessa configurazione che abbiamo nell'elemento pasto, questo qui potresti dire e quindi copierò effettivamente la
vista da lì e quindi possiamo regolarlo quando ne abbiamo bisogno qui in MealDetailScreen, quindi sostituirò
semplicemente questa vista con la vista copia.
Naturalmente ciò ci richiede di importare qui il
componente
di testo predefinito, quindi aggiungiamo questo, importiamo il testo predefinito
dal testo predefinito dei componenti. Quindi questa è la riga successiva
e, successivamente, voglio avere i miei ingredienti e i passaggi che devi eseguire.
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
perché voglio avere un'intestazione in grassetto
qui, forse aumentare la dimensione del carattere. Di seguito, ho il mio elenco di ingredienti,
quindi un elenco di ingredienti e ovviamente non è il contenuto finale, invece renderemo un elenco
qui e sotto quello, lo ripeterò qui perché poi voglio avere un titolo in cui dico passaggi e poi un elenco di
passaggi sotto quello e ora mi sbarazzerò di questo vecchio contenuto laggiù ed è quello con cui
voglio lavorare.
Ora, naturalmente, mancano tutti gli stili e anche la durata degli oggetti di scena e
così via, che non produce nulla, invece dobbiamo lavorare con il pasto selezionato qui, la durata del
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,
è un oggetto con una proprietà URI che punta a selectedMeal. imageUrl per caricare questo e dobbiamo anche applicare
uno stile lì, per impostare una larghezza e un'altezza, quindi
qui voglio puntare all'immagine degli stili diciamo e tutti questi stili mancano
come ho detto, quindi aggiungiamolo. Qui per questo stile, voglio anche dire stili. dettagli forse perché stiamo visualizzando i dettagli
di questa ricetta e andiamo quindi al foglio di stile, quindi rimuoviamo lo schermo di
cui
non abbiamo più bisogno, invece aggiungiamo immagine e dettagli. Ora per i dettagli, dobbiamo impostare la direzione del flex su row perché
dovrebbero essere tutti i dettagli di fila.
Possiamo aggiungere un po 'di imbottitura in tutte le direzioni forse di 15 e anche aggiungere un contenuto giustificato di
spazio intorno per distribuire bene i nostri elementi di dettaglio qui, che dovrebbe essere buono.
Oltre a ciò, sull'immagine qui, dobbiamo anche aggiungere uno stile, lì la larghezza dovrebbe essere del
100% diciamo, per prendere l'intera larghezza disponibile e per l'altezza, andrò con 200,
anche se ovviamente
potresti calcola dinamicamente questo con l'API delle dimensioni, ad esempio per
prendere sempre una certa frazione dell'altezza disponibile o semplicemente giocare con valori diversi qui.
Vado con quello e guardo qui e non sembra
troppo malandato, non è
poi così male.
Ora puoi sicuramente provare anche qualche lavoro bonus qui, alcune attività bonus e ad esempio
colorare questi dettagli: semplici, convenienti e la durata a seconda che sia piuttosto breve o
dipendente dai diversi valori che hai per semplicità, complessità e convenienza .
Non è qualcosa che farò qui, ma puoi dare un'occhiata ai dati dei pasti ovviamente per vedere quali valori abbiamo lì
per ricavare ciò che è breve, che cos'è una durata media che è una lunga durata e per vedere quali valori vengono utilizzati per
la complessità e così via e quindi potresti effettivamente aggiungerne alcuni se controlli per applicare uno stile diverso
ai diversi valori che stiamo presentando qui nella schermata dei dettagli del pasto per questi dettagli in modo da colorare il testo in
modo diverso a seconda che sia lungo o meno. Non è qualcosa che farò qui perché
è solo un po 'di lavoro extra che non aggiunge molto alla navigazione che è al
centro di questo modulo.
Quindi, invece, mi concentrerò su ingredienti e passaggi e lì, un primo passo è assicurarsi che il titolo qui
sia disegnato correttamente.
Quindi aggiungiamo il titolo al foglio di stile e lì dentro, aggiungerò la famiglia di caratteri e imposterò questa opzione
per aprire sans grassetto, impostare forse la dimensione del carattere su 22 e impostare l'allineamento del testo al centro per centrare
il testo al centro e con quello se controlliamo questo, sembra abbastanza carino.
Ora voglio anche produrre i miei ingredienti nei miei passi ovviamente e per questo, è importante capire che
nei dati fittizi, questi sono array, questi sono i miei
ingredienti per esempio, questi sono
i miei passi e vedi che c'è solo testo in questi array. Quindi voglio solo visualizzare il mio testo qui
come elenco e non userò una FlatList perché potresti farlo, potresti avere dei contenitori scorrevoli lì dentro per
così dire, ma renderò semplicemente gli ingredienti e i passaggi sopra ogni altro.
Quindi qui, possiamo usare un buon vecchio approccio che conosciamo da Vanilla React o React per il web
a cui ho anche mostrato in precedenza nel corso. Possiamo usare il nostro pasto selezionato e lì, gli ingredienti che
sono un array di stringhe e mapparlo in un array di
componenti, ecco come puoi generare un elenco di dati in React e anche React Native e spesso, usi
FlatList ma qui non è necessario perché non è una quantità infinita, quindi non
abbiamo bisogno di queste ottimizzazioni e abbiamo una vista a scorrimento avvolgente su tutto lo schermo, quindi saremo
in grado di scorrere anche se stiamo producendo più di adattamenti sullo schermo, quindi stiamo
assolutamente bene usando questo approccio e
quindi qui, avrò il mio unico ingrediente in questa funzione di mappa e la mappa è un
metodo incorporato in JavaScript come
sai e qui dobbiamo restituire un elemento jsx ora e
quello che voglio restituire è un componente di testo in cui ho semplicemente prodotto ingrediente perché ingredienti è
un array
di stringhe, quindi ingrediente è solo una
stringa e quindi qui dobbiamo anche fornire una chiave, questo è un requisito di
React e possiamo usare ingrediente come chiave perché avere sempre ogni ingrediente una sola volta.
In modo che sia garantito per essere unico,
ecco come vengono preparati i nostri pasti e con ciò
se salviamo questo e diamo un'occhiata a una ricetta qui, vediamo i nostri ingredienti. Ora per lo styling, possiamo sicuramente fare qualcosa
lì e lo farò
in un secondo, ma prima di farlo, lasciatemelo ripetere per i passaggi
qui, sostituisco questo testo con il pasto selezionato. passaggi e quindi emettere ogni passaggio qui che è anche solo una
stringa e che è anche unico in un testo e con quello aggiunto, dovremmo anche vedere i passaggi per il nostro pasto, anzi lo facciamo.
Ora di nuovo, lo stile può essere migliorato un po 'e faremo proprio
questo e penso che abbia senso creare un componente separato o renderizzare la funzione per questo e creerò un componente separato,
lo memorizzeremo nello stesso file però perché lo usiamo davvero solo in quel file ma potresti anche
creare
un nuovo file, totalmente a te. Lì avrò la mia voce
di elenco che riceve oggetti di scena dove torno e ora qui voglio usare una vista che sto importando come
un wrapper in modo da poter dare uno stile a questo contenitore e lì dentro,
ho il mio testo dove ho prodotto oggetti di scena figli e ora quella vista qui otterrà uno
stile dagli stili. ListItem forse in modo che
possiamo modellarlo bene e qui, ovviamente, non voglio usare il testo ma in realtà il
testo predefinito, anche
qui ovviamente, in modo da sfruttare il nostro testo personalizzato.
Ora per lo stile dell'elemento elenco qui, scendiamo al foglio di stile e aggiungiamo l'elemento elenco e ogni elemento dell'elenco dovrebbe
avere un margine, un margine verticale diciamo 10 e un margine orizzontale diciamo 20, quindi più spazio a
sinistra e a destra e potremmo anche aggiungere un colore del bordo di un colore grigiastro chiaro qui con #ccc e una
larghezza del bordo di 1, vedremo come appare e
quindi aggiungere anche un po 'di imbottitura, 10 in tutte le direzioni e noi vedrò
come sembra.
Ora dobbiamo solo assicurarci di utilizzare il nostro componente dell'elemento dell'elenco e di usarlo restituendo questo invece del testo qui quando emettiamo
gli ingredienti, passiamo comunque ingrediente tra i tag di apertura e chiusura del nostro
componente personalizzato perché lì, siamo usare oggetti di scena per bambini che usano il contenuto che passiamo tra
i tag di apertura e chiusura e facciamo
lo stesso per i nostri passi. Detto questo,
diamo un'occhiata a questo,
sì, non sembra troppo male. Facciamo i nostri passi qui, abbiamo i nostri ingredienti, ovviamente puoi perfezionare questo
stile, sintonizzarti sulle tue esigenze, sul modo in cui vuoi che appaia, ma in realtà sono abbastanza soddisfatto di ciò e con quello,
abbiamo ottenuto un dettaglio di base schermo e, naturalmente, questa schermata di dettaglio funziona anche per i nostri
preferiti perché stiamo usando la stessa schermata lì.
Quindi sembra abbastanza bello, lo schermo del filtro è ciò che ora manca.