Maintenant que nous avons les bases de la navigation, que nous sommes en mesure de
transmettre des données, prenons un peu de recul et concentrons-nous sur l'application que nous construisons, qui n'est bien sûr pas si
belle et concentrons-nous sur ces éléments de catégorie ici dans la grille.
Nous pouvons les exploiter, mais ce n'est
évidemment pas une application que vous souhaitez utiliser. Maintenant, pour rendre cela plus utilisable dans l'écran des
catégories ici, je vais en fait saisir cet élément ici,
cette opacité tactile, donc cet élément de la grille et l'externaliser dans un composant séparé, pas quelque chose
que vous devez faire mais quelque chose que vous voudrez peut-être envisager de faire simplement pour garder vos composants plus légers et plus propres.
Pour cela, dans le dossier des composants, je vais ajouter un CategoryGridTile. fichier js, le nom est bien sûr entièrement
à vous et là-dedans, nous devons importer React à partir de React, nous aurons certainement besoin de quelques
trucs de React Native pour construire un composant là-dedans, à savoir nous aurons besoin d'une opacité tactile de bien sûr, nous aurons
besoin de la vue, nous aurons besoin de texte et nous aurons besoin d'une feuille de style pour que nous puissions également
styliser ceci ici et maintenant nous pouvons créer le composant
de tuile de grille de catégorie ici qui reçoit quelques accessoires. Nous aurons besoin d'une feuille de style ici que
je vais stocker dans les styles constants et bien sûr comme toujours, nous pouvons ensuite exporter le
composant et l'intérieur de cette fonction de composant, je vais retourner le code jsx que je viens de couper
de l'écran des catégories ici . Donc, ici, l'opacité tactile configurée, cet élément de grille est configuré,
mais nous devrons changer quelques choses. Dans l'écran des catégories, par exemple, je configure le style d'élément de grille ici. Maintenant, nous pouvons le laisser
ici et le passer dans notre mosaïque, puis le fusionner là-bas comme vous l'avez appris, mais je vais
simplement configurer tout le style dans le composant lui-même, car nous n'utiliserons que la mosaïque
de catégorie dans le grille sur l'écran des catégories. Je vais donc ajouter le style d'élément de grille ici
à la feuille
de style dans ce fichier, donc cela fonctionne à nouveau, le gestionnaire onPress ne fonctionnera pas encore, nous le corrigerons bientôt et maintenant
nous pouvons revenir à l'écran des catégories et bien sûr, importer notre composant. Importez donc le composant de tuile de grille
de catégorie à partir du dossier
des composants et là, tuile de grille de catégorie et retournez-le simplement ici lorsque nous rendrons un nouvel élément.
Maintenant, bien sûr, comme cela
ne fonctionnera pas, nous devons transférer certaines données dans la tuile de la grille pour qu'elles fonctionnent correctement là-bas et
nous devons également nous assurer que le fait d'appuyer sur ceci nous guide. Maintenant, pour cela, je vais passer les données dont nous avons besoin là-bas
qui est le titre, donc c'est itemData. article. titre et c'est maintenant un accessoire
que nous pouvons utiliser dans la tuile de grille de catégorie et je veux également passer dans un autre accessoire qui
passe dans une fonction que nous pouvons ensuite exécuter pour naviguer et je nommerai ceci surSélectionnez mais vous pouvez nommer cela comme vous voulez et là-dedans,
je veux juste exécuter le code que j'exécute actuellement dans onPress. Je vais donc couper ceci à partir de la tuile de
grille de catégorie, le déplacer vers l'écran des catégories, dans cette fonction que je passe à onSelect et maintenant
tout ce que nous avons à faire est de déclencher onSelect depuis l'intérieur de la tuile de
grille de catégorie, c'est bien sûr un schéma normal que vous connaissez de React. Donc, de retour dans la tuile de grille de catégorie, onPress peut simplement pointer
sur les accessoires onSelect pour déclencher la fonction transmise dans l'accessoire onSelect.
Maintenant, le titre que je produis ici ne peut être que des accessoires. titre parce que nous obtenons
cet accessoire de titre comme accessoire sur notre grille de catégorie, nous le transmettons ici.
Avec cela, nous avons divisé un peu notre composant mais bien sûr maintenant je veux aussi
travailler un peu plus sur le style. Donc, de retour dans la tuile de grille de catégorie,
je veux par exemple utiliser la couleur que je configure parce que chaque catégorie obtient une couleur
stockée dans cette propriété de couleur ici, donc ce serait bien de l'utiliser. Par conséquent, nous pouvons également transmettre la tuile de grille de catégorie, la couleur avant ici, vous
pouvez bien sûr nommer cet accessoire comme vous le souhaitez sur l'article. propriété de couleur
et ici, ça doit être. couleur parce que nous avons nommé la couleur de la propriété ici dans le modèle et
maintenant dans un carreau de grille de catégorie, nous pouvons utiliser cette couleur pour le styliser ici.
Alors, comment styliser cela, à quoi cela devrait-il ressembler? En ajoutant un style à la vue que nous avons
à l'intérieur de l'opacité tactile car le composant d'opacité tactile lui-même est invisible mais la vue ne
l'est pas et là, nous pouvons passer un objet et définir la couleur d'arrière-plan
ici sur les accessoires. Couleur.
Eh bien, voyons à quoi cela ressemble, si nous l'enregistrons et que nous attendons que cela se
recharge, cela n'a pas l'air trop mauvais mais
c'est trop petit, il devrait remplir tout l'élément de la grille et pas seulement la ligne avec le texte là-dedans.
Donc, pour améliorer cela, je vais avoir ce style en ligne ici, mais je vais le fusionner dans un objet environnant avec une
autre configuration de style que j'ai configurée dans la feuille de style et je nommerai ce conteneur, vous pouvez le nommer
comme vous voulez voulez,
conteneur de styles, retirez également toutes les paires
clé-valeur afin que nous fusionnions ces styles ici et maintenant, le conteneur est un objet de feuille de style que
nous pouvons ajouter là-bas et ici, nous pouvons définir flex one pour nous assurer que chaque élément
remplit tout l'espace qu'il obtient et maintenant cela semble beaucoup mieux.
Maintenant, je ne suis toujours pas satisfait
à 100%, je veux ajouter un petit rayon de bordure ici, disons de 10 pour avoir des coins
arrondis et bien sûr, vous pouvez configurer le style que
vous voulez ici, vous préférez, je définira également une couleur d'ombre noire et une opacité d'ombre de. 26 et un décalage d'ombre de largeur 0, hauteur 2 et un rayon d'ombre de 10 et
une élévation de 3, élévation pour Android si vous vous souvenez parce que ces propriétés d'ombre n'affectent que iOS, de sorte que
nous obtenons un peu de cette carte en trois dimensions regardez et bien
sûr comme je l'ai mentionné, vous pouvez styler cela de la manière que vous voulez.
Maintenant, en plus, je veux m'assurer que ce texte ici se trouve dans le coin inférieur droit et qu'il
y a un
peu de rembourrage bien sûr, un peu d'espacement autour. Je vais donc ajouter un peu de remplissage ici, disons
de 10 et maintenant définir le contenu à flex-end, la direction de flexion dans le conteneur est bien sûr de haut en bas parce que c'est la
colonne, donc flex end le déplacera vers le en bas ici et maintenant pour le déplacer également vers la droite
sur l'axe horizontal, je mets également les éléments d'alignement
en flexion et cela déplace cela à la fin de l'axe transversal qui est de gauche à droite dans une
vue normale où vous ne l'avez pas fait changer la direction du flex. Avec cela, nous obtenons ce look que je dirais est
meilleur mais bien sûr, le texte ici, le style du texte pourrait également changer et un peu plus de
rembourrage pourrait sembler
bon, peut-être 15 mais bien sûr, nous pouvons l'expérimenter et aussi une note latérale importante, dans cette
application, je ne vais pas me concentrer sur la création d'une expérience
totalement réactive ici, je vais essayer de rester courte et concise car l'objectif principal de ce module est bien
sûr la navigation, donc je n'optimiserai pas cela pour tous les écrans et plates-formes possibles.
C'est quelque chose que vous pouvez bien sûr faire en
tant que pratique, je n'adhérerai pas pour ne pas gonfler inutilement ce module, donc je vais simplement configurer un style qui
semble bon sur ces émulateurs.
Cela étant dit, un peu plus de rembourrage pourrait avoir un sens et je veux également
styliser le titre ici, donc je vais ajouter
disons le style
de titre ici, mis en place
dans la feuille de style, ajoutons-le ici et là, je veux utiliser ma famille de polices, open
sans bold que je peux utiliser bien sûr car je l'enregistre ici dans l'application. js, donc open sans bold est ajouté maintenant ici et peut-être aussi changer un peu la taille
de la police à 22. Nous économisons cela,
cela semble assez décent.
Maintenant, il y a une dernière chose que je
veux faire sur la mosaïque de ma catégorie, sur le texte ici, je vais définir le nombre de lignes à 2 afin que tout texte qui serait plus long
que cela soit en fait juste coupé, ce qui, à mon avis, semble un peu mieux. Et enfin, vous remarquerez peut-être que sur Android pour
la lumière et la beauté, c'est à gauche ici car il est divisé en
deux lignes, pour vous assurer que c'est également à droite, sur
le titre ici, je vais définir le texte s'aligne à droite pour forcer cela à être à droite.
Attendons donc que cela se recharge et
maintenant c'est comme ça que ça devrait se passer.
Maintenant, ce n'est pas trop mal
ici, vous remarquerez peut-être que l'effet semble un peu étrange si je tape un élément ici, nous
obtenons cette étrange bordure supplémentaire autour de lui.
Maintenant, je ferai encore une chose qui est totalement facultative, mais je vais l'ajouter ici, je vais ajouter l'API de la
plate-forme et ajouter également des commentaires natifs tactiles pour utiliser réellement l'effet d'entraînement au lieu de l'opacité tactile si elle est
prise en charge.
Donc ici, je vais avoir mon composant tactile qui est par défaut
l'opacité tactile mais si la plate-forme. os est égal à Android et comme vous l'avez appris plus tôt dans le cours, la version
est supérieure ou égale à 21, alors nous savons que la rétroaction native tactile est prise en
charge, alors je définirai un composant tactile égal à la rétroaction native tactile, comme ceci.
Utilisez le composant tactile ici au lieu de l'opacité tactile et
avec cela, nous devrions avoir un bel
effet d'entraînement sur Android, sur
iOS nous avons l'effet d'opacité que nous voulons et sur Android, nous
avons maintenant un effet d'entraînement mais le style est maintenant désactivé.
C'est cependant quelque chose que nous pouvons résoudre en ajoutant une vue supplémentaire autour de cela qui reçoit notre style d'éléments
de grille au lieu du composant tactile ici et avec cela,
nous avons juste besoin d'ajouter une propriété de style supplémentaire sur le composant tactile et de définir flex
one.
Je le fais avec un style en ligne
ici rapide et sale, vous pouvez ajouter un style distinct dans la feuille de style. Avec cela, il ressemble et se sent la
même sur
iOS et maintenant aussi sur Android, l'effet d'entraînement est là.
Maintenant, il n'utilise pas nos coins arrondis, au lieu de cela, il rend un carré ou un rectangle et vous avez également appris plus
tôt comment résoudre ce problème. Pour résoudre ce problème, tout
ce que nous avons à faire est sur l'élément de grille, nous ajoutons le rayon
de bordure de 10, puis nous ajoutons réellement le débordement caché pour nous assurer que les éléments enfants ne peuvent pas être rendus
en dehors de
cette vue d'habillage, ce qui signifie que l'ondulation l'effet ne peut pas sortir de cette boîte arrondie.
Maintenant, nous avons ce look et c'est le seul ajustement que je veux faire ici pour différentes plates-formes
et avec cela, cela ne semble pas trop mal, je dirais.
Maintenant, bien sûr, vous pouvez modifier l'apparence de cela, vous pouvez modifier la taille de la police et ainsi de suite, faire en sorte
que cela soit vraiment bon sur vos appareils que vous testez.
Je suis content de ce look et maintenant il est vraiment temps de rendre également quelques recettes lorsque
nous sélectionnons une catégorie ici.