1 00:00:02,250 --> 00:00:07,590 Ajouter un bouton à l'en-tête comme je le veux ici, un tel bouton de navigation, nécessite un peu 2 00:00:07,590 --> 00:00:11,670 de travail supplémentaire au départ, mais par la suite, c'est très simple. 3 00:00:11,700 --> 00:00:17,160 Nous devons tout d'abord installer un package supplémentaire pour vous faciliter la tâche car théoriquement, vous avez 4 00:00:17,160 --> 00:00:18,540 ici beaucoup de puissance. 5 00:00:18,660 --> 00:00:21,690 Vous pouvez ajouter de tels boutons à l'aide des options de 6 00:00:21,690 --> 00:00:27,450 navigation, donc ici sur le MealDetailScreen, à côté de la définition d'un titre d'en-tête, vous pouvez définir headerLeft et headerRight pour 7 00:00:27,450 --> 00:00:30,330 ajouter des boutons à gauche et à droite du titre. 8 00:00:30,330 --> 00:00:36,330 En règle générale, vous souhaitez utiliser la droite, car la gauche est réservée au bouton Précédent et, 9 00:00:36,330 --> 00:00:39,310 généralement, vous pouvez simplement y retourner un 10 00:00:39,450 --> 00:00:47,220 élément jsx, vous pouvez donc simplement le mettre en texte, comme favori, c'est quelque chose que vous pouvez faire ici et me 11 00:00:47,220 --> 00:00:51,870 laisser réellement affichez-le et redémarrez donc le serveur avant d'utiliser un package, 12 00:00:51,870 --> 00:00:58,890 car si vous pouvez simplement ajouter un composant ici, obtenir le bon style, le bon positionnement pour toutes les différentes 13 00:00:58,950 --> 00:01:05,430 plates-formes, surtout si vous n'utilisez pas seulement du texte ici, mais aussi peut-être une icône que vous voulez 14 00:01:05,430 --> 00:01:11,160 généralement avoir là-bas, qui peut être vraiment encombrante et c'est pourquoi nous installerons un package supplémentaire 15 00:01:11,160 --> 00:01:14,810 qui rend cette façon plus facile qu'elle ne l'est autrement. 16 00:01:18,260 --> 00:01:25,510 Alors permettez-moi de redémarrer cela avec npm start, pas npm install, npm start et avec le fonctionnement 17 00:01:25,850 --> 00:01:34,320 à nouveau, rechargeons ceci ici sur iOS et laissez-moi vous montrer ce que nous avons ici maintenant que je rend un texte. 18 00:01:34,520 --> 00:01:35,930 Vous voyez ce texte ici, 19 00:01:35,960 --> 00:01:37,180 donc cela devient 20 00:01:37,190 --> 00:01:43,010 rendu mais comme je l'ai dit, avoir le bon rembourrage, le bon alignement, le bon style, la bonne taille, super ennuyeux 21 00:01:43,010 --> 00:01:47,870 si vous le faites tout seul parce que vous ne faites pas seulement ceci pour un appareil 22 00:01:47,870 --> 00:01:49,300 mais pour de nombreux appareils. 23 00:01:49,370 --> 00:01:54,320 C'est pourquoi nous allons installer un package spécial ici qui nous aide à cela. 24 00:01:54,320 --> 00:02:01,250 Donc, quittez le processus pour l'instant, le processus de développement en cours et utilisez 25 00:02:01,250 --> 00:02:10,130 npm install --save et installez le package react-navigation-header-buttons qui est un package qui vous aide, étonnamment si vous regardez 26 00:02:10,310 --> 00:02:16,220 le nom, avec la configuration quelques boutons dans votre en-tête, donc dans 27 00:02:16,280 --> 00:02:24,850 cette barre d'outils supérieure ici. Il s'agit d'un package qui facilitera ensuite l'ajout de tels boutons. Avec cela ajouté, je redémarrerai mon serveur de 28 00:02:24,850 --> 00:02:30,490 développement avec npm start et maintenant je créerai moi-même un nouveau composant d'aide dans le dossier des composants que 29 00:02:30,490 --> 00:02:37,290 je nommerai helper, un bouton d'en-tête, pas helper, un bouton d'en-tête. Là, je vais importer React à 30 00:02:37,300 --> 00:02:44,210 partir de React parce que ce sera un composant React normal que nous 31 00:02:44,570 --> 00:02:51,980 créerons ici et importera quelque chose de ce nouveau package react-navigation-header-buttons que nous venons d'installer 32 00:02:51,980 --> 00:03:02,650 et que quelque chose que j'importe est un bouton d'en-tête. En plus de cela, importons également quelque chose de @ expo / vector-icons qui devrait être 33 00:03:02,680 --> 00:03:08,830 disponible mais juste pour être super sûr, vous pouvez certainement aussi exécuter npm install --save @ expo / 34 00:03:08,830 --> 00:03:16,270 vector-icons pour installer ce paquet aussi parce que vous '' Nous en aurons besoin et la chose que nous devons importer à 35 00:03:19,050 --> 00:03:24,630 partir de ce paquet est les ionicons. Bien sûr, vous pouvez utiliser n'importe quel jeu d'icônes que 36 00:03:24,630 --> 00:03:30,270 vous voulez, j'ai couvert les icônes plus tôt dans ce cours et vous êtes libre d'utiliser n'importe quelle icône que vous voulez 37 00:03:30,270 --> 00:03:35,250 dans votre bouton d'en-tête, je vais juste travailler avec des ionicons parce que je les utilise dans le reste 38 00:03:35,460 --> 00:03:40,440 de ce cours aussi mais encore une fois, vous pouvez utiliser toutes les icônes que vous voulez et bien 39 00:03:40,440 --> 00:03:45,900 sûr dans l'en-tête, vous n'avez pas besoin d'utiliser des icônes, vous pouvez également utiliser d'autres textes mais généralement, vous utilisez des icônes 40 00:03:45,900 --> 00:03:49,470 bien sûr, c'est ce que les utilisateurs sont généralement utilisés à partir d'autres applications. 41 00:03:49,740 --> 00:03:58,040 De plus, je vais également importer des couleurs à partir de constantes / Couleurs et maintenant créer mon composant ici et c'est, disons, un bouton 42 00:03:58,070 --> 00:04:04,850 d'en-tête personnalisé ou simplement un bouton d'en-tête, quel que soit le nom que vous voulez, mais nous l'importons déjà, nous 43 00:04:05,030 --> 00:04:09,290 devez choisir un nom différent ici pour ne pas avoir de conflit de 44 00:04:09,650 --> 00:04:17,390 noms et cela recevra des accessoires et renverra le bouton d'en-tête que nous obtenons de ce paquet que nous avons installé, mais nous 45 00:04:17,390 --> 00:04:22,280 ajouterons bientôt une configuration supplémentaire, c'est pourquoi je suis en l'enveloppant dans un composant 46 00:04:22,280 --> 00:04:27,800 séparé afin que nous n'ayons pas à répéter cette configuration pour chaque bouton que nous utilisons 47 00:04:27,800 --> 00:04:28,990 n'importe où dans 48 00:04:29,140 --> 00:04:33,250 l'application, puis bien sûr, j'exporterai mon bouton d'en-tête personnalisé par défaut. 49 00:04:33,340 --> 00:04:39,850 Alors maintenant, ce bouton d'en-tête que j'utilise ici à partir de ce paquet que nous avons installé, qui recevra tout d'abord tous 50 00:04:39,850 --> 00:04:45,790 les accessoires que nous obtenons avec cette belle petite astuce que nous pouvons utiliser dans React où nous transmettons 51 00:04:45,790 --> 00:04:51,700 tous les accessoires avec ce raccourci en retirant tous les paires clé-valeur et en les passant à cet objet 52 00:04:51,700 --> 00:04:53,060 qu'est finalement ce composant. 53 00:04:53,110 --> 00:04:56,790 C'est donc la première chose, nous devons transmettre tous les accessoires et c'est 54 00:04:56,800 --> 00:04:57,670 super important, 55 00:04:57,670 --> 00:05:00,470 n'oubliez pas cela sinon cela ne fonctionnera pas correctement. 56 00:05:00,490 --> 00:05:07,540 La deuxième étape est que nous ajoutons le composant Icon prop avec un I majuscule, c'est un accessoire que le bouton d'en-tête que nous obtenons 57 00:05:07,540 --> 00:05:13,580 de ce paquet attend et là je passe des ionicons. Donc, cela attend un package d'icônes 58 00:05:13,580 --> 00:05:20,730 vectorielles qui peut être utilisé pour le rendu des icônes, ne doit pas être des ionicons mais doit 59 00:05:20,730 --> 00:05:27,800 provenir soit de @ expo / vector-icons, soit du package d'icônes vectorielles React Native sous-jacent sur lequel 60 00:05:27,800 --> 00:05:34,850 le package expo est basé. et vous pouvez également analyser une taille d'icône et je normaliserai cela 61 00:05:34,850 --> 00:05:40,370 de sorte que tous mes boutons d'en-tête dans l'ensemble de l'application aient la 62 00:05:40,370 --> 00:05:48,470 même taille de 23 que j'ai trouvé fonctionner assez bien. Enfin, je définirai également une couleur ici et j'utiliserai 63 00:05:49,160 --> 00:05:59,360 ma couleur principale, bien que nous devions bien sûr nous différencier par plate-forme. Je vais donc également importer la plate-forme à partir de React Native 64 00:05:59,390 --> 00:06:06,210 car sur Android, notre en-tête aura la couleur principale comme arrière-plan, donc là, nous voulons utiliser une 65 00:06:06,210 --> 00:06:08,000 couleur d'icône de blanc. 66 00:06:08,150 --> 00:06:15,320 Alors là, je vais vérifier la plateforme. os, si c'est égal à Android, alors je veux utiliser du blanc ici et 67 00:06:15,360 --> 00:06:18,350 seulement si c'est iOS, je veux utiliser la couleur primaire. 68 00:06:18,470 --> 00:06:21,020 Alors maintenant, nous avons ce bouton d'en-tête préconfiguré, 69 00:06:21,020 --> 00:06:26,840 maintenant nous pouvons l'utiliser à l'endroit, dans le composant où nous voulons l'ajouter à notre en-tête et c'est 70 00:06:26,840 --> 00:06:31,030 le MealDetailScreen dans ce cas. Là, nous devons maintenant importer quelque 71 00:06:31,120 --> 00:06:34,520 chose d'autre à partir du package nouvellement installé, donc à partir 72 00:06:34,720 --> 00:06:41,140 de react-navigation-header-buttons, à partir de ce package, ici nous devons installer ou importer des boutons d'en-tête, donc pas le bouton d'en-tête 73 00:06:41,140 --> 00:06:47,710 que nous utilisons dans l'autre fichier mais boutons d'en-tête, pluriel. Nous ajoutons ceci ici parce que maintenant 74 00:06:47,770 --> 00:06:53,650 là-bas où nous configurons les options de navigation pour ce composant, au lieu d'utiliser notre composant 75 00:06:53,650 --> 00:06:58,200 texte là-bas, je veux utiliser des boutons d'en-tête, ce composant, j'ai simplement 76 00:06:58,250 --> 00:07:04,940 ajouté l'importation pour et enrouler cela autour d'un autre élément que nous avons à importer à partir des 77 00:07:04,960 --> 00:07:11,940 boutons d'en-tête de navigation de réaction et c'est l'élément. L'élément est un autre composant que nous importons 78 00:07:12,090 --> 00:07:16,710 que nous pouvons maintenant utiliser entre les balises d'ouverture et de 79 00:07:16,710 --> 00:07:26,600 fermeture des boutons d'en-tête, donc ici nous ajoutons l'élément et l'élément est un composant à fermeture automatique où nous décrivons l'icône que nous 80 00:07:26,600 --> 00:07:31,970 voulons rendre à la fin. Nous pouvons également donner à ce titre un titre qui 81 00:07:32,000 --> 00:07:35,170 serait rendu en tant que solution de rechange et je nommerai ce favori, 82 00:07:35,180 --> 00:07:37,670 mais nous ne le verrons normalement pas, à la place 83 00:07:37,670 --> 00:07:46,280 ici, je peux également définir un nom d'icône et maintenant cela devrait être, par exemple ios- étoile qui est une icône d'ionicons valide et vous pouvez rechercher dans la liste @ expo / vector-icons 84 00:07:46,280 --> 00:07:51,440 que je vous ai montrée plus tôt dans le cours que vous trouverez également jointe à cette vidéo pour les 85 00:07:51,440 --> 00:07:53,570 icônes possibles que vous pouvez utiliser ici. 86 00:07:53,570 --> 00:07:59,540 Assurez-vous simplement que vous utilisez une icône du jeu d'icônes que vous avez utilisé dans vos boutons d'en-tête, 87 00:07:59,540 --> 00:08:01,990 donc dans mon cas, des ionicons. 88 00:08:02,000 --> 00:08:03,830 Maintenant, cela indique quelle icône 89 00:08:03,830 --> 00:08:09,680 utiliser, maintenant ici, nous pouvons également ajouter onPress pour enregistrer une fonction qui devrait être déclenchée lorsque cette icône 90 00:08:09,680 --> 00:08:12,570 est pressée ou lorsque cet élément dans l'en-tête est pressé 91 00:08:12,650 --> 00:08:19,220 et pour l'instant je dirai simplement marquer comme favori ici, connectez-le dans la console afin que nous voyions que cela a fonctionné. 92 00:08:19,220 --> 00:08:22,720 Nous n'en sommes pas encore là car nous n'utilisons pas notre 93 00:08:22,730 --> 00:08:25,870 bouton d'en-tête personnalisé, c'est la dernière pièce manquante. 94 00:08:26,000 --> 00:08:28,370 Nous devons importer ce composant que 95 00:08:28,430 --> 00:08:35,120 nous avons créé, donc importez le bouton d'en-tête à partir des composants, puis là, à partir du bouton d'en-tête, c'est le 96 00:08:35,120 --> 00:08:42,740 bouton sur lequel nous avons travaillé et nous le transmettons aux boutons d'en-tête ici car cela attend un accessoire de composant de bouton d'en-tête 97 00:08:42,740 --> 00:08:47,870 où nous pointons le composant qui devrait être utilisé pour rendre cet élément à la fin. 98 00:08:47,870 --> 00:08:52,220 Maintenant, tout cela est très complexe, comme vous pouvez le voir, beaucoup de composants imbriqués, c'est juste 99 00:08:52,220 --> 00:08:57,500 une configuration qui est un peu lourde la première fois que vous le faites, mais lorsque vous l'utilisez ensuite dans d'autres 100 00:08:57,500 --> 00:09:01,790 composants, il s'agit vraiment de copier la même configuration ici, en changeant le titre, en changeant l'icône 101 00:09:01,790 --> 00:09:05,860 et en changeant la logique et vous y êtes, donc c'est tout ce que vous 102 00:09:05,870 --> 00:09:07,970 avez à faire à l'avenir, c'est juste 103 00:09:08,000 --> 00:09:12,740 la configuration initiale qui est un travail supplémentaire ici. Avec toute cette configuration cependant, si 104 00:09:12,740 --> 00:09:14,540 nous enregistrons maintenant 105 00:09:19,710 --> 00:09:25,770 cela, nous devrions pouvoir voir notre étoile ici. Ceci est l'icône que nous voyons et nous pouvons appuyer 106 00:09:25,770 --> 00:09:35,290 dessus et comme j'appuie dessus, vous verrez que la marque préférée est connectée ici dans la console. Voyons également que sur Android, nous avons toujours l'étoile et 107 00:09:35,300 --> 00:09:40,150 si j'appuie sur cette étoile ici, nous voyons également la 108 00:09:40,160 --> 00:09:47,100 marque comme favorite, donc ça marche. Une petite note latérale que je viens de voir si nous avons plusieurs recettes, nous pourrions vouloir un style 109 00:09:47,100 --> 00:09:52,470 supplémentaire, totalement indépendant du bouton d'en-tête, juste le voir. Donc, dans le MealItem. fichier js, sur l'élément de repas, je 110 00:09:52,470 --> 00:09:56,460 vais en fait ajouter une marge verticale de 10, encore une fois, ce n'est 111 00:09:56,520 --> 00:10:02,520 pas quelque chose dont vous avez besoin ici, juste là pour vous assurer que cela semble plus agréable si nous avons plusieurs 112 00:10:02,520 --> 00:10:03,050 articles. 113 00:10:03,060 --> 00:10:08,670 Ce qui est important ici, bien sûr, c'est que nous avons notre bouton d'en-tête, cette icône et c'est ainsi 114 00:10:09,180 --> 00:10:13,100 que vous pouvez ajouter des boutons ou des éléments d'icônes ici à votre en-tête 115 00:10:13,170 --> 00:10:18,570 et bien sûr, vous pouvez en ajouter plusieurs. Ici, dans l'écran de détail du repas, vous 116 00:10:18,600 --> 00:10:24,770 pouvez avoir plusieurs de ces articles entre les boutons d'en-tête ici que vous configurez sur headerRight sur les options de navigation. 117 00:10:24,850 --> 00:10:26,220 Voici comment vous ajoutez 118 00:10:26,220 --> 00:10:33,750 des éléments ici, vous pouvez en avoir plusieurs, par exemple ici, nous pourrions également avoir ios-star-contour qui est une autre icône qui semble un peu 119 00:10:33,750 --> 00:10:37,260 différente afin que nous puissions voir la différence ici, maintenant nous en 120 00:10:37,260 --> 00:10:38,630 avons deux ici . 121 00:10:38,790 --> 00:10:45,600 C'est donc possible, bien sûr, vous ne devriez pas surcharger cela pour que votre interface utilisateur reste propre et fonctionne, mais 122 00:10:46,710 --> 00:10:55,010 c'est ainsi que vous pouvez ajouter des icônes ici à votre écran. Soit dit en passant, l'avertissement que je reçois ici concernant les doubles clés, le titre 123 00:10:55,010 --> 00:10:59,910 ici est également utilisé comme clé pour vos articles, donc si vous avez plusieurs articles, vous ne 124 00:10:59,930 --> 00:11:03,350 devriez pas utiliser le même titre, mais je viens de l'ajouter 125 00:11:03,350 --> 00:11:08,640 pour à des fins de démonstration de toute façon, donc je vais simplement m'en débarrasser et nous sommes bons. 126 00:11:08,810 --> 00:11:12,290 Maintenant, notre icône étoile ne fait rien encore, c'est quelque chose que 127 00:11:12,320 --> 00:11:17,660 nous ajouterons plus tard, mais au moins nous le voyons et c'est vraiment important dans un module où nous 128 00:11:17,660 --> 00:11:20,300 parlons de navigation et de travail avec l'en-tête.