Alors, comment pouvons-nous attribuer des icônes ici?
Comment pouvons-nous alors également nous assurer que nous utilisons la couleur que
nous voulons utiliser?
Commençons par la
couleur avant d'ajouter les icônes. Tout comme la fonction de création d'un navigateur de
navigation dans la pile, la création d'un
navigateur à onglet inférieur prend également un deuxième argument. Le premier argument est votre objet de configuration où
vous configurez les différents onglets et les
écrans vers lesquels ils pointent, le deuxième argument est également un objet où vous pouvez configurer le navigateur en général et
là, vous avez quelques paramètres.
Encore une fois, les documents officiels sont l'endroit où aller pour en savoir plus sur
chaque paramètre ici, l'un des paramètres les plus importants ici sont les options de la barre d'onglets.
Ceci est un autre objet et là-dedans, vous pouvez contrôler en détail l'apparence de la barre d'onglets, son style.
Vous pouvez définir une couleur de teinte inactive qui est la couleur de l'onglet qui n'est actuellement pas active.
Vous pouvez configurer une couleur de teinte active et c'est ce dont nous
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
changer également l'arrière-plan des onglets ici si vous le
souhaitez et donc vous avez beaucoup de possibilités pour vraiment ajuster cela à vos besoins.
Et ici, je vais définir une couleur de teinte active parce
que c'est tout ce dont j'ai besoin ici, mais bien sûr, n'hésitez pas à jouer avec cela et à changer également
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
que j'importe ici, je vais les mettre en couleur d'accentuation.
Vous ne l'avez pas utilisé auparavant mais
maintenant je vais l'utiliser et c'est cette couleur orange que nous avons maintenant et c'est ainsi que nous changeons
facilement la couleur de l'onglet actif. Maintenant, c'est une chose, veuillez
également noter que cela n'ajoute bien sûr pas d'icône et comment serait-il, nous
ne disons
rien à propos de l'icône que nous voulons ajouter. Maintenant, pour ajouter l'icône, le schéma simple, je
pense que vous allez à votre configuration d'itinéraire ici, donc à la configuration
où vous mappez les écrans à vos onglets et vous utilisez le formulaire plus long où vous
ajoutez la propriété d'écran et où vous ajoutez également options de navigation.
Soit dit en passant, vous pouvez également le faire directement dans le composant en ajoutant des
options de navigation comme nous l'avons fait
auparavant, mais comme les repas ici sont en fait un navigateur, le seul endroit où ajouter
des options de
navigation est bien sûr ici ou aussi ici, sur créer un navigateur de pile.
Là, vous pouvez également configurer une clé d'options de navigation ici sur le deuxième argument, sur cet objet,
vous passez comme deuxième argument pour créer un navigateur de pile où vous configurez le navigateur
global pour donner à ce navigateur lui-même des options de navigation car les options de navigation que nous attribuons
à le navigateur de repas, donc pour le navigateur de pile sont maintenant les options qui sont prises en
compte par le navigateur d'onglets qui utilise ce navigateur de repas comme navigateur imbriqué et les options de navigation que nous
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
que vous pointez mais c'est plutôt une fonction. C'est une fonction qui reçoit des informations sur les onglets que vous
pourriez dire, devrait aller ici, c'est l'argument que nous obtenons automatiquement car cette
fonction sera bien sûr appelée par la navigation React et l'icône de la barre d'onglets, cette
fonction ici, doit retourner l'icône que vous voulez à rendre pour cet onglet, donc dans ce cas
pour l'onglet repas.
Cela signifie que je dois pouvoir utiliser des icônes ici et pour cela, nous pouvons importer des ionicons ou tout autre
jeu d'icônes que vous souhaitez utiliser à partir de @ expo / vector-icons.
Encore une fois, n'hésitez pas à
installer ce paquet, normalement il devrait être installé automatiquement lorsque vous travaillez avec Expo mais vous pouvez simplement exécuter
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
vous voulez mais j'utilise toujours les ionicons tout au long de ce cours, je m'en tiendrai à eux.
Avec cela, vous pouvez utiliser des ionicons comme composant comme vous l'avez appris plus tôt dans le cours.
Donc ici, nous pouvons simplement retourner des ionicons comme celui-ci pour rendre une icône ionicon et vous pouvez maintenant
utiliser n'importe quel
nom d'icône que vous voulez ici et ici Je veux utiliser ios-restaurant
qui est simplement une icône que j'ai trouvée dans la liste des icônes, cette liste
ici que j'ai aussi montré plus tôt, là c'est cette
icône ios-restaurant que j'ai choisie que j'utilise maintenant et que je pointe ici.
C'est l'icône que je veux rendre, je
vais lui donner une taille de
25, vous
pouvez l'expérimenter mais j'ai trouvé que 25
était assez décent ici dans la barre d'onglets
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
que nous avons définie ici.
Bien sûr, nous pourrions coder en dur ici pour colorer la couleur d'accentuation,
mais si nous la modifions ensuite là-bas, nous devons nous rappeler que nous la modifions également là-haut.
La bonne chose est et c'est pourquoi il s'agit d'une fonction, que React navigation appelle cette fonction pour
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
qui, par exemple, inclut la couleur de teinte que nous avons configurée , afin que nous puissions récupérer cela
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
automatiquement dans nos icônes
là-haut, donc c'est un peu de commodité que nous avons ici que nous pouvons utiliser ici .
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
configurons l'écran ici, puis ajouter ici des options de navigation qui seront fusionnées avec toute navigation options que nous configurons sur
l'écran des favoris mais veuillez noter que bien sûr, vous pouvez absolument configurer les options de navigation ici dans le
composant de l'écran des favoris, mais pour le garder au même endroit, je le
ferai dans ma navigation configurée ici à la place.
Ce sont donc mes options de navigation pour
cet écran, tout comme pour ce navigateur, le navigateur de repas, nous pouvons bien sûr configurer des
options de navigation pour un écran, c'est ce que
nous avons fait dans tout le module après tout et là, je veux faire essentiellement la même chose,
donc je vais juste le copier, l'ajouter ici à cet objet d'options de navigation et la seule chose qui
diffère ici est l'icône que je veux utiliser, ici c'est ios-star au lieu d'ios-restaurant.
Et avec cela, si nous enregistrons cela, j'obtiens en fait une erreur parce que puisque j'utilise
maintenant jsx ici, nous devons bien sûr importer React, c'est ainsi que React fonctionne car jsx en
arrière-plan est transformé en élément React create comme vous le savez et donc maintenant après avoir ajouté l'importation
React ici dans le MealsNavigator. fichier js. Cela fonctionne et nous avons maintenant des icônes qui
prennent automatiquement notre couleur de teinte et c'est ainsi que vous pouvez facilement ajouter des icônes.
Maintenant, en plus de définir l'icône, vous voudrez peut-être également définir l'étiquette et vous verrez que par
défaut, l'étiquette, les repas et les favoris sont simplement l'identifiant que nous avons attribué ici lorsque nous configurons notre navigation par
onglet repas et favoris.
Maintenant, souvent, cela a du sens, mais si vous voulez avoir une étiquette différente, alors dans les options
de navigation de votre écran que vous chargez ici dans
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
et si vous le définissez, vous verrez que vous avez maintenant des favoris avec un point d'exclamation ici
au lieu de simplement des favoris comme auparavant.
Vous pouvez donc remplacer cette étiquette par défaut qui est supposée être normalement votre identifiant, si vous en voulez
une autre, vous pouvez la remplacer et bien sûr, il y a plus d'options que vous pouvez
définir et attacher, vous trouverez un lien vers les documents officiels pour ce navigateur où vous pouvez tout
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
navigateurs imbriqués à l'intérieur de ce navigateur d'onglets, donc ce que nous mettons
en place ici.