1 00:00:02,280 --> 00:00:05,200 Commençons par styliser le tiroir sur l'écran des filtres, ce 2 00:00:05,220 --> 00:00:06,560 n'est pas difficile, c'est 3 00:00:06,570 --> 00:00:11,080 quelque chose que nous avons fait auparavant. Dans le navigateur de filtres ici 4 00:00:11,100 --> 00:00:16,500 dans le navigateur de pile, nous n'avons finalement qu'à configurer les options de navigation par défaut que 5 00:00:16,500 --> 00:00:24,090 nous utilisons également pour le navigateur fav dans notre navigateur de repas. Nous pouvons donc simplement copier ce deuxième objet de configuration ici 6 00:00:24,090 --> 00:00:29,270 et l'ajouter sur notre navigateur de filtres ici comme deuxième argument pour créer un navigateur de pile. 7 00:00:29,350 --> 00:00:31,870 Bien sûr, nous pouvons supprimer cette ligne 8 00:00:31,870 --> 00:00:39,220 commentée, mais avec cette simple modification, nous nous assurons que nous utilisons ici la même barre de navigation ou le même style 9 00:00:39,220 --> 00:00:40,450 de barre d'action. 10 00:00:40,450 --> 00:00:45,580 C'est donc un changement simple mais utile, maintenant pour le tiroir lui-même, qu'en est-il de 11 00:00:45,580 --> 00:00:48,770 ce look ici et du style du tiroir? 12 00:00:48,780 --> 00:00:55,690 Maintenant, pour commencer, vous pouvez si vous souhaitez contrôler l'ensemble du tiroir et modifier la façon dont les éléments sont disposés là-bas et ne pas utiliser 13 00:00:55,990 --> 00:01:01,120 cette valeur par défaut d'avoir une liste avec effet d'entraînement ici sur Android et un effet différent sur iOS, 14 00:01:01,120 --> 00:01:01,910 mais je 15 00:01:02,050 --> 00:01:05,680 pense que c'est une belle valeur par défaut que je ne veux pas changer. 16 00:01:05,710 --> 00:01:10,930 Si vous le souhaitez, vous pouvez cependant remplacer l'intégralité de ce composant qui est rendu ici et attaché, vous trouverez 17 00:01:10,930 --> 00:01:15,850 un lien vers les documents officiels où vous pourrez en savoir plus au cas où vous auriez besoin de 18 00:01:15,850 --> 00:01:16,510 le personnaliser. 19 00:01:16,780 --> 00:01:25,050 Ce que je veux bien sûr changer, c'est le style de ces éléments et le texte qui est affiché ici. 20 00:01:25,060 --> 00:01:26,550 Ce n'est pas 21 00:01:26,590 --> 00:01:32,500 trop difficile, commençons par le texte. En tant que texte, comme vous pouvez le constater, il prend par défaut 22 00:01:32,530 --> 00:01:34,550 ces identifiants ici, les filtres favoris des repas. 23 00:01:34,570 --> 00:01:39,020 Maintenant, bien sûr, cela peut le faire, mais les plats favoris, ce n'est pas 24 00:01:39,040 --> 00:01:42,250 vraiment un texte que nous voulons montrer à nos utilisateurs. 25 00:01:42,250 --> 00:01:47,540 Par conséquent, je veux remplacer cela et nous pouvons le faire avec les bonnes anciennes options de navigation 26 00:01:47,560 --> 00:01:53,920 qui, comme auparavant avec les onglets où nous pouvions également contrôler le texte de l'étiquette, nous devons définir sur nos navigateurs de 27 00:01:54,160 --> 00:02:00,460 pile, soit lorsque nous créons le navigateur de pile, là, à côté de la définition des options de navigation par défaut pour 28 00:02:00,460 --> 00:02:05,690 chaque écran de ce navigateur, nous pouvons définir des options de navigation pour l'ensemble du navigateur lui-même, qui 29 00:02:05,700 --> 00:02:10,510 ne sont alors pas pour les écrans du navigateur, mais pour le navigateur lorsqu'il est utilisé 30 00:02:10,510 --> 00:02:11,500 comme écran, ce 31 00:02:11,740 --> 00:02:19,570 qui est ce que nous fais ici et puis ici, nous pourrions définir une étiquette de tiroir et définir ceci sur des filtres avec quelques points d'exclamation 32 00:02:19,570 --> 00:02:22,100 juste pour que nous voyions que cela a 33 00:02:22,150 --> 00:02:23,720 un effet, maintenant nous le 34 00:02:23,770 --> 00:02:27,220 voyons ici, c'est donc là que nous pouvons définir cela, une option. 35 00:02:27,220 --> 00:02:32,800 Alternativement ici lors de la création du navigateur de tiroir, nous pouvons utiliser ce formulaire plus long où 36 00:02:32,800 --> 00:02:38,260 nous configurons un écran et où nous configurons ensuite les options de navigation ici et ce ne 37 00:02:38,590 --> 00:02:40,230 sont que des alternatives où 38 00:02:40,240 --> 00:02:41,830 aucun des deux n'est 39 00:02:41,980 --> 00:02:47,840 meilleur ou pire, vous pouvez utiliser l'un des deux eux et maintenant ici, je vais mettre une étiquette de 40 00:02:47,840 --> 00:02:52,760 tiroir sur les repas disons, cela a plus de sens pour moi que les plats préférés. 41 00:02:53,600 --> 00:02:58,670 Donc, si j'ouvre maintenant le tiroir, je vois des repas et des filtres. Pour les filtres, je n'ai plus remplacé le titre 42 00:02:58,670 --> 00:03:02,100 car je suis d'accord avec la valeur par défaut de prendre mon 43 00:03:02,240 --> 00:03:04,580 identifiant mais pour les repas, je l'ai remplacé. 44 00:03:04,580 --> 00:03:08,420 Maintenant, qu'en est-il du style, de la couleur, etc.? 45 00:03:08,420 --> 00:03:15,020 Bien sûr, cela peut aussi être contrôlé. Eh bien, comme par exemple avec les onglets où nous 46 00:03:15,020 --> 00:03:21,260 pourrions également passer un deuxième argument pour créer un navigateur d'onglets inférieur pour contrôler la disposition et le style des 47 00:03:21,260 --> 00:03:22,130 onglets en 48 00:03:22,130 --> 00:03:28,190 général, nous pouvons faire de même pour le tiroir. Pour créer un navigateur de tiroir, nous pouvons passer un deuxième 49 00:03:28,220 --> 00:03:31,320 argument qui est un objet configuré pour le navigateur de tiroir lui-même 50 00:03:31,550 --> 00:03:33,290 et là, nous obtenons quelques options. 51 00:03:33,320 --> 00:03:37,880 Encore une fois, les documents officiels vous donnent une liste exhaustive de tout ce que vous pouvez 52 00:03:37,880 --> 00:03:42,980 configurer, par exemple, vous avez vos options de contenu qui vous permettent de contrôler le contenu dans le tiroir, donc 53 00:03:42,980 --> 00:03:47,730 les éléments du tiroir à la fin et là, vous avez un tas de les paramètres que vous 54 00:03:47,930 --> 00:03:53,960 pouvez configurer, par exemple, vous pouvez définir une couleur de teinte active qui consiste essentiellement à colorer un élément lorsqu'il est actif et 55 00:03:54,090 --> 00:03:59,870 là, nous pouvons le définir sur des couleurs, accentuer la couleur si nous le voulons, au lieu d'utiliser ce bleu par défaut 56 00:03:59,870 --> 00:04:00,320 et 57 00:04:00,320 --> 00:04:05,170 donc maintenant, c'est orange et c'est si facile de changer ça, c'est tout ce que nous devons faire. 58 00:04:05,330 --> 00:04:08,980 Maintenant, si nous voulons également changer la police 59 00:04:09,080 --> 00:04:15,710 utilisée ici, nous pouvons également le faire. En plus de définir une couleur de teinte active ici sur les options 60 00:04:15,710 --> 00:04:17,120 de contenu, nous pouvons 61 00:04:17,120 --> 00:04:22,010 configurer un style d'étiquette ici et qui prend un objet de style qui sera appliqué au composant de texte 62 00:04:22,010 --> 00:04:24,810 sous-jacent dans le tiroir, afin que nous puissions configurer des 63 00:04:24,950 --> 00:04:32,870 choses comme le texte s'y aligner si nous voulons ou dans mon cas ici, il suffit de configurer la famille de polices et de définir ceci pour ouvrir sans, peut-être comme 64 00:04:32,870 --> 00:04:36,550 ça, pas même la version en gras. Si nous faisons cela, nous voyons clairement une différence. 65 00:04:36,550 --> 00:04:40,790 Maintenant, je vais le remettre en gras parce que c'est plus agréable, mais pour voir une différence, 66 00:04:40,880 --> 00:04:42,890 je pense que c'était clair sans gras. 67 00:04:42,920 --> 00:04:44,950 Alors maintenant, nous utilisons notre 68 00:04:44,960 --> 00:04:47,570 propre police ici, la version en gras 69 00:04:47,570 --> 00:04:48,530 et notre 70 00:04:48,530 --> 00:04:54,130 propre couleur et c'est plutôt bien je dirais, cela fonctionne bien sûr également sur Android. 71 00:04:54,170 --> 00:04:58,460 Voici comment vous pouvez travailler avec votre tiroir, comment vous pouvez également 72 00:04:58,460 --> 00:05:01,700 tout styliser là-bas et avec cela, vous avez 73 00:05:01,940 --> 00:05:07,850 appris les principaux modèles de navigation que vous pouvez ajouter à votre application à l'aide de 74 00:05:07,850 --> 00:05:09,270 la navigation React. 75 00:05:09,290 --> 00:05:15,770 Maintenant, évidemment, comme je l'ai souligné à plusieurs reprises dans ce module, il y a beaucoup à configurer, tous ces 76 00:05:15,770 --> 00:05:20,990 navigateurs ont des options de navigation et des paramètres différents pour les navigateurs eux-mêmes et, par 77 00:05:20,990 --> 00:05:26,060 conséquent, consultez les documents officiels et jouez simplement avec les différents paramètres que vous voyez là-bas 78 00:05:26,060 --> 00:05:31,820 pour expérimentez avec ce que vous pouvez faire. Les choses que j'ai montrées ici et les choses que nous avons modifiées ici 79 00:05:31,820 --> 00:05:35,000 sont probablement les choses courantes que vous souhaitez personnaliser, c'est pourquoi je les ai montrées ici, 80 00:05:35,090 --> 00:05:36,580 mais encore une fois, il y 81 00:05:36,590 --> 00:05:40,950 a tellement de choses à faire, consultez certainement les documents officiels. Pour cette application, la partie 82 00:05:40,970 --> 00:05:43,960 navigation est essentiellement terminée, il n'y a pas grand-chose 83 00:05:43,970 --> 00:05:46,410 d'autre à ajouter, maintenant il est 84 00:05:46,430 --> 00:05:50,360 temps de revoir le style général, par exemple assurez-vous que nous 85 00:05:50,360 --> 00:05:56,600 utilisons les bonnes polices partout, également dans les onglets et dans l'en-tête et pour exemple également pour le 86 00:05:56,660 --> 00:06:00,590 texte ici que nous ne sommes pas actuellement, puis remplissez également 87 00:06:00,590 --> 00:06:06,050 le reste de l'application avec de la viande. Par exemple, la page de détails ici qui a 88 00:06:06,050 --> 00:06:11,810 encore du contenu factice pour le moment et aussi notre page de filtres qui a aussi juste du contenu factice. 89 00:06:11,810 --> 00:06:14,290 C'est ce que je ferai dans le reste 90 00:06:14,330 --> 00:06:20,330 de ce module, ensuite dans le module suivant, nous nous assurerons également d'ajouter plus de logique et de pouvoir par 91 00:06:20,330 --> 00:06:25,700 exemple marquer quelque chose comme favori et donc l'ajouter ensuite aux favoris onglet qui ne fonctionne pas actuellement. 92 00:06:25,910 --> 00:06:30,470 Mais pour l'instant, terminons le style et ajoutons le reste de la mise en page et du contenu à cette application.