Remplaçons le contenu de l'écran factice des catégories ici par une grille de catégories, car c'est l'idée derrière
cet écran après tout. Maintenant, pour cela, nous
pouvons utiliser un composant que nous avons utilisé auparavant et c'est la FlatList.
Jusqu'à présent, nous l'avons utilisé pour des listes normales,
vous pouvez également rendre des grilles avec et c'est exactement ce que nous ferons ici.
Maintenant, pour cela dans cet écran de catégorie, je remplacerai tout par FlatList ici et ne produirai que ma liste plate ici dans cet écran que je retourne à la
fin
et je définirai des colonnes num ici qui est une nouvelle propriété que nous n'avons jamais vue auparavant à 2 et cela
définit le nombre de colonnes que nous voulons avoir. La valeur par défaut est 1, qui est
une liste normale, mais vous pouvez avoir plusieurs colonnes dedans, ce qui vous donne une grille efficace.
Maintenant, avec cela, nous pourrions rendre
une grille, mais bien sûr, nous avons besoin de
données pour cela, sinon il est difficile de rendre une grille,
non?
Pour cela, je vais ajouter un nouveau dossier que je nommerai des données et là-dedans, j'ajouterai des données fictives. fichier js car à la fin, ce ne
sont que des données factices que je fournis ici, nous ne chargeons
pas cela à partir d'un serveur ou quelque chose comme ça en ce moment, chargez-le simplement comme ceci à la place.
Je veux avoir un tas de catégories là-dedans et pour cela, je vais ajouter un autre dossier que je nomme des modèles qui
est à la fin un dossier où je veux définir comment mes données sont façonnées dans cette application, à quoi elles
ressemblent .
Alors là, on peut ajouter une catégorie. fichier js par exemple et dans ce fichier,
tout ce que je veux, c'est une classe que je nommerai catégorie et les classes sont des fonctionnalités Javascript par
défaut dans Javascript moderne que j'exporte et là je définirai simplement à quoi devrait ressembler un objet catégorie dans mon application comme, de sorte que nous
avons fondamentalement un moyen plus facile de créer ces objets sans faute de frappe et ainsi de suite.
Donc ici, cette classe de catégorie prendra un constructeur et vous pouvez utiliser ce constructeur qui est une méthode par défaut
que vous
pouvez ajouter à n'importe quelle classe en Javascript pour initialiser un objet basé sur cette classe.
Pour ce faire, attendez-vous à des arguments ici dans le constructeur et pour une catégorie, je veux
obtenir un ID pour la catégorie, un titre et une couleur que j'utiliserai comme couleur d'arrière-plan dans la grille pour cet élément de grille
pour cette catégorie et je stockerai
toutes ces données dans des propriétés à l'aide du mot-clé this. Dans le cas où cela
est totalement nouveau pour vous, plongez certainement dans certains cours ou ressources Javascript d'abord car cela
n'a rien à voir avec la navigation
React ou avec React Native, c'est du Javascript moderne vanille.
Maintenant, pourquoi ai-je créé cela?
Parce que maintenant je peux importer ma classe de catégorie depuis le dossier models, depuis la catégorie. fichier js dans le fichier de données factices,
puis l'utiliser pour créer des données factices.
Maintenant, vous trouvez ces données factices attachées, vous trouverez ci-joint un fichier Javascript avec ces catégories factices que je stocke dans
une constante que j'exporte ensuite en tant qu'exportation nommée ici.
Ce sont des données de catégorie factices pour les catégories de cette application, dans ces catégories
que je veux avoir dans cette application. Ce sont les catégories que j'utiliserai dans cette
application et ce sont les catégories que nous pouvons maintenant utiliser à l'intérieur de nos écrans, dans l'écran des catégories pour être précis.
Donc, là-dedans, je veux ajouter une importation et importer des catégories à partir de données / données factices, donc c'est importer la
constante nommée que nous exportons là-bas.
Maintenant, c'est un tableau d'objets Javascript à la fin, non?
C'est ce que nous avons stocké
là-bas, c'est juste un tableau d'objets Javascript que nous pouvons maintenant utiliser pour rendre notre liste ou pour être précis,
notre grille ici.
Donc, les données de cette FlatList sont simplement mes tableaux de catégories, donc je vais simplement pointer sur les catégories et
bien sûr, nous avons également besoin d'un élément de rendu pour définir comment un élément de grille unique doit
être rendu, quel composant doit y être rendu. Pour cela, je vais ajouter une nouvelle fonction ici, rendre
l'élément de grille qui est une fonction qui recevra des données d'élément à la fin ici et qui devrait retourner
un élément jsx, devrait retourner un composant
React ici et je pointerai sur la grille de rendu article ici. Maintenant là-dedans, je vais rendre une vue et pour garder les choses simples,
pour l'instant ce sera une vue avec un texte là-dedans et dans ce texte, je veux rendre
itemData.
élément, c'est ce que nous avons disponible
sur une FlatList si vous vous souvenez des modules précédents, l'objet de données d'élément ici a une propriété
d'élément, React Native FlatList vous donne cette propriété et là-dedans, nous aurons une propriété de titre parce qu'un élément que nous sommes arriver
ici est juste une catégorie que nous obtenons de nos données que nous alimentons dans la FlatList, donc nous aurons
un tel objet Javascript comme élément là-bas et cet objet Javascript
est basé sur notre modèle ici et là, nous avons mis en place un title, une couleur et une propriété
ID, donc nous
avons une propriété title, donc nous pouvons extraire le titre ici comme ceci, nous utiliserons la couleur plus tard.
Voilà donc la
première chose, cela devrait fonctionner. Désormais, dans les nouvelles versions
de React Native, vous n'avez pas besoin d'informer React Native que votre ID n'est pas nommé clé mais est en fait nommé ID
car les versions plus récentes de React Native acceptent également l'ID comme ID sur les données de liste.
Si vous suiviez dans une ancienne version, vous auriez besoin d'ajouter ici un extracteur de clé qui est une fonction qui
obtient l'élément et l'index et doit retourner la valeur qui devrait être utilisée comme clé, donc dans ce cas, ce
serait être article. id, encore une
fois, les nouvelles versions de React Native n'en ont pas besoin, mais juste pour référence et pour les anciennes
versions, je vais toujours l'ajouter ici.
Alors maintenant, nous retournons notre FlatList ici avec nos données.
Si nous enregistrons maintenant cela, nous devrions déjà voir nos données
ici, bien sûr pas vraiment si belles mais une grille, nous
avons l'italien, à côté
des hamburgers rapides et faciles, à côté de l'allemand,
cela ne ressemble tout simplement pas à une grille mais c'est techniquement.
Maintenant, pour le faire ressembler un peu plus à une grille, nous devons bien sûr ajouter plus de style. Maintenant, pour changer un peu ce style, nous pouvons aller à nos
éléments de
grille ici, à un élément de grille unique et ajouter l'accessoire de style ici et ajouter le style d'élément de grille ou tout
ce que vous voulez nommer,
puis là-bas, je vais ajouter élément de grille à ma feuille de style et donner cette propriété de flex, nous voulons prendre
autant d'espace que possible,
enregistrer cela, maintenant cela ressemble déjà un peu plus à une grille.
Maintenant, une certaine marge autour de chaque élément serait également
agréable, donc pour cela, nous pouvons simplement ajouter une marge et peut-être ajouter 15 comme marge autour de chaque élément, de sorte que nous ayons plus
d'espacement dans toutes les directions
et avec cela, ce n'est pas trop mal,
bien sûr nous pouvons maintenant aussi changer l'aspect général et par exemple donner à chaque élément une hauteur de
disons 150 et c'est totalement à vous de choisir les valeurs que vous choisissez là-bas, mais je dirais qu'avec cela, c'est
une assez belle grille,
ne gagne
certainement pas un prix de style pour le moment mais nous allons dans la bonne direction.
Maintenant, avant de terminer le style de cela et nous avons certainement du travail à faire pour cela, assurons-nous que
nous pouvons appuyer sur ces éléments et nous allons ensuite à l'écran de détail pour cet élément spécifique, voyons donc aussi
comment nous pouvons en fait, définissez un titre dans l'en-tête afin que nous ayons une meilleure idée de
l'endroit où nous en sommes actuellement.