1 00:00:02,940 --> 00:00:09,450 Ajoutons donc ce dernier modèle de navigation principal que vous voyez dans les applications mobiles et qui a une porte latérale, bien sûr, 2 00:00:10,170 --> 00:00:16,000 la navigation à risque comme couvert par papa, ainsi que la navigation réactive, vous pouvez importer créer un tirage et 3 00:00:16,000 --> 00:00:18,740 un navigateur qui fait exactement ce que cela ressemble. 4 00:00:18,750 --> 00:00:24,690 Il nous permet de créer facilement ce modèle de navigation basé sur un dessin et il nous donne un tel dessin 5 00:00:24,750 --> 00:00:30,870 et toutes les fonctionnalités dont nous avons besoin pour contrôler la paille hors de la boîte, ce qui est bien sûr très pratique. 6 00:00:30,930 --> 00:00:35,060 Nous créons donc simplement un nouveau navigateur et je le ferai au bas de ce fichier. 7 00:00:35,490 --> 00:00:40,860 Et juste une petite note, bien sûr, vous pouvez diviser cela en plusieurs fichiers et avoir chaque 8 00:00:40,890 --> 00:00:46,550 navigateur dans son propre fichier, puis les fusionner dans un fichier en les important dans un fichier central. 9 00:00:46,560 --> 00:00:48,120 C'est quelque chose que vous pourriez faire. 10 00:00:48,120 --> 00:00:51,430 J'ai également trouvé plus facile pour ce tutoriel de tout garder dans un seul fichier. 11 00:00:51,560 --> 00:00:56,070 Un fichier trop volumineux, mais vous pourriez certainement le diviser. 12 00:00:56,340 --> 00:01:01,410 Je vais donc créer mon navigateur de dessin ici au bas de ce fichier et tout stocké dans cette constante nommée 13 00:01:01,770 --> 00:01:04,380 Navigateur principal, car à la fin c'est ce que c'est. 14 00:01:04,380 --> 00:01:10,470 Ce sera notre navigateur principal à la fin parce que l'onglet sera à l'intérieur du tirage au sort et le navigateur à 15 00:01:10,470 --> 00:01:11,880 la fin nos haps ici. 16 00:01:11,970 --> 00:01:13,190 Donc sur les deux onglets. 17 00:01:13,200 --> 00:01:19,530 Nous avons accès à ce tirage latéral et décidons que le tirage nous permet d'accéder à un tout nouvel écran qui ne fera pas 18 00:01:19,530 --> 00:01:20,880 partie de nos taps. 19 00:01:20,910 --> 00:01:25,890 Ainsi, le navigateur de dessin est au-dessus du navigateur d'onglets dans la hiérarchie. 20 00:01:26,130 --> 00:01:28,680 Alors, comment pouvons-nous configurer un tel navigateur de dessin. 21 00:01:28,830 --> 00:01:32,070 Fondamentalement, comme nous l'avons fait avant, il faut deux arguments. 22 00:01:32,070 --> 00:01:37,950 Le premier argument est un objet dans lequel nous configurons les écrans pour la justice du navigateur destructeur 23 00:01:37,950 --> 00:01:46,350 avant d'avoir des identifiants tels que les robinets ou les favoris des repas, quel que soit le navigateur approprié pour la première entrée de tiroir que 24 00:01:46,350 --> 00:01:47,570 vous souhaitez avoir. 25 00:01:47,850 --> 00:01:54,780 Et ici, je veux pointer le navigateur de l'onglet père de mon repas, car c'est ce que je veux y charger et 26 00:01:54,780 --> 00:02:02,460 sur une deuxième entrée est l'écran des filtres, nous ne devons pas oublier que nous avons un autre écran qui est l'écran des filtres que 27 00:02:02,460 --> 00:02:08,550 nous n'avons pas utilisé avant maintenant car il est temps de briller et en fait tout enveloppé comme dans 28 00:02:08,550 --> 00:02:11,130 un navigateur de pile même s'il sera vide. 29 00:02:11,130 --> 00:02:13,850 Nous avons donc également obtenu un en-tête. 30 00:02:14,130 --> 00:02:20,370 Je vais donc ajouter un autre navigateur de pile ici avec créer un navigateur de pile. 31 00:02:20,370 --> 00:02:22,130 C'est une pile très simple. 32 00:02:22,290 --> 00:02:26,670 Il n'aura qu'un seul écran et ce sera l'écran des filtres qui devra donc être importé ici 33 00:02:26,670 --> 00:02:29,190 en haut car nous ne le faisons pas encore. 34 00:02:29,340 --> 00:02:38,670 Importons l'écran des filtres ici à partir de l'écran des filtres des écrans et maintenant nous pouvons utiliser l'écran des filtres sur leur site Web non 35 00:02:38,720 --> 00:02:47,600 pas ici mais ici dans le navigateur de pile et nommé est le navigateur de filtres lire quelque chose comme ça et maintenant c'est ce 36 00:02:47,600 --> 00:02:54,450 navigateur de filtres qui peut mapper des filtres dans mon navigateur de tiroir et j'utilise uniquement un navigateur de 37 00:02:54,450 --> 00:02:59,790 pile ici, donc ils ont aussi un en-tête là-bas et pour aucune autre raison 38 00:02:59,790 --> 00:03:04,260 maintenant sur l'écran du filtre, cela fonctionnera bien sûr en une seconde, 39 00:03:04,260 --> 00:03:12,810 mais là-bas, il y a une chose que je veux faire tout de suite, je ajoutera mes options de navigation et j'y ajouterai 40 00:03:15,280 --> 00:03:24,840 un titre d'en-tête et le définirai sur des filtres ou des filtres de repas quelque chose comme ça avec cela de retour au navigateur de repas nous 41 00:03:24,840 --> 00:03:31,050 créons cette pile nous assignons le navigateur de filtres navigateur de pile à notre navigateur de dessin 42 00:03:31,050 --> 00:03:40,270 et maintenant nous devons simplement utiliser le navigateur principal ici dans notre conteneur d'application pour commencer avec la dette et maintenant si nous l'enregistrons, nous ne 43 00:03:40,270 --> 00:03:41,350 voyons rien. 44 00:03:41,350 --> 00:03:47,380 Eh bien, j'ai dit que le navigateur de tirage gérerait toute la logique pour l'ouvrir se termine 45 00:03:47,380 --> 00:03:56,020 sur la chose qu'il ne fait pas pour nous automatiquement est d'afficher une icône de menu afin qu'il ne montre pas de bouton hamburger pour nous. 46 00:03:56,020 --> 00:03:59,710 C'est quelque chose que nous devons faire et nous pouvons décider sur quels écrans le montrer. 47 00:03:59,710 --> 00:04:04,600 Et bien sûr, ce serait l'écran de catégorie car c'est l'écran racine de l'onglet 48 00:04:04,600 --> 00:04:09,320 repas et l'écran préféré parce que c'est l'écran racine de son onglet favoris. 49 00:04:09,340 --> 00:04:15,880 Donc, dans ces deux écrans, je veux ajouter cette icône de menu et je l'ajoute dans mes options de navigation comme vous 50 00:04:15,910 --> 00:04:20,390 l'avez appris parce que là, je veux l'ajouter à l'aide de l'en-tête à gauche. 51 00:04:20,410 --> 00:04:26,620 Auparavant, nous utilisions le droit d'ajouter des actions à la barre de navigation dans l'en-tête, mais ce bouton de menu se 52 00:04:26,620 --> 00:04:29,070 trouve généralement à gauche pour être ajouté ici. 53 00:04:29,350 --> 00:04:32,810 Et je vais utiliser mes boutons d'en-tête pour cela. 54 00:04:32,920 --> 00:04:37,480 Nous allons donc importer à partir des boutons d'en-tête de navigation React. 55 00:04:37,480 --> 00:04:44,970 Ce package que nous avons utilisé plus tôt à partir de là, j'importerai des boutons d'en-tête et j'élèverai également ce que nous utilisons tous 56 00:04:47,490 --> 00:04:50,280 avant et j'importerai également mon bouton d'en-tête personnalisé. 57 00:04:50,280 --> 00:04:57,660 Donc, le bouton d'en-tête du bouton d'en-tête des composants, donc le même modèle que nous avons utilisé auparavant pour ajouter cette étoile, je 58 00:04:57,690 --> 00:04:59,730 peux en effet la barre d'action. 59 00:04:59,730 --> 00:05:06,330 Maintenant, je vais le faire ici pour l'icône de menu du bouton de menu.Par conséquent, nous 60 00:05:06,360 --> 00:05:18,000 pouvons maintenant descendre vers la gauche et leurs boutons d'en-tête d'annonce cette année en tant que composant définissez le composant de bouton d'en-tête sur notre composant de bouton 61 00:05:18,000 --> 00:05:18,500 d'en-tête. 62 00:05:18,510 --> 00:05:23,610 Nous importons à partir de notre propre composant personnalisé et y ajoutons un élément qui nous permet 63 00:05:23,610 --> 00:05:28,420 de définir le titre qui devrait être le menu et puis, très important, je peux nommer. 64 00:05:28,560 --> 00:05:31,560 Et là, vous pouvez utiliser le menu IOW. 65 00:05:31,560 --> 00:05:36,570 Et d'ailleurs, vous pouvez toujours utiliser l'API de la plate-forme ici pour utiliser une icône différente pour 66 00:05:36,570 --> 00:05:38,640 Android et ISIS si vous le souhaitez. 67 00:05:38,640 --> 00:05:44,910 Et enfin, mais non des moindres, tous les add ons pressent pour faire quelque chose quand les boutons morts sont pressés. 68 00:05:44,910 --> 00:05:52,200 Et maintenant, cela devrait rendre un joli bouton de menu ici sur cet écran et en effet nous le voyons ici 69 00:05:52,830 --> 00:05:53,600 sur nous. 70 00:05:53,640 --> 00:05:55,730 Et nous le voyons également sur Android. 71 00:05:55,740 --> 00:06:00,040 Maintenant, encore une fois, si vous voulez une icône différente sur Android qui ressemble plus à une icône Android typique. 72 00:06:00,090 --> 00:06:05,550 La même chose est vraie pour les taps par la façon dont vous pouvez utiliser l'API de la plate-forme pour y 73 00:06:06,350 --> 00:06:09,680 rendre une icône différente pour gagner du temps, j'utiliserai les mêmes icônes. 74 00:06:09,720 --> 00:06:11,910 Voici donc comment nous affichons l'icône. 75 00:06:11,910 --> 00:06:18,360 Comment pouvons-nous maintenant ouvrir un tirage au sort bien pour cela, nous devons avoir accès à l'accessoire de navigation et nous n'avons 76 00:06:18,360 --> 00:06:21,420 pas cet accès dans les options de navigation comme celle-ci. 77 00:06:21,420 --> 00:06:27,330 Mais bien sûr, nous avons appris plus tôt que vous pouvez utiliser le formulaire de fonction ici où vous obtenez ensuite vos données de 78 00:06:27,330 --> 00:06:27,680 navigation. 79 00:06:27,690 --> 00:06:33,180 Vous pourriez dire dans cette fonction que vous devez alors retourner votre objet de configuration. 80 00:06:33,180 --> 00:06:36,720 Donc, ici, vous devez retourner un objet à la fin. 81 00:06:36,930 --> 00:06:40,170 Et maintenant, les données de navigation ont un tel accessoire de navigation. 82 00:06:40,170 --> 00:06:46,380 Alors maintenant, ici, sous presse, nous pouvons dire que la navigation par points de données de navigation sera désormais 83 00:06:46,380 --> 00:06:50,350 disponible, fournie par react navigation qui exécute cette fonction à la fin. 84 00:06:50,550 --> 00:06:54,030 Et là, vous aurez une méthode de dessin à bascule. 85 00:06:54,030 --> 00:06:59,850 Vous auriez également un tirage ouvert si vous savez que vous voulez seulement l'ouvrir, mais basculer le tirage l'ouvrira s'il est 86 00:06:59,850 --> 00:07:01,890 fermé et le fermera s'il est ouvert. 87 00:07:01,890 --> 00:07:06,440 Donc, ici, vous devez basculer le tirage et le tiret devrait ouvrir le menu latéral. 88 00:07:06,440 --> 00:07:12,570 Donc, si nous enregistrons maintenant que le tiroir s'ouvre, nous pouvons travailler sur le style et le texte que 89 00:07:12,570 --> 00:07:20,890 nous voyons ici dans une seconde, mais voici comment vous pouvez ouvrir ce tiroir maintenant avant de prendre soin de ce à quoi cela ressemble ici. 90 00:07:20,930 --> 00:07:22,690 Assurons-nous d'avoir à dire un favori. 91 00:07:22,700 --> 00:07:27,050 Et bien sûr, vous pouvez tous déposer une vidéo et le faire vous-même ici car les étapes seront 92 00:07:27,050 --> 00:07:29,570 les mêmes que pour les catégories de repas ici. 93 00:07:29,570 --> 00:07:34,430 C'est une bonne pratique à offrir, mais après cette courte pause, vous devez passer cette vidéo, 94 00:07:36,210 --> 00:07:38,520 nous le ferons ensemble, donc avez-vous réussi. 95 00:07:38,520 --> 00:07:46,400 Faisons-le ensemble et à la fin, il s'agit simplement de copier cette configuration ici, l'écran des favoris 2D, donc je vais copier toute la 96 00:07:47,060 --> 00:07:53,210 configuration des options de navigation de l'écran des catégories vers l'écran préféré et remplacer mon option de navigation 97 00:07:53,660 --> 00:07:58,760 avec, bien sûr, cela signifie que je devez nous renommer ici en écran préféré 98 00:07:58,760 --> 00:08:05,450 et changer ici le titre en vos favoris mais maintenant j'ai déjà cette fonction de création d'options de navigation dynamique 99 00:08:05,450 --> 00:08:12,130 ici où je dois basculer dessiner appeler ici l'icône I quand il utilise le même que nous avons juste à 100 00:08:12,170 --> 00:08:17,720 faire Bien sûr, nous importons tout ce dont nous avons besoin pour importer et pour papa, 101 00:08:17,720 --> 00:08:25,100 nous pouvons récupérer les importations ici à partir de l'écran des catégories ainsi que du package de navigation ou de boutons React. 102 00:08:25,100 --> 00:08:27,020 Et à partir de notre propre bouton d'en-tête. 103 00:08:27,020 --> 00:08:34,920 Prenez cela et ajouté ici sur l'écran préféré maintenant avec papa si nous avons enregistré car cela devrait être tout maintenant sur l'écran préféré, 104 00:08:34,930 --> 00:08:41,100 nous devons également dessiner et vous pouvez l'ouvrir là aussi, nous ne pouvons pas simplement l'ouvrir en passant si 105 00:08:41,120 --> 00:08:46,180 nous cliquons sur le rôle des filtres à prendre dans l'écran du filtre là-bas, nous 106 00:08:46,180 --> 00:08:52,160 n'avons tout simplement pas de retour en arrière, mais c'est en fait quelque chose que nous pouvons tous 107 00:08:52,220 --> 00:09:02,560 corriger tout de suite à cause de l'écran du filtre, je veux aussi simplement avoir un tirage en haut, ainsi de suite écran de filtre J'ajouterai également mes importations ici Les boutons 108 00:09:02,680 --> 00:09:07,280 d'en-tête de Whip se terminent, puis toutes les options d'ajout par navigation ici. 109 00:09:07,570 --> 00:09:13,780 Copiez donc les options de navigation de l'écran préféré de cette fonction dynamique et ajoutez-la à l'écran des 110 00:09:13,840 --> 00:09:19,900 filtres et remplacez bien sûr l'escalier de l'option de navigation, puis changez cette année en écran de 111 00:09:19,960 --> 00:09:27,730 filtres et changez de titre pour filtrer les repas ou tout ce que vous voulez ici et avec cela, nous devrions également avoir 112 00:09:27,940 --> 00:09:34,600 un tirage sur l'écran du filtre et cela nous permet de revenir à nos repas maintenant, il manque deux ou 113 00:09:34,600 --> 00:09:35,580 trois choses. 114 00:09:35,620 --> 00:09:40,870 Par exemple, sur l'écran du filtre, l'en-tête est totalement différent et donc ici sur Android, je ne 115 00:09:40,870 --> 00:09:46,930 peux même pas voir mon bouton parce qu'il est blanc le texte ici n'est pas le texte que je veux 116 00:09:46,930 --> 00:09:55,570 afficher Je veux également utiliser des couleurs différentes ici peut-être une police différente donc il y a du travail à faire mais la fonctionnalité de dessin de base a 117 00:09:55,720 --> 00:09:59,820 été ajoutée et comme vous le voyez à nouveau avec très peu d'effort. 118 00:09:59,890 --> 00:10:03,550 Prenons maintenant soin de styliser le dessin et de filtrer l'écran.