Sostituiamo il contenuto fittizio delle categorie qui con una griglia di categorie perché questa è l'idea dietro
questa schermata dopo tutto. Ora, per quello, possiamo
usare un componente che abbiamo usato prima e che è la FlatList.
Finora, l'abbiamo usato per elenchi normali, in realtà
puoi anche renderizzare le griglie con esso ed è esattamente quello che faremo qui.
Ora per quello in questa schermata di categoria, sostituirò tutto con FlatList qui e visualizzerò solo il mio elenco piatto qui in questa schermata che restituisco
alla
fine e imposterò num colonne qui che è una nuova proprietà che non abbiamo mai visto prima a 2
e questo definisce quante colonne vogliamo avere. Il valore predefinito è 1, che è un
elenco normale ma puoi avere più di una colonna e questo ti dà una griglia in modo efficace.
Ora, con ciò, potremmo rendere
una griglia ma ovviamente abbiamo bisogno di alcuni
dati per questo, altrimenti è difficile renderizzare una griglia, giusto?
Per questo, aggiungerò una nuova cartella che nominerò i dati e lì, aggiungerò un dato fittizio. js file perché alla fine, sono
solo alcuni dati fittizi che sto fornendo qui, non stiamo
caricando questo da un server o qualcosa del genere in questo momento, invece caricalo in questo modo.
Voglio avere un sacco di categorie lì dentro e per questo, aggiungerò ancora un'altra cartella che nomina i modelli che
è alla fine una cartella in cui voglio definire come i miei dati sono modellati in questa app, come
appare .
Quindi, possiamo aggiungere una categoria. js file per esempio e in questo
file, tutto quello che voglio avere è una classe che nominerò categoria e le classi sono funzioni Javascript predefinite
nel Javascript moderno che esporto e lì definirò semplicemente come dovrebbe apparire un oggetto categoria nella mia applicazione in modo che in pratica
abbiamo un modo più semplice di creare questi oggetti senza errori di digitazione e così via.
Quindi qui, questa classe di categoria prenderà un costruttore e puoi usare questo costruttore che è un metodo predefinito
che puoi
aggiungere a qualsiasi classe in Javascript per inizializzare un oggetto basato su questa classe.
Puoi farlo aspettandomi alcuni argomenti qui nel costruttore e per una categoria, voglio ottenere un ID
per la categoria, un titolo e un colore che userò come colore di sfondo nella griglia per questo elemento della griglia per
questa categoria e memorizzerò tutti
questi dati in proprietà con l'aiuto di questa parola chiave. Nel caso in cui questo sia
totalmente nuovo per te, immergiti sicuramente in alcuni corsi o risorse Javascript prima perché non ha
nulla a che fare con la navigazione React
o con React Native, questo è Javascript moderno alla vaniglia.
Ora perché l'ho creato?
Perché ora posso importare la mia classe di categoria dalla cartella dei modelli, dalla categoria. file js nel file di dati fittizi e
quindi utilizzarlo per creare alcuni dati fittizi.
Ora trovi quei dati fittizi allegati, in allegato trovi il file Javascript con queste categorie fittizie che conservo
in una costante che esporto come esportazione denominata qui.
Questi sono alcuni dati fittizi per le categorie in questa app, in queste categorie
che voglio avere in questa app. Queste sono le categorie che userò in questa
app e queste sono le categorie che ora possiamo quindi usare all'interno dei nostri schermi, nella schermata delle categorie per essere precisi.
Quindi, lì dentro, voglio aggiungere un'importazione e importare categorie da dati / dati fittizi, quindi è importare quella costante
denominata che stiamo esportando lì.
Ora questo è un array di oggetti Javascript alla fine, giusto?
Questo è ciò che abbiamo archiviato
lì, è solo una matrice di oggetti Javascript che ora possiamo usare per rendere il nostro elenco o, per essere precisi, la
nostra griglia qui.
Quindi i dati per questo FlatList sono semplicemente i miei array di categorie, quindi mi limiterò a indicare le categorie
e ovviamente ora abbiamo anche bisogno di render item per definire come dovrebbe essere renderizzato un singolo elemento
della griglia, quale componente dovrebbe essere renderizzato lì. Per questo, aggiungerò una nuova funzione qui, render elemento
della griglia che è una funzione che riceverà alcuni dati dell'articolo alla fine qui e che dovrebbe restituire
un elemento jsx, dovrebbe restituire un
componente React qui e indicherò la griglia di rendering oggetto qui. Ora lì, renderò una vista e per semplificare le cose, per ora questa sarà una vista con
un testo lì dentro e in quel testo, voglio renderizzare ItemData.
oggetto, questo è ciò che abbiamo
disponibile su una FlatList se ricordi moduli precedenti, l'oggetto dati articolo qui ha una proprietà item, React
Native FlatList ti dà questa proprietà e lì dentro avremo una proprietà title perché un oggetto che stiamo arrivare qui è
solo una categoria che stiamo ottenendo dai nostri dati che stiamo inserendo nella FlatList, quindi avremo un tale oggetto
Javascript come un elemento lì e questo oggetto Javascript è
basato sul nostro modello qui e lì abbiamo impostato un titolo, un colore e una proprietà ID, quindi
abbiamo
una proprietà del titolo, quindi possiamo estrarre il titolo qui in questo modo, useremo il colore in seguito.
Quindi questa è
la prima cosa, dovrebbe funzionare. Ora nelle nuove versioni di
React Native, non è inoltre necessario informare React Native che il proprio ID non è un nome chiave ma in realtà è un
nome ID perché le versioni più recenti di React Native accettano l'ID come ID anche sui dati dell'elenco.
Se seguissi una versione precedente, dovresti aggiungere qui un estrattore di chiavi che è una funzione che ottiene
l'elemento e l'indice e deve restituire il valore che dovrebbe essere usato come chiave, quindi in questo caso
sarebbe essere oggetto. id, ancora una
volta le versioni più recenti di React Native non hanno bisogno di questo, ma solo per riferimento e per
le versioni precedenti, aggiungerò ancora qui.
Quindi ora restituiamo la nostra FlatList qui con i nostri dati.
Se ora salviamo questo, dovremmo già vedere i nostri
dati qui, ovviamente non proprio così belli ma una griglia,
abbiamo italiano, accanto ad
esso hamburger facili e veloci, accanto ad esso
tedesco, non sembra proprio una griglia ma tecnicamente lo è.
Ora, per renderlo un po 'più simile a una griglia, ovviamente dobbiamo aggiungere più stile. Ora per cambiare un po 'quello stile, possiamo andare qui ai
nostri elementi
della griglia, a un singolo elemento della griglia e aggiungere qui il puntello di stile e aggiungere lo stile dell'elemento della griglia o
qualunque cosa tu voglia nominarlo
e poi laggiù, aggiungerò griglia elemento sul mio foglio di stile e dare questa proprietà di flex, vogliamo prendere tutto lo
spazio che può ottenere,
salvarlo, ora questo sembra già un po 'più simile a una griglia.
Ora anche un certo margine attorno a ciascun elemento
sarebbe bello, quindi per questo possiamo solo aggiungere un margine e forse aggiungere 15 come margine attorno a ciascun elemento, in modo
da avere più spazio
in tutte le direzioni e con ciò,
ovviamente, non è poi così male ora possiamo anche cambiare l'aspetto generale e ad esempio dare
ad ogni oggetto un'altezza di diciamo 150 ed è totalmente a voi quali valori scegliete lì, ma direi
che è una griglia
abbastanza
bella, sicuramente non vince un premio di stile, ma stiamo andando nella giusta direzione.
Ora, prima di finire lo styling di questo e abbiamo sicuramente ancora del lavoro da fare per
quello, assicuriamoci di poter toccare questi elementi e poi torniamo alla schermata dei dettagli per quell'elemento specifico, quindi
vediamo anche come possiamo in realtà impostare un titolo nell'intestazione in modo da avere un'idea
migliore di dove siamo attualmente.