Ora che abbiamo ridotto le nozioni di base sulla navigazione, che siamo in grado
di trasferire i dati, facciamo un passo indietro e concentriamoci sull'app che stiamo costruendo, che ovviamente non sembra così
eccezionale e concentriamoci su questi elementi di categoria qui nella griglia.
Possiamo toccarli ma ovviamente questa
non è un'app che vorresti usare. Ora per renderlo più utilizzabile nella schermata
delle categorie qui, prenderò effettivamente questo oggetto qui, questa
opacità tangibile, quindi questo elemento della griglia e lo esternalizziamo in un componente separato, non qualcosa
che devi fare ma qualcosa che potresti voler considerare di fare semplicemente per mantenere i tuoi componenti più snelli e puliti.
Per quello nella cartella dei componenti, aggiungerò un CategoryGridTile. js file, il nome dipende ovviamente da
te e lì dentro, dobbiamo importare React da React, avremo sicuramente anche bisogno di alcune cose da
React Native per costruire un componente lì, vale a dire avremo bisogno di un'opacità tangibile di Certo, avremo bisogno della
vista, avremo bisogno del testo e avremo bisogno di un foglio di stile in modo che possiamo anche modellarlo qui
e ora possiamo creare qui il componente delle tessere
della griglia della categoria che riceve alcuni oggetti di scena. Avremo bisogno di un foglio di stile
qui che memorizzerò nella costante di stili e ovviamente come sempre, in seguito possiamo esportare il
componente e all'interno di questa funzione del componente, restituirò il codice jsx che ho appena tagliato fuori
dalla schermata delle categorie qui . Quindi, qui, impostata l'opacità tangibile, questo elemento della griglia è impostato ma
dovremo cambiare un paio di cose. Nella schermata delle categorie, ad esempio, sto impostando qui lo stile degli elementi della griglia. Ora potremmo lasciarlo qui
e in un certo senso passarlo nella nostra tessera griglia e quindi fonderlo insieme lì come l'hai
imparato, ma imposterò semplicemente tutto lo stile nel componente stesso perché useremo solo la
tessera griglia categoria nella griglia nella schermata delle categorie. Quindi aggiungerò lo stile degli elementi della griglia qui nel
foglio di
stile in questo file, quindi funziona di nuovo, il gestore onPress non funzionerà ancora, lo risolveremo presto e ora possiamo
tornare alla schermata delle categorie e, naturalmente, importa il nostro componente. Quindi importa il componente del riquadro della griglia
della categoria lì dalla cartella dei componenti
e lì, il riquadro della griglia della categoria e ora restituiscilo qui quando eseguiamo il rendering di un nuovo elemento.
Ora, ovviamente, in questo
modo non funzionerà, dobbiamo inoltrare alcuni dati nel riquadro della griglia affinché funzioni correttamente lì
e dobbiamo anche assicurarci che premendo questo ci navighi. Ora, passerò i dati di cui abbiamo bisogno, che è
il titolo, quindi è ItemData. articolo. titolo e che ora è
un oggetto di scena che possiamo usare nel riquadro della griglia della categoria e voglio anche passare un altro oggetto
di scena che passa in una funzione che possiamo quindi eseguire per navigare e lo chiamerò suSeleziona ma puoi nominarlo come vuoi e lì
dentro, voglio solo eseguire il codice che attualmente eseguo su onPress. Quindi taglierò questo da qui fuori dal riquadro della griglia
di categoria, lo sposterò di nuovo nella schermata delle categorie, in questa funzione che passo a onSelect
e ora tutto ciò che dobbiamo fare è innescare OnSelect dall'interno del riquadro della griglia
di categoria, questo è ovviamente uno schema normale che potresti conoscere da React. Quindi di nuovo nel riquadro della griglia della categoria, onPress può semplicemente puntare
su puntelli onSelect per attivare la funzione passata nel puntello onSelect.
Ora il titolo che sto pubblicando qui può anche essere solo oggetti di scena. titolo perché stiamo ottenendo questo
puntello del titolo come puntello sulla nostra griglia della categoria che stiamo passando qui.
Detto questo, abbiamo diviso un po 'il nostro componente, ma ovviamente ora voglio anche lavorare
un po' di più sullo stile. Quindi, tornando al riquadro della griglia di categoria,
ad esempio, voglio usare il colore che sto impostando perché ogni categoria ha un colore
memorizzato in quella proprietà di colore qui, quindi sarebbe bello usarlo. Quindi possiamo anche inoltrare la piastrella della griglia della categoria, inoltrare il colore
qui, puoi ovviamente nominare questo oggetto come vuoi sull'elemento. proprietà del colore
e qui, deve essere. color perché abbiamo chiamato il colore della proprietà qui nel modello e ora
in un riquadro della griglia di categoria, possiamo usare quel colore per modellarlo qui.
Quindi, come si può quindi modellare questo, come dovrebbe essere? Aggiungendo uno stile alla vista che abbiamo all'interno
dell'opacità tangibile perché la componente di opacità tangibile stessa è invisibile ma la vista non è
e lì, possiamo passare un oggetto e impostare qui il colore di sfondo
su oggetti di scena. colore.
Bene, vediamo come appare, se lo salviamo e aspettiamo che questo si ricarichi, non
sembra troppo male ma è troppo
piccolo, dovrebbe riempire l'intero elemento della griglia e non solo la riga con il testo lì dentro.
Quindi, per migliorarlo, in realtà avrò questo stile in linea qui, ma lo fonderò insieme in un oggetto circostante con un'altra
configurazione di stile che ho impostato nel foglio di stile e darò un nome a questo contenitore, puoi nominarlo come
vuoi vuoi, contenitore
di stili, estrai anche tutte le coppie chiave-valore
in modo da unire questi stili qui e ora, il contenitore è un oggetto foglio di stile che
possiamo aggiungere laggiù e qui, possiamo impostare uno flessibile per assicurarci che ogni oggetto riempie tutto
lo spazio che ottiene e ora sembra molto meglio.
Ora non sono ancora felice al
100%, voglio aggiungere un po 'di raggio del bordo qui, diciamo 10 per avere degli
angoli arrotondati e, naturalmente, puoi impostare qualsiasi stile che
desideri qui, preferisci, io creerà anche un colore dell'ombra di nero e un'opacità dell'ombra di. 26 e un offset dell'ombra di larghezza 0, altezza 2 e un raggio dell'ombra di
10 e un'altitudine di 3, altezza per Android se ricordi perché queste proprietà dell'ombra influiscono solo su iOS,
in modo da ottenere un po 'di questa carta tridimensionale guarda
e ovviamente come ho già detto, puoi modellarlo nel modo che preferisci.
Ora, inoltre, voglio assicurarmi che questo testo si trovi nell'angolo in basso a destra e abbia
un po
'di imbottitura, ovviamente, un po' di spazio attorno. Quindi aggiungerò un po 'di imbottitura qui, diciamo di
10 e ora impostiamo il contenuto giustificato su flex-end, la direzione di flessione nel contenitore ovviamente è dall'alto verso il basso perché è la colonna,
quindi l'estremità flessibile lo sposterà nella qui e ora in basso per spostarlo anche a destra sull'asse orizzontale,
ho impostato allineare anche gli elementi per piegare
l'estremità e questo lo sposta alla fine dell'asse trasversale che viene lasciato da destra a destra in una
vista normale dove non l'hai fatto cambia la direzione del flex. Con ciò, otteniamo questo aspetto che direi che è
meglio, ma ovviamente, il testo qui, anche lo stile del testo potrebbe cambiare e un po 'più
di riempimento potrebbe
sembrare buono, forse 15, ma ovviamente possiamo sperimentare con questo e anche una nota a
margine importante, in questa app non mi concentrerò sulla costruzione di
un'esperienza totalmente reattiva qui, proverò a mantenerla breve e concisa perché l'obiettivo principale di questo modulo ovviamente
è la navigazione, quindi non ottimizzerò questo per tutti i possibili schermi e piattaforme.
Questo è qualcosa che puoi ovviamente fare come
pratica, non farò aderire per non gonfiare inutilmente questo modulo, quindi creerò solo uno stile che si adatta
bene a questi emulatori.
Detto questo, un po 'più di padding potrebbe avere senso e voglio anche dare
uno stile al titolo qui, quindi aggiungerò
diciamo qui
lo stile del titolo, impostato nel
foglio di stile, aggiungiamolo qua e là, voglio usare la mia famiglia di caratteri, open sans
grassetto che posso usare ovviamente perché lo sto registrando qui in app. js, quindi open sans bold è ora aggiunto qui e forse cambia anche la dimensione del
carattere un po 'a 22. Salviamo questo,
sembra abbastanza decente.
Ora c'è un'ultima cosa che voglio fare sul
riquadro della griglia della mia categoria, sul testo qui, imposterò il numero di righe su 2 in modo che qualsiasi testo che sia più lungo di
quello in realtà venga semplicemente tagliato che penso che appaia un po 'più carino. E, ultimo ma non meno importante, potresti notare che
su Android per la luce e adorabile, questo è a sinistra qui perché è
suddiviso in due righe, per assicurarmi che sia anche a
destra, sul titolo qui, imposterò allinea il testo a destra per forzare questo a essere sulla destra.
Quindi aspettiamo che si ricarichi
e ora sta guardando come dovrebbe.
Ora non è poi così
male, ora potresti notare che l'effetto appare un po 'strano se tocco un oggetto qui, otteniamo
questo strano bordo extra attorno ad esso.
Ora una cosa che farò ancora qui, che è totalmente facoltativa, ma comunque, la aggiungerò qui, aggiungerò l'API
della piattaforma e aggiungerò anche un feedback nativo tangibile per utilizzare effettivamente l'effetto a catena invece dell'opacità
tangibile se supportato.
Quindi qui, avrò il mio componente tangibile che per impostazione predefinita è
opacità tangibile ma se piattaforma. os equivale ad Android e come hai appreso in precedenza nel corso, la versione
è maggiore o uguale a 21, quindi sappiamo che è supportato un feedback nativo
tangibile, quindi imposterò un componente tangibile uguale al feedback nativo toccabile, come questo.
Usa qui il componente tattile invece dell'opacità tangibile e con
ciò, dovremmo avere un buon effetto a
catena su Android, su
iOS abbiamo l'effetto di opacità che vogliamo e su Android, ora abbiamo
un effetto a catena ma lo styling è spento ora.
Questo, tuttavia, è qualcosa che possiamo correggere aggiungendo una vista aggiuntiva attorno a questo che riceve qui il nostro
stile degli elementi della griglia anziché il componente toccabile e
con ciò, dobbiamo solo aggiungere una proprietà di stile extra sul componente toccabile e impostarne uno
flessibile.
Lo sto facendo con uno stile in
linea qui veloce e sporco, potresti aggiungere uno stile separato nel foglio di stile. Con quello sembra e si sente lo stesso
su iOS
e ora anche su Android, l'effetto a catena è lì.
Ora non sta usando i nostri angoli arrotondati, ma rende un quadrato o un rettangolo e in precedenza hai
anche imparato a risolverlo. Per risolvere il problema, tutto
ciò che dobbiamo fare è sull'elemento della griglia, aggiungiamo il raggio del bordo di
10 e quindi aggiungiamo effettivamente l'overflow nascosto per assicurarci che gli elementi figlio non possano essere visualizzati al di fuori di
quella vista
di avvolgimento, il che significa che l'ondulazione l'effetto non può uscire da quella casella arrotondata.
Ora abbiamo quello sguardo e questo è l'unico aggiustamento che voglio fare qui per piattaforme diverse
e con quello, non sembra poi così male, direi.
Ora, ovviamente, puoi modificarne l'aspetto, puoi modificare la dimensione del carattere e così via, renderlo davvero
bello sui tuoi dispositivi che stai testando.
Sono contento di questo aspetto e ora è davvero il momento di rendere anche alcune ricette quando
selezioniamo una categoria qui.