1 00:00:02,270 --> 00:00:05,450 Alors, comment pouvons-nous attribuer des icônes ici? 2 00:00:05,450 --> 00:00:09,580 Comment pouvons-nous alors également nous assurer que nous utilisons la couleur que 3 00:00:09,590 --> 00:00:10,990 nous voulons utiliser? 4 00:00:11,090 --> 00:00:12,760 Commençons par la 5 00:00:12,760 --> 00:00:17,920 couleur avant d'ajouter les icônes. Tout comme la fonction de création d'un navigateur de 6 00:00:18,020 --> 00:00:20,290 navigation dans la pile, la création d'un 7 00:00:20,290 --> 00:00:25,250 navigateur à onglet inférieur prend également un deuxième argument. Le premier argument est votre objet de configuration où 8 00:00:25,280 --> 00:00:27,370 vous configurez les différents onglets et les 9 00:00:27,410 --> 00:00:33,600 écrans vers lesquels ils pointent, le deuxième argument est également un objet où vous pouvez configurer le navigateur en général et 10 00:00:33,610 --> 00:00:35,290 là, vous avez quelques paramètres. 11 00:00:35,330 --> 00:00:40,120 Encore une fois, les documents officiels sont l'endroit où aller pour en savoir plus sur 12 00:00:40,310 --> 00:00:45,340 chaque paramètre ici, l'un des paramètres les plus importants ici sont les options de la barre d'onglets. 13 00:00:45,380 --> 00:00:52,970 Ceci est un autre objet et là-dedans, vous pouvez contrôler en détail l'apparence de la barre d'onglets, son style. 14 00:00:53,090 --> 00:00:59,180 Vous pouvez définir une couleur de teinte inactive qui est la couleur de l'onglet qui n'est actuellement pas active. 15 00:00:59,180 --> 00:01:03,160 Vous pouvez configurer une couleur de teinte active et c'est ce dont nous 16 00:01:03,170 --> 00:01:08,600 avons réellement besoin ici, vous pouvez également configurer une couleur d'arrière-plan active et une couleur d'arrière-plan inactive pour 17 00:01:08,600 --> 00:01:11,720 changer également l'arrière-plan des onglets ici si vous le 18 00:01:11,930 --> 00:01:16,540 souhaitez et donc vous avez beaucoup de possibilités pour vraiment ajuster cela à vos besoins. 19 00:01:16,660 --> 00:01:20,000 Et ici, je vais définir une couleur de teinte active parce 20 00:01:20,000 --> 00:01:25,910 que c'est tout ce dont j'ai besoin ici, mais bien sûr, n'hésitez pas à jouer avec cela et à changer également 21 00:01:25,910 --> 00:01:32,330 les couleurs d'arrière-plan et à modifier d'autres paramètres et je définirai ma couleur de teinte active à une valeur pour mes couleurs constantes 22 00:01:32,330 --> 00:01:35,390 que j'importe ici, je vais les mettre en couleur d'accentuation. 23 00:01:35,410 --> 00:01:37,300 Vous ne l'avez pas utilisé auparavant mais 24 00:01:37,370 --> 00:01:42,290 maintenant je vais l'utiliser et c'est cette couleur orange que nous avons maintenant et c'est ainsi que nous changeons 25 00:01:42,290 --> 00:01:45,900 facilement la couleur de l'onglet actif. Maintenant, c'est une chose, veuillez 26 00:01:46,110 --> 00:01:50,280 également noter que cela n'ajoute bien sûr pas d'icône et comment serait-il, nous 27 00:01:50,280 --> 00:01:51,020 ne disons 28 00:01:51,030 --> 00:01:57,300 rien à propos de l'icône que nous voulons ajouter. Maintenant, pour ajouter l'icône, le schéma simple, je 29 00:01:57,480 --> 00:02:01,860 pense que vous allez à votre configuration d'itinéraire ici, donc à la configuration 30 00:02:01,860 --> 00:02:07,710 où vous mappez les écrans à vos onglets et vous utilisez le formulaire plus long où vous 31 00:02:07,710 --> 00:02:12,000 ajoutez la propriété d'écran et où vous ajoutez également options de navigation. 32 00:02:12,000 --> 00:02:17,370 Soit dit en passant, vous pouvez également le faire directement dans le composant en ajoutant des 33 00:02:17,400 --> 00:02:19,700 options de navigation comme nous l'avons fait 34 00:02:19,710 --> 00:02:25,080 auparavant, mais comme les repas ici sont en fait un navigateur, le seul endroit où ajouter 35 00:02:25,110 --> 00:02:26,560 des options de 36 00:02:26,700 --> 00:02:31,330 navigation est bien sûr ici ou aussi ici, sur créer un navigateur de pile. 37 00:02:31,560 --> 00:02:37,290 Là, vous pouvez également configurer une clé d'options de navigation ici sur le deuxième argument, sur cet objet, 38 00:02:37,320 --> 00:02:42,390 vous passez comme deuxième argument pour créer un navigateur de pile où vous configurez le navigateur 39 00:02:42,390 --> 00:02:48,180 global pour donner à ce navigateur lui-même des options de navigation car les options de navigation que nous attribuons 40 00:02:48,180 --> 00:02:54,060 à le navigateur de repas, donc pour le navigateur de pile sont maintenant les options qui sont prises en 41 00:02:54,270 --> 00:03:00,810 compte par le navigateur d'onglets qui utilise ce navigateur de repas comme navigateur imbriqué et les options de navigation que nous 42 00:03:01,140 --> 00:03:10,680 pouvons définir ici incluent une icône de barre d'onglets. Nous pouvons ajouter une icône de barre d'onglets ici et l'icône de barre d'onglets est en fait une fonction. Ce n'est pas une seule icône 43 00:03:10,770 --> 00:03:18,900 que vous pointez mais c'est plutôt une fonction. C'est une fonction qui reçoit des informations sur les onglets que vous 44 00:03:18,990 --> 00:03:23,300 pourriez dire, devrait aller ici, c'est l'argument que nous obtenons automatiquement car cette 45 00:03:23,330 --> 00:03:28,490 fonction sera bien sûr appelée par la navigation React et l'icône de la barre d'onglets, cette 46 00:03:28,970 --> 00:03:34,340 fonction ici, doit retourner l'icône que vous voulez à rendre pour cet onglet, donc dans ce cas 47 00:03:34,340 --> 00:03:35,720 pour l'onglet repas. 48 00:03:39,680 --> 00:03:46,360 Cela signifie que je dois pouvoir utiliser des icônes ici et pour cela, nous pouvons importer des ionicons ou tout autre 49 00:03:46,370 --> 00:03:50,680 jeu d'icônes que vous souhaitez utiliser à partir de @ expo / vector-icons. 50 00:03:50,680 --> 00:03:52,440 Encore une fois, n'hésitez pas à 51 00:03:52,450 --> 00:03:57,400 installer ce paquet, normalement il devrait être installé automatiquement lorsque vous travaillez avec Expo mais vous pouvez simplement exécuter 52 00:03:57,400 --> 00:04:03,040 npm install --save @ expo / vector-icons pour être sûr que vous l'avez installé et vous pouvez utiliser n'importe quel jeu d'icônes 53 00:04:03,100 --> 00:04:07,980 vous voulez mais j'utilise toujours les ionicons tout au long de ce cours, je m'en tiendrai à eux. 54 00:04:08,230 --> 00:04:12,340 Avec cela, vous pouvez utiliser des ionicons comme composant comme vous l'avez appris plus tôt dans le cours. 55 00:04:12,340 --> 00:04:18,580 Donc ici, nous pouvons simplement retourner des ionicons comme celui-ci pour rendre une icône ionicon et vous pouvez maintenant 56 00:04:18,580 --> 00:04:20,090 utiliser n'importe quel 57 00:04:20,170 --> 00:04:24,090 nom d'icône que vous voulez ici et ici Je veux utiliser ios-restaurant 58 00:04:24,100 --> 00:04:29,090 qui est simplement une icône que j'ai trouvée dans la liste des icônes, cette liste 59 00:04:29,320 --> 00:04:32,750 ici que j'ai aussi montré plus tôt, là c'est cette 60 00:04:32,870 --> 00:04:37,320 icône ios-restaurant que j'ai choisie que j'utilise maintenant et que je pointe ici. 61 00:04:37,450 --> 00:04:40,120 C'est l'icône que je veux rendre, je 62 00:04:40,120 --> 00:04:42,610 vais lui donner une taille de 63 00:04:42,610 --> 00:04:43,990 25, vous 64 00:04:43,990 --> 00:04:46,890 pouvez l'expérimenter mais j'ai trouvé que 25 65 00:04:46,900 --> 00:04:50,200 était assez décent ici dans la barre d'onglets 66 00:04:50,350 --> 00:04:57,610 et une couleur et c'est maintenant important de tabInfo. tintColor car la couleur que nous définissons ici doit bien sûr être notre couleur de teinte 67 00:04:57,610 --> 00:04:58,810 que nous avons définie ici. 68 00:04:58,810 --> 00:05:01,980 Bien sûr, nous pourrions coder en dur ici pour colorer la couleur d'accentuation, 69 00:05:01,990 --> 00:05:06,030 mais si nous la modifions ensuite là-bas, nous devons nous rappeler que nous la modifions également là-haut. 70 00:05:06,040 --> 00:05:11,440 La bonne chose est et c'est pourquoi il s'agit d'une fonction, que React navigation appelle cette fonction pour 71 00:05:11,440 --> 00:05:17,830 nous et nous donne des informations vitales sur la façon dont notre barre d'onglets est configurée dans cet objet info onglet et 72 00:05:17,830 --> 00:05:23,350 qui, par exemple, inclut la couleur de teinte que nous avons configurée , afin que nous puissions récupérer cela 73 00:05:23,350 --> 00:05:29,440 dynamiquement ici pour colorier l'icône, de sorte que si nous changeons la couleur là-bas pour la barre d'onglets, elle se reflète 74 00:05:29,470 --> 00:05:30,910 automatiquement dans nos icônes 75 00:05:30,940 --> 00:05:35,810 là-haut, donc c'est un peu de commodité que nous avons ici que nous pouvons utiliser ici . 76 00:05:35,810 --> 00:05:42,740 Donc, avec cela, je rend ces icônes pour les repas et pour les favoris, nous pouvons maintenant utiliser une approche similaire, utiliser ce formulaire plus long où nous 77 00:05:42,770 --> 00:05:48,200 configurons l'écran ici, puis ajouter ici des options de navigation qui seront fusionnées avec toute navigation options que nous configurons sur 78 00:05:52,430 --> 00:05:57,400 l'écran des favoris mais veuillez noter que bien sûr, vous pouvez absolument configurer les options de navigation ici dans le 79 00:05:57,400 --> 00:06:00,920 composant de l'écran des favoris, mais pour le garder au même endroit, je le 80 00:06:00,980 --> 00:06:03,620 ferai dans ma navigation configurée ici à la place. 81 00:06:03,620 --> 00:06:06,150 Ce sont donc mes options de navigation pour 82 00:06:06,170 --> 00:06:11,420 cet écran, tout comme pour ce navigateur, le navigateur de repas, nous pouvons bien sûr configurer des 83 00:06:11,480 --> 00:06:14,280 options de navigation pour un écran, c'est ce que 84 00:06:14,330 --> 00:06:19,880 nous avons fait dans tout le module après tout et là, je veux faire essentiellement la même chose, 85 00:06:19,940 --> 00:06:25,790 donc je vais juste le copier, l'ajouter ici à cet objet d'options de navigation et la seule chose qui 86 00:06:25,790 --> 00:06:30,130 diffère ici est l'icône que je veux utiliser, ici c'est ios-star au lieu d'ios-restaurant. 87 00:06:30,290 --> 00:06:36,170 Et avec cela, si nous enregistrons cela, j'obtiens en fait une erreur parce que puisque j'utilise 88 00:06:36,170 --> 00:06:42,230 maintenant jsx ici, nous devons bien sûr importer React, c'est ainsi que React fonctionne car jsx en 89 00:06:42,260 --> 00:06:48,510 arrière-plan est transformé en élément React create comme vous le savez et donc maintenant après avoir ajouté l'importation 90 00:06:48,530 --> 00:06:54,680 React ici dans le MealsNavigator. fichier js. Cela fonctionne et nous avons maintenant des icônes qui 91 00:06:54,680 --> 00:06:58,180 prennent automatiquement notre couleur de teinte et c'est ainsi que vous pouvez facilement ajouter des icônes. 92 00:06:58,270 --> 00:07:03,740 Maintenant, en plus de définir l'icône, vous voudrez peut-être également définir l'étiquette et vous verrez que par 93 00:07:03,860 --> 00:07:10,580 défaut, l'étiquette, les repas et les favoris sont simplement l'identifiant que nous avons attribué ici lorsque nous configurons notre navigation par 94 00:07:10,610 --> 00:07:12,050 onglet repas et favoris. 95 00:07:12,050 --> 00:07:17,540 Maintenant, souvent, cela a du sens, mais si vous voulez avoir une étiquette différente, alors dans les options 96 00:07:17,630 --> 00:07:20,780 de navigation de votre écran que vous chargez ici dans 97 00:07:20,780 --> 00:07:28,910 cet onglet, vous pouvez configurer une propriété d'étiquette de barre d'onglets et là-dedans, c'est juste une chaîne où vous pourriez avoir des favoris avec un point d'exclamation 98 00:07:28,910 --> 00:07:34,310 et si vous le définissez, vous verrez que vous avez maintenant des favoris avec un point d'exclamation ici 99 00:07:34,310 --> 00:07:37,040 au lieu de simplement des favoris comme auparavant. 100 00:07:37,040 --> 00:07:42,500 Vous pouvez donc remplacer cette étiquette par défaut qui est supposée être normalement votre identifiant, si vous en voulez 101 00:07:42,500 --> 00:07:47,510 une autre, vous pouvez la remplacer et bien sûr, il y a plus d'options que vous pouvez 102 00:07:47,510 --> 00:07:52,700 définir et attacher, vous trouverez un lien vers les documents officiels pour ce navigateur où vous pouvez tout 103 00:07:52,700 --> 00:08:00,740 savoir sur les options que vous pouvez configurer sur le navigateur lui-même mais aussi sur les options de navigation des écrans enfants, donc des écrans imbriqués ou des 104 00:08:00,740 --> 00:08:04,850 navigateurs imbriqués à l'intérieur de ce navigateur d'onglets, donc ce que nous mettons 105 00:08:04,850 --> 00:08:05,870 en place ici.