Avec cela, nous avons ajouté des onglets et oui, dans les
favoris, nous ne faisons rien
encore, c'est quelque chose
que nous suivrons mais nous avons au moins des onglets. Avant de travailler sur les favoris, travaillons un peu
plus sur les onglets car pour le moment, nous avons des onglets sur Android qui ne ressemblent pas vraiment à
ce que nous attendrions des onglets Android, cela ressemble plus à des onglets iOS si vous me demandez .
Bien sûr, cela fonctionne et vous pouvez garder cela si
c'est le style que vous voulez, rien de mal à cela, mais il serait plus agréable d'avoir peut-être un look
plus spécifique à Android et pour cela, nous avons un navigateur séparé que nous pouvons créer, mais nous devons installer un paquet supplémentaire
pour cela tout d'abord, alors faisons-le.
Permettez-moi de quitter ce serveur ici et
d'exécuter npm install --save et maintenant c'est react-navigation-material-bottom-tabs. ce cours ici mais ci-joint vous
trouverez également un lien où vous pouvez en savoir plus
sur ce navigateur alternatif. Nous allons utiliser le navigateur des
onglets du bas du matériel ici et installer ce package, voici comment commencer.
Attendons donc la fin de cette installation et par la suite, installons
un autre paquet dont nous aurons également besoin avec npm install --save et c'est react-native-paper. Donc, installons-le également et une fois cette installation terminée, redémarrons le serveur expo avec
npm start
à nouveau car maintenant nous
avons installé des packages qui nous aident à
rendre un navigateur d'onglets alternatif et il est heureusement très simple à utiliser
et a à peu près le même ou très des options de configuration similaires
à celles du navigateur de l'onglet inférieur, en particulier en ce
qui concerne la configuration des icônes, etc. Ci-joint, vous trouverez tous les documents pour
ce navigateur
alternatif et pour cela un autre navigateur alternatif que j'ai mentionné et utilisons-le en important à partir de ce package de navigateur
react-navigation-material-bottom-tabs nouvellement installé ici et à partir de là, nous pouvons importer la création fonction de navigation de l'onglet
inférieur du matériau ici.
Assurez-vous maintenant que vous avez également des importations de plate-forme, car nous en aurons maintenant besoin,
car je ne veux utiliser ce navigateur qu'au lieu de créer
le navigateur de l'onglet inférieur si nous sommes sur Android. Nous pouvons donc vérifier ici si la plate-forme. os est égal à Android et dans ce cas,
je veux utiliser cette nouvelle fonction de navigation dans l'onglet inférieur du matériau de création que je
viens d'importer,
sinon après les deux points, nous utiliserons le navigateur de l'onglet inférieur que nous avons configuré dans la conférence précédente.
Donc, bien sûr, nous posons une question: comment fonctionne le navigateur de l'onglet inférieur du matériau? Comment pouvons-nous configurer
cela?
Et la bonne nouvelle est que, généralement, cela fonctionne de la même manière que le navigateur de l'onglet inférieur.
Il y a quelques détails que vous pouvez configurer sur le navigateur d'onglets
lui-même, donc par exemple la couleur à assumer, quand et ainsi de suite
qui diffère, mais en ce qui concerne la façon dont vous configurez vos onglets et faites correspondre les écrans et
configurez les icônes, c'est exactement la même chose et donc nous peut réellement prendre cette configuration d'écran entière ici,
la couper d'ici et la stocker ici dans une constante distincte que je nommerai tabScreenConfig, vous pouvez la
nommer comme vous voulez
parce qu'elle peut être réutilisée et maintenant utiliser tabScreenConfig comme premier argument à la fois dans le navigateur de l'onglet inférieur
ainsi que dans le navigateur de l'onglet inférieur du matériau, tout comme ceci et cela ne nous laisse qu'un deuxième argument alternatif
que nous passons au navigateur de l'onglet inférieur du matériau et au navigateur de l'onglet inférieur.
Ce deuxième argument que nous transmettons, cet objet que nous transmettons comme deuxième argument, comme vous l'avez appris, nous permet
de configurer le navigateur d'onglets lui-même, par exemple de configurer des options de barre d'onglets comme la couleur
de teinte active et qui diffère un peu car pour le navigateur d'onglets inférieur du matériau , nous ne définissons pas d'options de barre d'onglets pour configurer notre couleur
de teinte active, au lieu de cela, nous
avons directement une couleur de teinte active ici dans cet objet lui-même, dans le navigateur d'onglets inférieur, nous l'avions dans un objet
imbriqué, dans les options de la barre d'onglets ,
nous ne l'avons pas ici.
Au lieu de cela, ici, nous définissons simplement la couleur de teinte active comme celle-ci sur les couleurs d'accentuation et il
existe également d'autres paramètres, par exemple, vous pouvez définir le décalage sur vrai et je montrerai ce que
cela fait et
ce que le faux fait dans une seconde et avec cela, C'est tout pour le moment. Si nous enregistrons maintenant cela, cela reconstruira notre projet et le rechargera à
l'écran et nous avons les mêmes onglets qu'avant sur iOS,
cela
n'a pas changé mais
sur Android, nous avons maintenant ce navigateur d'onglet plus matériel
ici où nous pouvons maintenant, changez aussi comme ça et c'est cet effet de
décalage que vous voyez ici, que les onglets grandissent, que l'étiquette n'existe que sur l'onglet qui est actif
et si vous définissez
le décalage sur faux ici en passant, vous n'avez tout simplement pas cela effet, vous
avez également toujours vos étiquettes sur Android.
C'est donc maintenant un look qui ressemble un peu plus à
Android, je dirais et c'est donc un look que je veux avoir ici et vous pouvez aller encore plus loin.
Disons que nous voulons changer la couleur d'arrière-plan de la barre
d'onglets dans son intégralité
en fonction de l'onglet sélectionné et avoir un bel effet d'entraînement qui change cela en cours de route.
Pour cela, nous pouvons aller à notre configuration d'écran et là aux options de navigation et là, nous avons
l'icône de la barre d'onglets.
Nous pouvons également définir une couleur de barre d'onglets ici lorsque cet onglet est sélectionné
pour ainsi dire et, par exemple, définir cette couleur sur la couleur principale et maintenant important, cela n'a d'effet que si vous définissez le décalage sur
true, sinon cette couleur de la barre d'onglets est proposée que je mets en place ici n'aura aucun effet car seul l'effet de décalage
prend en charge cela et ce que nous aurons maintenant, l'effet que nous aurons maintenant est que si je l'enregistre,
obtenez le même aspect sur iOS car il y a une barre d'onglets la couleur n'a aucun effet mais
maintenant vous voyez, nous avons vraiment notre couleur primaire comme arrière-plan si les repas
sont sélectionnés, si nous sélectionnons les favoris, qui change pour l'autre couleur.
Maintenant, ce changement n'est bien sûr pas si beau et par conséquent, nous pouvons simplement le changer en donnant également
à notre écran préféré sa propre couleur de barre d'onglets.
Ainsi, nous pourrions dire dans les options de navigation de l'écran des favoris à côté de l'icône de la barre
d'onglets, que nous avons défini la couleur de la barre d'onglets pour accentuer la couleur et ce que nous aurons maintenant est une barre d'onglets de couleur différente
qui passe de notre couleur principale pour les repas ici à cette couleur d'accent pour les favoris avec ce bel effet d'entraînement et bien sûr l'inconvénient
est que nous ne voyons pas l'icône alors parce que la couleur d'accent pour la couleur de la barre d'onglets n'est
pas un
bon choix si notre couleur de teinte est également une couleur d'accent.
Donc, si nous utilisons cet effet, nous pourrions vouloir utiliser le blanc ici comme couleur de teinte que nous pouvons
toujours voir à la fois contre la couleur primaire et la couleur d'accent et donc ici pour la couleur de teinte active, nous pourrions vouloir utiliser
du blanc au lieu de notre accent couleur parce que le blanc fonctionnera pour les deux onglets, peu importe si la barre
d'onglets est alors colorée dans la couleur principale, ce violet foncé ou dans la couleur d'accent, cet orange et donc maintenant vous
voyez que nous avons cet effet ici
et cette belle ondulation change en l'autre onglet ici pour les favoris. Et je pense que c'est un changement assez doux
et facile à implémenter qui donne une belle allure sur Android et nous donne certainement un look Android
plus distinctif tout en gardant l'apparence iOS par défaut que vous attendez sur cette plate-forme, c'est vraiment facile à
implémenter comme vous Peut dire.
Maintenant, une petite note, si vous ne voulez pas utiliser cet effet de décalage
que je veux utiliser ici, mais si vous ne voulez pas l'utiliser, vous pouvez bien sûr remarquer
que la couleur d'arrière-plan de vos onglets sur Android est ce n'est pas votre couleur principale, mais c'est plutôt une couleur pourpre un peu plus claire, violet-bleuâtre.
Maintenant, généralement, vous voudrez peut-être changer cela aussi bien sûr et
comme vous le voyez, la couleur de la barre d'onglets n'a tout simplement
aucun effet, cela ne fonctionne qu'avec le décalage.
Maintenant, si vous souhaitez modifier la couleur d'arrière-plan de toute la barre d'onglets dans le cas non décalé, alors tout
ce que vous avez à faire est ici sur la configuration de votre navigateur d'onglets lui-même car cela affecte la barre d'onglets entière maintenant,
vous pouvez
configurer une propriété de style de barre et qui est simplement un objet de style où vous pouvez par
exemple définir la couleur d'arrière-plan sur des couleurs primaires, comme ceci et cela change simplement la couleur d'arrière-plan
de la barre de navigation pour notre barre inférieure Android ici.
Voilà comment vous pouvez alors changer cela si vous ne voulez pas utiliser le modèle de décalage ici,
l'apparence de décalage.
Je vais réactiver le décalage, nous
allons le redéfinir car j'aime vraiment cette barre d'onglets de couleur différente, je pense que c'est
un très joli look avec cet effet d'entraînement qui change la couleur et c'est facile de mettre en
œuvre différents barres d'onglets.
Maintenant, il y a un tas d'options de configuration à la fois pour la barre d'onglets elle-même ainsi que pour les options
de navigation des écrans que vous avez à l'intérieur de votre barre d'onglets et donc vous trouvez vos documents officiels
attachés où vous pouvez plonger dans chaque option et explorer eux et jouer avec eux.