Per dare uno stile agli elementi separati, creerò di nuovo un componente
separato e lo chiamerò mealitem. js, il nome
come sempre dipende da te e lì dentro,
conosci il gioco, creiamo un componente
React importando React, probabilmente avremo anche bisogno di visualizzazione, testo e foglio di stile e
forse anche altre cose da React Native. Quindi impostiamo il componente, elemento pasto, dove riceviamo oggetti di scena e
dove alla fine restituiamo un po 'di jsx. Imposta qui un foglio di stile, memorizzalo in una costante di stile con
il foglio di stile creato al quale passiamo un oggetto e alla fine, esportiamo qui il nostro pasto come file predefinito. Ora con questo qui, nell'elemento pasto, in questo componente, ovviamente
dobbiamo restituire un codice jsx
per quell'elemento pasto e questo è qualcosa che ottengo dalla schermata dei pasti della
categoria. Lì ho
questa vista con il mio testo qui, che è alla fine quello che voglio l'output, un po 'più complesso di così,
ma lo taglierò da lì e lo sposterò sull'elemento del pasto e lì, restituirò questa
vista qui ma di ovviamente non abbiamo finito. Per uno, anche questo dovrebbe essere
tangibile perché possiamo selezionare un pasto, possiamo selezionare una ricetta del genere da
portare alla schermata dei dettagli, quindi importerò opacità tangibile.
Ora, naturalmente, potresti ancora fare questa differenziazione e utilizzare l'effetto a catena con un
feedback nativo tangibile su
Android se lo desideri, andrò con un'opacità tangibile per ora e avvolgerò la mia vista qui con opacità tangibile, in questo
modo in modo che possiamo in realtà tocca il nostro articolo qui e suPress, in realtà voglio attivare una funzione che mi aspetto di ottenere su
una proprietà che non stiamo ancora passando all'elemento del pasto ma perché non
stiamo ancora utilizzando l'elemento del pasto ovunque ma che lo farò passiamo in futuro, forse lo
chiameremo su select meal o semplicemente suSelect, qualunque cosa tu voglia, lo chiameròSelectMeal e mi aspetto di ottenere quel
puntello sull'elemento del pasto quando lo useremo in jsx. Quindi questa è l'opacità tangibile, lì dentro ho
la mia visione con il titolo e in realtà quella vista dovrebbe essere un po 'più complessa di quella.
Voglio avere una vista, una vista nidificata lì dentro come questa e un'altra vista sotto quella, quindi voglio
avere due righe.
Questo verrà impostato come una colonna, ma queste due viste qui verranno impostate come righe qui.
La prima vista dovrebbe anche rendere un'immagine di sfondo, in modo che il titolo si trovi davanti a questa
immagine
di sfondo, la seconda vista, la seconda riga qui dovrebbe rendere alcuni dettagli sulla ricetta
selezionata, come la sua complessità e durata.
Quindi cominciamo con quello prima di aggiungere successivamente l'immagine, su entrambe queste viste,
aggiungerò quindi la proprietà dello stile e puntare alla riga del pasto degli
stili o come volete nominarlo perché sarà una riga nella mia presentazione del pasto
qui e io Aggiungerò quindi la riga del pasto laggiù e imposterò la direzione flessibile qui sulla riga ovviamente perché
dovrebbero essere righe di dati. Ora intorno all'elemento generale
qui, avvolgerò un'altra vista in cui voglio impostare uno
stile generale di stili elemento pasto e elemento pasto, che
è anche configurato qui nel foglio di stile ovviamente e lì voglio
dare ad ogni pasto un'altezza di 200 diciamo, ogni elemento nell'elenco qui e una
larghezza del 100% per prendere l'intera larghezza disponibile e forse anche un colore di sfondo di questo aspetto grigiastro
qui, possiamo vedere se vogliamo mantenerlo, per ora lo farò usalo.
Ora possiamo usare l'elemento pasto qui e non abbiamo ancora
finito con esso, ma possiamo iniziare a usarlo qui nella schermata della categoria pasti ovviamente importandolo, importando l'elemento pasto dalla cartella dei componenti e
lì, dal file dell'articolo pasto e quindi renderlo qui, quindi restituisci qui un pasto in questo modo e ovviamente ora dobbiamo passare alcuni dati, dati come il
titolo che otteniamo da itemData. articolo. titolo e puntello onSelect che
mi aspetto di inserire nell'oggetto pasto che alla fine colleghiamo all'opacità toccabile puntello onPress, onSelectMeal, questo era il
nome che ho scelto, è anche qualcosa che dobbiamo impostare
qui quando
usiamo il pasto oggetto e questo dovrebbe
puntare a una funzione che per ora non fa nulla ma
che successivamente caricherà la pagina dei dettagli per quel pasto.
Quindi ora otteniamo il titolo sull'elica del titolo, quindi l'elemento pasto, qui quando produciamo il titolo lo facciamo con l'aiuto degli oggetti
di scena. titolo.
Se ora salviamo questo, dovremmo effettivamente essere in grado di vedere qualcosa qui, quindi aspettiamo che questo si ricarichi e
sì, vediamo il
nostro pasto qui e sicuramente non troppo bello ma almeno vediamo un po 'più di prima.
Ora quello che mi piacerebbe avere qui è un po 'di spazio attorno all'elenco ma all'interno
dello spazio, l'elemento dell'elenco dovrebbe assumere l'intera larghezza disponibile e non solo la larghezza dell'elemento più largo che
è attualmente ciò che sta accadendo.
E per questo, possiamo andare alla FlatList e lì, aggiungere la proprietà style e impostare questa larghezza al 100% per assicurarci
che la FlatList stessa prenda tutta la larghezza che può ottenere.
Con ciò, dovremmo guardare che vogliamo qui.
Ora, ovviamente, i cibi non sono fatti, non hanno
l'aspetto che voglio, anche se lentamente ci arriviamo. Ora nel MealItem. js file, abbiamo ancora del
lavoro da fare, ad esempio questa vista
qui con il titolo in seguito conterrà anche l'immagine e quindi questo dovrebbe essere molto più grande della
riga sotto di essa che in seguito produrrà solo alcuni dettagli.
Quindi qui, unirò i miei stili di fila di pasti con un altro oggetto di stile, quindi con lo stile impostato in un altro oggetto di foglio di
stile che chiamerò intestazione del pasto o come volete nominarlo e lo stesso laggiù per i dettagli alla
fine, li unirò con i dettagli
del pasto degli stili, in modo che abbiamo combinato gli stili e iniziamo con l'intestazione del pasto
che possiamo impostare qui.
L'intestazione del pasto alla fine conterrà l'immagine e anche il titolo e voglio
che l'altezza sia
pari all'80% dell'altezza disponibile, quindi dovrebbe essere molto grande. I dettagli del pasto otterranno quindi automaticamente il restante 20% ovviamente
e per vedere se funziona, emettiamo alcuni dettagli qui, quindi in quella vista qui, in quella riga sotto
la nostra riga del titolo, voglio
anche avere un testo qua e là diciamo
la durata dei puntelli e poi m in seguito, per minuti perché m durata sarà un numero che trattiamo
come minuti.
Dobbiamo solo passare la durata dalla schermata dei pasti della categoria ovviamente, quindi quando
usiamo l'elemento del pasto, oltre a passare un titolo, imposterò il sostegno della durata perché ora lo
stiamo aspettando sull'elemento del pasto.
Otteniamo questo da itemData. elemento che è il nostro pasto e lì, avremo una
proprietà di durata perché i nostri pasti come definiti nel modello qui hanno una proprietà di durata
e in effetti se dai un'occhiata ai dati fittizi, questa è la tua durata che viene inserita .
Se salviamo questo,
ora vediamo la nostra durata laggiù e in realtà, possiamo ancora cambiare l'altezza qui anche al 90%, dovrebbe essere più alta di quanto
non fosse qui, che sembra migliore
e ovviamente
puoi anche sperimentare con questo. Nella riga dei dettagli
del pasto, voglio anche avere un'imbottitura orizzontale, quindi sinistra e destra diciamo 10 e giustificiamo il mio
contenuto qui con spazio tra, tieni presente che è una riga quindi questo lo giustificherà in orizzontale, in modo che quando abbiamo
più elementi, saranno ben distribuiti lì.
Quindi abbiamo 20 minuti, generiamo più informazioni lì aggiungendo un altro testo e
lì,
produciamo la complessità, quindi qui emetterò la complessità
e, successivamente, produrrò l'accessibilità economica. Ora non ci resta che trasmettere tali dati anche durante la creazione del nostro pasto.
Quindi qui oltre alla durata, passiamo nella
complessità che arriviamo qui, itemData. articolo. complessità e convenienza, questo è ovviamente
itemData. articolo. convenienza,
così e se salviamo questo e lasciamo che questo ritorni, ora vediamo questo output qui. Ancora non molto bello e possiamo sicuramente migliorare
questo, ma un buon inizio. Ora semplice e conveniente o la nostra complessità e
convenienza quindi, che dovrebbe essere un po 'diverso. Sappiamo che sarà un testo e quindi
posso usare alcune funzioni o metodi Javascript che abbiamo a disposizione sulle stringhe, userò
semplicemente toUppercase per convertirlo in maiuscolo interamente in questo modo e ora questo dovrebbe già apparire
un po 'più bello di prima. Ora puoi ancora modificare lo stile qui, andrò con questo stile qui
per ora e ora aggiungiamo un'immagine di sfondo sopra.
Quindi, per questo, volevamo un'immagine di sfondo dietro questo testo del titolo e per fortuna, React Native rende
l'aggiunta di tale immagine di sfondo davvero molto semplice. React Native viene fornito con un componente integrato,
il componente di sfondo dell'immagine che possiamo usare per rendere un'immagine in background
come si immagina con il nome. Lo aggiungi accanto al componente dietro il quale vuoi aggiungerlo e lo aggiungi prima di
quel componente, quindi qui aggiungo lo sfondo dell'immagine e sullo sfondo dell'immagine come sull'immagine normale, imposti una fonte. Qui la mia fonte è un'immagine web, quindi passiamo un
oggetto, se fosse un'immagine locale, useresti richiedi e cosa hai imparato sulle immagini locali prima nel
corso ma qui, è un'immagine web, quindi passiamo un oggetto con un puntello URI
e lì usiamo l'immagine dei puntelli che è dove mi aspetto di ottenere quell'URL in questo componente, quindi
ovviamente dovremo assicurarci di passare l'URL su quel puntello. Aggiungerò anche un po
'di styling qui e saranno stili. bgImage che ora aggiungeremo al foglio di stile laggiù,
dove vuoi, forse qui, non importa. Una cosa importante qui, devi impostare
larghezza e altezza perché è un'immagine dal web e le userò
al 100% per entrambi perché dovrebbe riempire l'intero spazio che ottiene. Ora dobbiamo solo assicurarci di passare quell'immagine qui nella schermata dei pasti della categoria, quindi
oltre al titolo, qui voglio anche passare l'articolo Data. articolo. imageUrl è il nome di esso, puoi vederlo nel modello,
imageUrl, quindi è quello che stiamo passando e lo passiamo al puntello dell'immagine perché è quello che ci aspettiamo
e quello che stiamo impostando qui nel pasto articolo. E se ora lo salvi e mescoliamo le
cose e testiamo questo su Android, impiega un po 'più tempo a caricarsi, motivo per cui di solito uso
iOS qui, ma ora se testiamo questo, vediamo il nostro hamburger qui. Ciò che non vediamo
più è il nostro titolo però. Per mostrare di nuovo il titolo, assicurati di
avvolgere effettivamente lo sfondo dell'immagine attorno ad esso, ecco come dici a React Native quale contenuto dovrebbe
essere all'interno sopra quell'immagine di sfondo. Quindi ora con questo, ecco il nostro titolo, non è così facile da leggere e lo risolveremo, ma è di nuovo lì.
Quindi stiamo iniziando con quella ricetta qui, ora assicuriamoci che il titolo sia un
po 'più facile da vedere dandogli uno stile qui, titolo di stili che ora possiamo impostare laggiù e voglio impostare una famiglia di caratteri di
open senza grassetto,
ha senso dal momento che registriamo questo carattere.
Dagli una dimensione del carattere che aumentiamo un po ', forse 22,
puoi giocare con quello ovviamente.
Dai un colore bianco per renderlo un po 'più facile da leggere e assegna anche un colore di sfondo in modo
che possiamo sempre vederlo, anche se l'immagine di sfondo sarebbe bianca,
nel qual caso il testo bianco sarebbe difficile da leggere, dando questo è un colore RGBA che è un colore che ha
la trasparenza integrata per così dire e questo è semplicemente un colore nero che è un po 'trasparente e
ora aggiungo anche un po' di imbottitura qui, un'imbottitura
verticale di cinque dovrebbe apparire buona in modo che il la casella colorata di sfondo qui non si trova proprio sui bordi del
testo che si trova all'interno della casella e un'imbottitura orizzontale di 12 forse. Con ciò dovremmo sempre vedere il nostro
titolo e in realtà, probabilmente possiamo aumentare quella trasparenza qui,
diminuire l'opacità, sì, penso che sia
un po
'più bello, penso in questo modo. E l'unica cosa che voglio fare ora è che
voglio spostare quel titolo verso il basso nella parte inferiore
di questa immagine e quindi sullo stile bgImage che ho qui, imposterò il contenuto per rendere flessibile perché l'immagine di sfondo agisce automaticamente come un flexbox per così dire, come
una vista, in modo da poter giustificare i nostri contenuti lì dentro e
ora abbiamo quel titolo in fondo.
Ora potremmo anche centrare il testo andando al titolo qui e aggiungendo il centro di allineamento del testo e nel caso sia troppo lungo,
troppo grande, oltre ovviamente a ridurre
la dimensione del carattere che farò un po 'a 20, ovviamente
puoi vai a quel testo qui dove hai emesso un titolo e imposta il numero di righe
su 1 e questo assicurerà che il
testo venga automaticamente accorciato se è troppo grande, come qui per l'insalata con pomodorini. Vediamo anche uno strano effetto qui su iOS in cui abbiamo
uno sfondo in più dietro il nostro testo e non solo la casella colorata di sfondo qui.
Questo perché ho applicato il mio colore di sfondo e così effetto direttamente sul testo, per risolvere questo problema possiamo tagliarlo
dal titolo qui e impostare solo il colore e così via lì e invece aggiungere un contenitore del
titolo qui dove aggiungiamo questo colore di sfondo e così via e avvolgere questo contenitore attorno al nostro titolo, quindi
una vista extra che aggiungiamo qui ed è abbastanza normale in React Native annidare più
di tali viste e su quella vista, ora possiamo aggiungere stile, stili contenitore del titolo e se lo salviamo, dovremmo sbarazzarci di quello strano comportamento
su iOS,
sì ora non abbiamo quella scatola extra
lì, invece abbiamo solo un colore di sfondo e lo stesso su Android.
Quindi ora questo non sembra troppo male, ma non sono del
tutto felice, vorrei centrare i miei dettagli anche qui verticalmente e dargli un po 'più di spazio immagino e
per questo possiamo dare l'intestazione forse all'85% dell'altezza e sul dettaglio del pasto qui, tieni presente che la nostra direzione flessibile è
la fila perché stiamo unendo la fila del pasto e i dettagli del pasto qui e quindi il
nostro asse trasversale è dall'alto verso
il basso, quindi se vogliamo centrare verticalmente, cioè l'asse trasversale su cui dobbiamo centrare.
Quindi qui possiamo impostare allineare gli elementi che posizionano il centro dell'asse trasversale al centro e anche
cambiare il nostro colore qui un po 'per un po' di un colore più
bello, questo grigio molto chiaro, # f5f5f5 potrebbe apparire un po 'meglio, sì, sicuramente
lo fa .
Ora per essere sicuri di centrare veramente verticalmente, dobbiamo solo essere più espliciti
sull'altezza che dovrebbero prendere
i dettagli del nostro pasto, prendiamo l'85% sull'intestazione, quindi sul dettaglio qui, possiamo impostare
un'altezza del 15% ovviamente per il resto, sì e direi che qui sembra abbastanza decente, certamente elenca
gli elementi con cui possiamo lavorare qui.
Ora aggiungerò solo un po 'di raggio del bordo perché sai che mi piacciono i
raggi del bordo, quindi aggiungerò un raggio del bordo di 10 in modo da avere degli angoli arrotondati e con quello, se torni indietro,
noi' ci sei quasi ma noterai che l'immagine in realtà non rispetta il raggio del bordo.
Ora per risolvere il problema, sull'oggetto pasto, dobbiamo solo dire che l'overflow è nascosto in modo che nessun elemento figlio possa uscire da
questo spazio o questa forma che stiamo
costruendo qui.
E con ciò, è un inizio, qualcosa su cui possiamo
lavorare, ora ovviamente vogliamo assicurarci che quando tocchiamo un tale oggetto, andiamo effettivamente alla pagina dei dettagli.