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,
la navigation à risque comme couvert par papa, ainsi que la navigation réactive, vous pouvez importer créer un tirage et
un navigateur qui fait exactement ce que cela ressemble.
Il nous permet de créer facilement ce modèle de navigation basé sur un dessin et il nous donne un tel dessin
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.
Nous créons donc simplement un nouveau navigateur et je le ferai au bas de ce fichier.
Et juste une petite note, bien sûr, vous pouvez diviser cela en plusieurs fichiers et avoir chaque
navigateur dans son propre fichier, puis les fusionner dans un fichier en les important dans un fichier central.
C'est quelque chose que vous pourriez faire.
J'ai également trouvé plus facile pour ce tutoriel de tout garder dans un seul fichier.
Un fichier trop volumineux, mais vous pourriez certainement le diviser.
Je vais donc créer mon navigateur de dessin ici au bas de ce fichier et tout stocké dans cette constante nommée
Navigateur principal, car à la fin c'est ce que c'est.
Ce sera notre navigateur principal à la fin parce que l'onglet sera à l'intérieur du tirage au sort et le navigateur à
la fin nos haps ici.
Donc sur les deux onglets.
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
partie de nos taps.
Ainsi, le navigateur de dessin est au-dessus du navigateur d'onglets dans la hiérarchie.
Alors, comment pouvons-nous configurer un tel navigateur de dessin.
Fondamentalement, comme nous l'avons fait avant, il faut deux arguments.
Le premier argument est un objet dans lequel nous configurons les écrans pour la justice du navigateur destructeur
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
vous souhaitez avoir.
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
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
nous n'avons pas utilisé avant maintenant car il est temps de briller et en fait tout enveloppé comme dans
un navigateur de pile même s'il sera vide.
Nous avons donc également obtenu un en-tête.
Je vais donc ajouter un autre navigateur de pile ici avec créer un navigateur de pile.
C'est une pile très simple.
Il n'aura qu'un seul écran et ce sera l'écran des filtres qui devra donc être importé ici
en haut car nous ne le faisons pas encore.
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
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
navigateur de filtres qui peut mapper des filtres dans mon navigateur de tiroir et j'utilise uniquement un navigateur de
pile ici, donc ils ont aussi un en-tête là-bas et pour aucune autre raison
maintenant sur l'écran du filtre, cela fonctionnera bien sûr en une seconde,
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
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
créons cette pile nous assignons le navigateur de filtres navigateur de pile à notre navigateur de dessin
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
voyons rien.
Eh bien, j'ai dit que le navigateur de tirage gérerait toute la logique pour l'ouvrir se termine
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.
C'est quelque chose que nous devons faire et nous pouvons décider sur quels écrans le montrer.
Et bien sûr, ce serait l'écran de catégorie car c'est l'écran racine de l'onglet
repas et l'écran préféré parce que c'est l'écran racine de son onglet favoris.
Donc, dans ces deux écrans, je veux ajouter cette icône de menu et je l'ajoute dans mes options de navigation comme vous
l'avez appris parce que là, je veux l'ajouter à l'aide de l'en-tête à gauche.
Auparavant, nous utilisions le droit d'ajouter des actions à la barre de navigation dans l'en-tête, mais ce bouton de menu se
trouve généralement à gauche pour être ajouté ici.
Et je vais utiliser mes boutons d'en-tête pour cela.
Nous allons donc importer à partir des boutons d'en-tête de navigation React.
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
avant et j'importerai également mon bouton d'en-tête personnalisé.
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
peux en effet la barre d'action.
Maintenant, je vais le faire ici pour l'icône de menu du bouton de menu.Par conséquent, nous
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
d'en-tête.
Nous importons à partir de notre propre composant personnalisé et y ajoutons un élément qui nous permet
de définir le titre qui devrait être le menu et puis, très important, je peux nommer.
Et là, vous pouvez utiliser le menu IOW.
Et d'ailleurs, vous pouvez toujours utiliser l'API de la plate-forme ici pour utiliser une icône différente pour
Android et ISIS si vous le souhaitez.
Et enfin, mais non des moindres, tous les add ons pressent pour faire quelque chose quand les boutons morts sont pressés.
Et maintenant, cela devrait rendre un joli bouton de menu ici sur cet écran et en effet nous le voyons ici
sur nous.
Et nous le voyons également sur Android.
Maintenant, encore une fois, si vous voulez une icône différente sur Android qui ressemble plus à une icône Android typique.
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
rendre une icône différente pour gagner du temps, j'utiliserai les mêmes icônes.
Voici donc comment nous affichons l'icône.
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
pas cet accès dans les options de navigation comme celle-ci.
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
navigation.
Vous pourriez dire dans cette fonction que vous devez alors retourner votre objet de configuration.
Donc, ici, vous devez retourner un objet à la fin.
Et maintenant, les données de navigation ont un tel accessoire de navigation.
Alors maintenant, ici, sous presse, nous pouvons dire que la navigation par points de données de navigation sera désormais
disponible, fournie par react navigation qui exécute cette fonction à la fin.
Et là, vous aurez une méthode de dessin à bascule.
Vous auriez également un tirage ouvert si vous savez que vous voulez seulement l'ouvrir, mais basculer le tirage l'ouvrira s'il est
fermé et le fermera s'il est ouvert.
Donc, ici, vous devez basculer le tirage et le tiret devrait ouvrir le menu latéral.
Donc, si nous enregistrons maintenant que le tiroir s'ouvre, nous pouvons travailler sur le style et le texte que
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.
Assurons-nous d'avoir à dire un favori.
Et bien sûr, vous pouvez tous déposer une vidéo et le faire vous-même ici car les étapes seront
les mêmes que pour les catégories de repas ici.
C'est une bonne pratique à offrir, mais après cette courte pause, vous devez passer cette vidéo,
nous le ferons ensemble, donc avez-vous réussi.
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
configuration des options de navigation de l'écran des catégories vers l'écran préféré et remplacer mon option de navigation
avec, bien sûr, cela signifie que je devez nous renommer ici en écran préféré
et changer ici le titre en vos favoris mais maintenant j'ai déjà cette fonction de création d'options de navigation dynamique
ici où je dois basculer dessiner appeler ici l'icône I quand il utilise le même que nous avons juste à
faire Bien sûr, nous importons tout ce dont nous avons besoin pour importer et pour papa,
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.
Et à partir de notre propre bouton d'en-tête.
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é,
nous devons également dessiner et vous pouvez l'ouvrir là aussi, nous ne pouvons pas simplement l'ouvrir en passant si
nous cliquons sur le rôle des filtres à prendre dans l'écran du filtre là-bas, nous
n'avons tout simplement pas de retour en arrière, mais c'est en fait quelque chose que nous pouvons tous
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
d'en-tête de Whip se terminent, puis toutes les options d'ajout par navigation ici.
Copiez donc les options de navigation de l'écran préféré de cette fonction dynamique et ajoutez-la à l'écran des
filtres et remplacez bien sûr l'escalier de l'option de navigation, puis changez cette année en écran de
filtres et changez de titre pour filtrer les repas ou tout ce que vous voulez ici et avec cela, nous devrions également avoir
un tirage sur l'écran du filtre et cela nous permet de revenir à nos repas maintenant, il manque deux ou
trois choses.
Par exemple, sur l'écran du filtre, l'en-tête est totalement différent et donc ici sur Android, je ne
peux même pas voir mon bouton parce qu'il est blanc le texte ici n'est pas le texte que je veux
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
été ajoutée et comme vous le voyez à nouveau avec très peu d'effort.
Prenons maintenant soin de styliser le dessin et de filtrer l'écran.