1 00:00:02,350 --> 00:00:05,320 Avec cela, nous avons ajouté des onglets et oui, dans les 2 00:00:05,330 --> 00:00:06,970 favoris, nous ne faisons rien 3 00:00:06,970 --> 00:00:08,370 encore, c'est quelque chose 4 00:00:08,380 --> 00:00:14,070 que nous suivrons mais nous avons au moins des onglets. Avant de travailler sur les favoris, travaillons un peu 5 00:00:14,070 --> 00:00:19,620 plus sur les onglets car pour le moment, nous avons des onglets sur Android qui ne ressemblent pas vraiment à 6 00:00:19,620 --> 00:00:25,080 ce que nous attendrions des onglets Android, cela ressemble plus à des onglets iOS si vous me demandez . 7 00:00:25,080 --> 00:00:27,840 Bien sûr, cela fonctionne et vous pouvez garder cela si 8 00:00:27,840 --> 00:00:33,090 c'est le style que vous voulez, rien de mal à cela, mais il serait plus agréable d'avoir peut-être un look 9 00:00:33,090 --> 00:00:39,300 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 10 00:00:39,390 --> 00:00:41,180 pour cela tout d'abord, alors faisons-le. 11 00:00:41,860 --> 00:00:45,660 Permettez-moi de quitter ce serveur ici et 12 00:00:45,660 --> 00:00:53,490 d'exécuter npm install --save et maintenant c'est react-navigation-material-bottom-tabs. ce cours ici mais ci-joint vous 13 00:00:53,490 --> 00:00:58,920 trouverez également un lien où vous pouvez en savoir plus 14 00:00:59,130 --> 00:01:04,170 sur ce navigateur alternatif. Nous allons utiliser le navigateur des 15 00:01:04,170 --> 00:01:09,130 onglets du bas du matériel ici et installer ce package, voici comment commencer. 16 00:01:09,150 --> 00:01:13,800 Attendons donc la fin de cette installation et par la suite, installons 17 00:01:13,890 --> 00:01:25,240 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 18 00:01:25,240 --> 00:01:26,680 npm start 19 00:01:26,680 --> 00:01:28,720 à nouveau car maintenant nous 20 00:01:28,810 --> 00:01:32,400 avons installé des packages qui nous aident à 21 00:01:32,560 --> 00:01:37,940 rendre un navigateur d'onglets alternatif et il est heureusement très simple à utiliser 22 00:01:37,970 --> 00:01:43,780 et a à peu près le même ou très des options de configuration similaires 23 00:01:43,780 --> 00:01:48,730 à celles du navigateur de l'onglet inférieur, en particulier en ce 24 00:01:48,730 --> 00:01:54,730 qui concerne la configuration des icônes, etc. Ci-joint, vous trouverez tous les documents pour 25 00:01:55,000 --> 00:01:56,160 ce navigateur 26 00:01:56,290 --> 00:02:05,080 alternatif et pour cela un autre navigateur alternatif que j'ai mentionné et utilisons-le en important à partir de ce package de navigateur 27 00:02:05,080 --> 00:02:12,770 react-navigation-material-bottom-tabs nouvellement installé ici et à partir de là, nous pouvons importer la création fonction de navigation de l'onglet 28 00:02:12,830 --> 00:02:14,310 inférieur du matériau ici. 29 00:02:14,450 --> 00:02:18,950 Assurez-vous maintenant que vous avez également des importations de plate-forme, car nous en aurons maintenant besoin, 30 00:02:18,950 --> 00:02:21,980 car je ne veux utiliser ce navigateur qu'au lieu de créer 31 00:02:21,980 --> 00:02:31,070 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, 32 00:02:31,070 --> 00:02:36,830 je veux utiliser cette nouvelle fonction de navigation dans l'onglet inférieur du matériau de création que je 33 00:02:36,830 --> 00:02:37,680 viens d'importer, 34 00:02:37,740 --> 00:02:44,060 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. 35 00:02:44,060 --> 00:02:49,700 Donc, bien sûr, nous posons une question: comment fonctionne le navigateur de l'onglet inférieur du matériau? Comment pouvons-nous configurer 36 00:02:49,700 --> 00:02:50,880 cela? 37 00:02:50,990 --> 00:02:56,750 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. 38 00:02:56,750 --> 00:03:01,100 Il y a quelques détails que vous pouvez configurer sur le navigateur d'onglets 39 00:03:01,100 --> 00:03:05,670 lui-même, donc par exemple la couleur à assumer, quand et ainsi de suite 40 00:03:05,690 --> 00:03:12,210 qui diffère, mais en ce qui concerne la façon dont vous configurez vos onglets et faites correspondre les écrans et 41 00:03:12,350 --> 00:03:18,650 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, 42 00:03:18,650 --> 00:03:24,350 la couper d'ici et la stocker ici dans une constante distincte que je nommerai tabScreenConfig, vous pouvez la 43 00:03:24,350 --> 00:03:25,990 nommer comme vous voulez 44 00:03:26,240 --> 00:03:33,070 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 45 00:03:33,080 --> 00:03:40,010 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 46 00:03:40,160 --> 00:03:45,290 que nous passons au navigateur de l'onglet inférieur du matériau et au navigateur de l'onglet inférieur. 47 00:03:45,290 --> 00:03:51,330 Ce deuxième argument que nous transmettons, cet objet que nous transmettons comme deuxième argument, comme vous l'avez appris, nous permet 48 00:03:51,330 --> 00:03:56,730 de configurer le navigateur d'onglets lui-même, par exemple de configurer des options de barre d'onglets comme la couleur 49 00:03:56,990 --> 00:04:05,480 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 50 00:04:05,480 --> 00:04:07,950 de teinte active, au lieu de cela, nous 51 00:04:07,970 --> 00:04:14,530 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 52 00:04:14,570 --> 00:04:17,330 imbriqué, dans les options de la barre d'onglets , 53 00:04:17,330 --> 00:04:18,950 nous ne l'avons pas ici. 54 00:04:18,950 --> 00:04:24,590 Au lieu de cela, ici, nous définissons simplement la couleur de teinte active comme celle-ci sur les couleurs d'accentuation et il 55 00:04:24,590 --> 00:04:29,660 existe également d'autres paramètres, par exemple, vous pouvez définir le décalage sur vrai et je montrerai ce que 56 00:04:29,660 --> 00:04:30,800 cela fait et 57 00:04:30,890 --> 00:04:39,550 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 à 58 00:04:39,550 --> 00:04:42,980 l'écran et nous avons les mêmes onglets qu'avant sur iOS, 59 00:04:42,980 --> 00:04:43,550 cela 60 00:04:43,550 --> 00:04:45,140 n'a pas changé mais 61 00:04:45,140 --> 00:04:48,440 sur Android, nous avons maintenant ce navigateur d'onglet plus matériel 62 00:04:48,500 --> 00:04:53,200 ici où nous pouvons maintenant, changez aussi comme ça et c'est cet effet de 63 00:04:53,240 --> 00:04:59,270 décalage que vous voyez ici, que les onglets grandissent, que l'étiquette n'existe que sur l'onglet qui est actif 64 00:04:59,270 --> 00:05:00,740 et si vous définissez 65 00:05:00,860 --> 00:05:05,990 le décalage sur faux ici en passant, vous n'avez tout simplement pas cela effet, vous 66 00:05:05,990 --> 00:05:08,390 avez également toujours vos étiquettes sur Android. 67 00:05:08,390 --> 00:05:12,490 C'est donc maintenant un look qui ressemble un peu plus à 68 00:05:12,650 --> 00:05:19,990 Android, je dirais et c'est donc un look que je veux avoir ici et vous pouvez aller encore plus loin. 69 00:05:20,070 --> 00:05:23,690 Disons que nous voulons changer la couleur d'arrière-plan de la barre 70 00:05:23,830 --> 00:05:25,150 d'onglets dans son intégralité 71 00:05:25,320 --> 00:05:30,800 en fonction de l'onglet sélectionné et avoir un bel effet d'entraînement qui change cela en cours de route. 72 00:05:31,110 --> 00:05:36,360 Pour cela, nous pouvons aller à notre configuration d'écran et là aux options de navigation et là, nous avons 73 00:05:36,360 --> 00:05:37,780 l'icône de la barre d'onglets. 74 00:05:37,800 --> 00:05:42,760 Nous pouvons également définir une couleur de barre d'onglets ici lorsque cet onglet est sélectionné 75 00:05:42,810 --> 00:05:51,160 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 76 00:05:51,200 --> 00:05:58,850 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 77 00:05:58,850 --> 00:06:05,390 prend en charge cela et ce que nous aurons maintenant, l'effet que nous aurons maintenant est que si je l'enregistre, 78 00:06:06,640 --> 00:06:12,810 obtenez le même aspect sur iOS car il y a une barre d'onglets la couleur n'a aucun effet mais 79 00:06:13,030 --> 00:06:17,770 maintenant vous voyez, nous avons vraiment notre couleur primaire comme arrière-plan si les repas 80 00:06:17,770 --> 00:06:21,980 sont sélectionnés, si nous sélectionnons les favoris, qui change pour l'autre couleur. 81 00:06:22,030 --> 00:06:27,940 Maintenant, ce changement n'est bien sûr pas si beau et par conséquent, nous pouvons simplement le changer en donnant également 82 00:06:27,940 --> 00:06:30,950 à notre écran préféré sa propre couleur de barre d'onglets. 83 00:06:30,970 --> 00:06:36,430 Ainsi, nous pourrions dire dans les options de navigation de l'écran des favoris à côté de l'icône de la barre 84 00:06:36,900 --> 00:06:44,340 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 85 00:06:44,340 --> 00:06:51,250 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 86 00:06:51,250 --> 00:06:56,910 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 87 00:06:56,910 --> 00:06:57,740 pas un 88 00:06:57,750 --> 00:07:01,020 bon choix si notre couleur de teinte est également une couleur d'accent. 89 00:07:01,020 --> 00:07:06,270 Donc, si nous utilisons cet effet, nous pourrions vouloir utiliser le blanc ici comme couleur de teinte que nous pouvons 90 00:07:06,270 --> 00:07:13,020 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 91 00:07:13,020 --> 00:07:18,750 du blanc au lieu de notre accent couleur parce que le blanc fonctionnera pour les deux onglets, peu importe si la barre 92 00:07:18,750 --> 00:07:24,540 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 93 00:07:24,540 --> 00:07:26,640 voyez que nous avons cet effet ici 94 00:07:26,640 --> 00:07:32,610 et cette belle ondulation change en l'autre onglet ici pour les favoris. Et je pense que c'est un changement assez doux 95 00:07:32,730 --> 00:07:39,120 et facile à implémenter qui donne une belle allure sur Android et nous donne certainement un look Android 96 00:07:39,240 --> 00:07:45,660 plus distinctif tout en gardant l'apparence iOS par défaut que vous attendez sur cette plate-forme, c'est vraiment facile à 97 00:07:45,660 --> 00:07:47,730 implémenter comme vous Peut dire. 98 00:07:47,820 --> 00:07:52,700 Maintenant, une petite note, si vous ne voulez pas utiliser cet effet de décalage 99 00:07:52,710 --> 00:07:58,020 que je veux utiliser ici, mais si vous ne voulez pas l'utiliser, vous pouvez bien sûr remarquer 100 00:07:58,020 --> 00:08:06,350 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. 101 00:08:06,360 --> 00:08:09,060 Maintenant, généralement, vous voudrez peut-être changer cela aussi bien sûr et 102 00:08:09,060 --> 00:08:12,060 comme vous le voyez, la couleur de la barre d'onglets n'a tout simplement 103 00:08:12,060 --> 00:08:14,080 aucun effet, cela ne fonctionne qu'avec le décalage. 104 00:08:14,310 --> 00:08:21,330 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 105 00:08:21,330 --> 00:08:29,570 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, 106 00:08:29,570 --> 00:08:30,410 vous pouvez 107 00:08:30,410 --> 00:08:36,980 configurer une propriété de style de barre et qui est simplement un objet de style où vous pouvez par 108 00:08:36,980 --> 00:08:43,240 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 109 00:08:43,240 --> 00:08:47,180 de la barre de navigation pour notre barre inférieure Android ici. 110 00:08:47,180 --> 00:08:52,750 Voilà comment vous pouvez alors changer cela si vous ne voulez pas utiliser le modèle de décalage ici, 111 00:08:52,790 --> 00:08:53,860 l'apparence de décalage. 112 00:08:54,080 --> 00:08:56,000 Je vais réactiver le décalage, nous 113 00:08:56,010 --> 00:09:01,370 allons le redéfinir car j'aime vraiment cette barre d'onglets de couleur différente, je pense que c'est 114 00:09:01,370 --> 00:09:07,100 un très joli look avec cet effet d'entraînement qui change la couleur et c'est facile de mettre en 115 00:09:07,130 --> 00:09:08,660 œuvre différents barres d'onglets. 116 00:09:08,660 --> 00:09:13,820 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 117 00:09:13,820 --> 00:09:18,590 de navigation des écrans que vous avez à l'intérieur de votre barre d'onglets et donc vous trouvez vos documents officiels 118 00:09:18,590 --> 00:09:22,490 attachés où vous pouvez plonger dans chaque option et explorer eux et jouer avec eux.