1 00:00:02,250 --> 00:00:07,290 Maintenant que nous avons les bases de la navigation, que nous sommes en mesure de 2 00:00:07,350 --> 00:00:14,200 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 3 00:00:14,190 --> 00:00:18,450 belle et concentrons-nous sur ces éléments de catégorie ici dans la grille. 4 00:00:18,450 --> 00:00:21,210 Nous pouvons les exploiter, mais ce n'est 5 00:00:21,210 --> 00:00:27,200 évidemment pas une application que vous souhaitez utiliser. Maintenant, pour rendre cela plus utilisable dans l'écran des 6 00:00:27,240 --> 00:00:30,400 catégories ici, je vais en fait saisir cet élément ici, 7 00:00:30,490 --> 00:00:36,030 cette opacité tactile, donc cet élément de la grille et l'externaliser dans un composant séparé, pas quelque chose 8 00:00:36,030 --> 00:00:43,210 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. 9 00:00:43,260 --> 00:00:49,890 Pour cela, dans le dossier des composants, je vais ajouter un CategoryGridTile. fichier js, le nom est bien sûr entièrement 10 00:00:49,890 --> 00:00:56,400 à vous et là-dedans, nous devons importer React à partir de React, nous aurons certainement besoin de quelques 11 00:00:56,400 --> 00:01:03,990 trucs de React Native pour construire un composant là-dedans, à savoir nous aurons besoin d'une opacité tactile de bien sûr, nous aurons 12 00:01:04,020 --> 00:01:11,550 besoin de la vue, nous aurons besoin de texte et nous aurons besoin d'une feuille de style pour que nous puissions également 13 00:01:11,550 --> 00:01:14,900 styliser ceci ici et maintenant nous pouvons créer le composant 14 00:01:14,940 --> 00:01:22,980 de tuile de grille de catégorie ici qui reçoit quelques accessoires. Nous aurons besoin d'une feuille de style ici que 15 00:01:22,980 --> 00:01:31,110 je vais stocker dans les styles constants et bien sûr comme toujours, nous pouvons ensuite exporter le 16 00:01:31,110 --> 00:01:39,810 composant et l'intérieur de cette fonction de composant, je vais retourner le code jsx que je viens de couper 17 00:01:39,810 --> 00:01:46,810 de l'écran des catégories ici . Donc, ici, l'opacité tactile configurée, cet élément de grille est configuré, 18 00:01:46,810 --> 00:01:52,560 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 19 00:01:52,560 --> 00:01:58,530 ici et le passer dans notre mosaïque, puis le fusionner là-bas comme vous l'avez appris, mais je vais 20 00:01:58,530 --> 00:02:03,510 simplement configurer tout le style dans le composant lui-même, car nous n'utiliserons que la mosaïque 21 00:02:03,540 --> 00:02:09,810 de catégorie dans le grille sur l'écran des catégories. Je vais donc ajouter le style d'élément de grille ici 22 00:02:09,870 --> 00:02:10,830 à la feuille 23 00:02:10,860 --> 00:02:17,280 de style dans ce fichier, donc cela fonctionne à nouveau, le gestionnaire onPress ne fonctionnera pas encore, nous le corrigerons bientôt et maintenant 24 00:02:17,280 --> 00:02:24,720 nous pouvons revenir à l'écran des catégories et bien sûr, importer notre composant. Importez donc le composant de tuile de grille 25 00:02:24,750 --> 00:02:28,250 de catégorie à partir du dossier 26 00:02:28,290 --> 00:02:37,080 des composants et là, tuile de grille de catégorie et retournez-le simplement ici lorsque nous rendrons un nouvel élément. 27 00:02:37,080 --> 00:02:38,990 Maintenant, bien sûr, comme cela 28 00:02:39,000 --> 00:02:45,300 ne fonctionnera pas, nous devons transférer certaines données dans la tuile de la grille pour qu'elles fonctionnent correctement là-bas et 29 00:02:45,300 --> 00:02:53,880 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 30 00:02:53,880 --> 00:03:01,140 qui est le titre, donc c'est itemData. article. titre et c'est maintenant un accessoire 31 00:03:01,140 --> 00:03:08,910 que nous pouvons utiliser dans la tuile de grille de catégorie et je veux également passer dans un autre accessoire qui 32 00:03:08,940 --> 00:03:18,240 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, 33 00:03:18,240 --> 00:03:26,700 je veux juste exécuter le code que j'exécute actuellement dans onPress. Je vais donc couper ceci à partir de la tuile de 34 00:03:26,700 --> 00:03:33,000 grille de catégorie, le déplacer vers l'écran des catégories, dans cette fonction que je passe à onSelect et maintenant 35 00:03:33,000 --> 00:03:38,700 tout ce que nous avons à faire est de déclencher onSelect depuis l'intérieur de la tuile de 36 00:03:38,730 --> 00:03:48,110 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 37 00:03:48,320 --> 00:03:52,390 sur les accessoires onSelect pour déclencher la fonction transmise dans l'accessoire onSelect. 38 00:03:52,550 --> 00:03:57,370 Maintenant, le titre que je produis ici ne peut être que des accessoires. titre parce que nous obtenons 39 00:03:57,380 --> 00:04:03,380 cet accessoire de titre comme accessoire sur notre grille de catégorie, nous le transmettons ici. 40 00:04:05,100 --> 00:04:11,460 Avec cela, nous avons divisé un peu notre composant mais bien sûr maintenant je veux aussi 41 00:04:11,460 --> 00:04:17,130 travailler un peu plus sur le style. Donc, de retour dans la tuile de grille de catégorie, 42 00:04:17,130 --> 00:04:21,580 je veux par exemple utiliser la couleur que je configure parce que chaque catégorie obtient une couleur 43 00:04:21,660 --> 00:04:28,620 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 44 00:04:28,620 --> 00:04:34,070 pouvez bien sûr nommer cet accessoire comme vous le souhaitez sur l'article. propriété de couleur 45 00:04:34,200 --> 00:04:40,950 et ici, ça doit être. couleur parce que nous avons nommé la couleur de la propriété ici dans le modèle et 46 00:04:40,950 --> 00:04:44,360 maintenant dans un carreau de grille de catégorie, nous pouvons utiliser cette couleur pour le styliser ici. 47 00:04:44,460 --> 00:04:50,760 Alors, comment styliser cela, à quoi cela devrait-il ressembler? En ajoutant un style à la vue que nous avons 48 00:04:50,760 --> 00:04:56,460 à l'intérieur de l'opacité tactile car le composant d'opacité tactile lui-même est invisible mais la vue ne 49 00:04:56,460 --> 00:05:01,250 l'est pas et là, nous pouvons passer un objet et définir la couleur d'arrière-plan 50 00:05:01,260 --> 00:05:04,620 ici sur les accessoires. Couleur. 51 00:05:04,740 --> 00:05:08,860 Eh bien, voyons à quoi cela ressemble, si nous l'enregistrons et que nous attendons que cela se 52 00:05:08,950 --> 00:05:11,080 recharge, cela n'a pas l'air trop mauvais mais 53 00:05:11,110 --> 00:05:15,970 c'est trop petit, il devrait remplir tout l'élément de la grille et pas seulement la ligne avec le texte là-dedans. 54 00:05:16,180 --> 00:05:25,210 Donc, pour améliorer cela, je vais avoir ce style en ligne ici, mais je vais le fusionner dans un objet environnant avec une 55 00:05:25,210 --> 00:05:33,770 autre configuration de style que j'ai configurée dans la feuille de style et je nommerai ce conteneur, vous pouvez le nommer 56 00:05:33,790 --> 00:05:35,610 comme vous voulez voulez, 57 00:05:35,680 --> 00:05:39,270 conteneur de styles, retirez également toutes les paires 58 00:05:39,620 --> 00:05:47,450 clé-valeur afin que nous fusionnions ces styles ici et maintenant, le conteneur est un objet de feuille de style que 59 00:05:47,540 --> 00:05:54,530 nous pouvons ajouter là-bas et ici, nous pouvons définir flex one pour nous assurer que chaque élément 60 00:05:54,530 --> 00:05:58,880 remplit tout l'espace qu'il obtient et maintenant cela semble beaucoup mieux. 61 00:05:59,030 --> 00:06:02,330 Maintenant, je ne suis toujours pas satisfait 62 00:06:03,080 --> 00:06:10,080 à 100%, je veux ajouter un petit rayon de bordure ici, disons de 10 pour avoir des coins 63 00:06:10,400 --> 00:06:14,310 arrondis et bien sûr, vous pouvez configurer le style que 64 00:06:14,570 --> 00:06:28,320 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 65 00:06:28,380 --> 00:06:37,010 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 66 00:06:37,020 --> 00:06:42,720 nous obtenons un peu de cette carte en trois dimensions regardez et bien 67 00:06:42,810 --> 00:06:48,680 sûr comme je l'ai mentionné, vous pouvez styler cela de la manière que vous voulez. 68 00:06:48,690 --> 00:06:54,240 Maintenant, en plus, je veux m'assurer que ce texte ici se trouve dans le coin inférieur droit et qu'il 69 00:06:54,240 --> 00:06:55,380 y a un 70 00:06:55,380 --> 00:07:00,960 peu de rembourrage bien sûr, un peu d'espacement autour. Je vais donc ajouter un peu de remplissage ici, disons 71 00:07:01,140 --> 00:07:08,730 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 72 00:07:08,730 --> 00:07:14,340 colonne, donc flex end le déplacera vers le en bas ici et maintenant pour le déplacer également vers la droite 73 00:07:14,340 --> 00:07:17,100 sur l'axe horizontal, je mets également les éléments d'alignement 74 00:07:17,220 --> 00:07:22,770 en flexion et cela déplace cela à la fin de l'axe transversal qui est de gauche à droite dans une 75 00:07:22,800 --> 00:07:29,900 vue normale où vous ne l'avez pas fait changer la direction du flex. Avec cela, nous obtenons ce look que je dirais est 76 00:07:29,930 --> 00:07:36,230 meilleur mais bien sûr, le texte ici, le style du texte pourrait également changer et un peu plus de 77 00:07:36,230 --> 00:07:37,430 rembourrage pourrait sembler 78 00:07:37,430 --> 00:07:43,100 bon, peut-être 15 mais bien sûr, nous pouvons l'expérimenter et aussi une note latérale importante, dans cette 79 00:07:43,100 --> 00:07:47,330 application, je ne vais pas me concentrer sur la création d'une expérience 80 00:07:47,330 --> 00:07:53,450 totalement réactive ici, je vais essayer de rester courte et concise car l'objectif principal de ce module est bien 81 00:07:53,690 --> 00:07:58,720 sûr la navigation, donc je n'optimiserai pas cela pour tous les écrans et plates-formes possibles. 82 00:07:58,720 --> 00:08:01,200 C'est quelque chose que vous pouvez bien sûr faire en 83 00:08:01,250 --> 00:08:06,860 tant que pratique, je n'adhérerai pas pour ne pas gonfler inutilement ce module, donc je vais simplement configurer un style qui 84 00:08:06,860 --> 00:08:08,450 semble bon sur ces émulateurs. 85 00:08:08,450 --> 00:08:14,520 Cela étant dit, un peu plus de rembourrage pourrait avoir un sens et je veux également 86 00:08:14,720 --> 00:08:17,740 styliser le titre ici, donc je vais ajouter 87 00:08:17,810 --> 00:08:19,330 disons le style 88 00:08:19,430 --> 00:08:22,040 de titre ici, mis en place 89 00:08:22,040 --> 00:08:28,670 dans la feuille de style, ajoutons-le ici et là, je veux utiliser ma famille de polices, open 90 00:08:28,670 --> 00:08:39,110 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 91 00:08:39,110 --> 00:08:42,870 de la police à 22. Nous économisons cela, 92 00:08:42,880 --> 00:08:45,340 cela semble assez décent. 93 00:08:45,470 --> 00:08:48,560 Maintenant, il y a une dernière chose que je 94 00:08:49,750 --> 00:08:58,330 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 95 00:08:58,330 --> 00:09:07,800 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 96 00:09:07,870 --> 00:09:14,560 la lumière et la beauté, c'est à gauche ici car il est divisé en 97 00:09:14,560 --> 00:09:19,670 deux lignes, pour vous assurer que c'est également à droite, sur 98 00:09:19,720 --> 00:09:27,900 le titre ici, je vais définir le texte s'aligne à droite pour forcer cela à être à droite. 99 00:09:28,000 --> 00:09:30,420 Attendons donc que cela se recharge et 100 00:09:33,070 --> 00:09:35,720 maintenant c'est comme ça que ça devrait se passer. 101 00:09:35,720 --> 00:09:38,020 Maintenant, ce n'est pas trop mal 102 00:09:38,060 --> 00:09:43,850 ici, vous remarquerez peut-être que l'effet semble un peu étrange si je tape un élément ici, nous 103 00:09:43,850 --> 00:09:46,520 obtenons cette étrange bordure supplémentaire autour de lui. 104 00:09:46,550 --> 00:09:53,750 Maintenant, je ferai encore une chose qui est totalement facultative, mais je vais l'ajouter ici, je vais ajouter l'API de la 105 00:09:53,750 --> 00:10:00,710 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 106 00:10:00,710 --> 00:10:02,090 prise en charge. 107 00:10:02,090 --> 00:10:11,600 Donc ici, je vais avoir mon composant tactile qui est par défaut 108 00:10:11,790 --> 00:10:21,510 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 109 00:10:21,510 --> 00:10:26,340 est supérieure ou égale à 21, alors nous savons que la rétroaction native tactile est prise en 110 00:10:26,340 --> 00:10:31,100 charge, alors je définirai un composant tactile égal à la rétroaction native tactile, comme ceci. 111 00:10:31,290 --> 00:10:35,820 Utilisez le composant tactile ici au lieu de l'opacité tactile et 112 00:10:35,820 --> 00:10:38,730 avec cela, nous devrions avoir un bel 113 00:10:38,730 --> 00:10:41,000 effet d'entraînement sur Android, sur 114 00:10:41,130 --> 00:10:46,070 iOS nous avons l'effet d'opacité que nous voulons et sur Android, nous 115 00:10:46,080 --> 00:10:50,520 avons maintenant un effet d'entraînement mais le style est maintenant désactivé. 116 00:10:50,550 --> 00:10:57,830 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 117 00:10:57,840 --> 00:11:01,840 de grille au lieu du composant tactile ici et avec cela, 118 00:11:02,010 --> 00:11:08,220 nous avons juste besoin d'ajouter une propriété de style supplémentaire sur le composant tactile et de définir flex 119 00:11:08,220 --> 00:11:08,700 one. 120 00:11:08,730 --> 00:11:10,430 Je le fais avec un style en ligne 121 00:11:10,440 --> 00:11:16,770 ici rapide et sale, vous pouvez ajouter un style distinct dans la feuille de style. Avec cela, il ressemble et se sent la 122 00:11:16,800 --> 00:11:17,800 même sur 123 00:11:17,910 --> 00:11:21,370 iOS et maintenant aussi sur Android, l'effet d'entraînement est là. 124 00:11:21,370 --> 00:11:27,870 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 125 00:11:28,080 --> 00:11:31,100 tôt comment résoudre ce problème. Pour résoudre ce problème, tout 126 00:11:31,110 --> 00:11:35,820 ce que nous avons à faire est sur l'élément de grille, nous ajoutons le rayon 127 00:11:35,910 --> 00:11:42,930 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 128 00:11:42,930 --> 00:11:43,950 en dehors de 129 00:11:43,950 --> 00:11:49,010 cette vue d'habillage, ce qui signifie que l'ondulation l'effet ne peut pas sortir de cette boîte arrondie. 130 00:11:49,020 --> 00:11:54,540 Maintenant, nous avons ce look et c'est le seul ajustement que je veux faire ici pour différentes plates-formes 131 00:11:54,540 --> 00:11:58,050 et avec cela, cela ne semble pas trop mal, je dirais. 132 00:11:58,050 --> 00:12:04,110 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 133 00:12:04,110 --> 00:12:07,080 que cela soit vraiment bon sur vos appareils que vous testez. 134 00:12:07,080 --> 00:12:11,940 Je suis content de ce look et maintenant il est vraiment temps de rendre également quelques recettes lorsque 135 00:12:11,970 --> 00:12:13,470 nous sélectionnons une catégorie ici.