Commençons par styliser le tiroir sur l'écran des filtres, ce
n'est pas difficile, c'est
quelque chose que nous avons fait auparavant. Dans le navigateur de filtres ici
dans le navigateur de pile, nous n'avons finalement qu'à configurer les options de navigation par défaut que
nous utilisons également pour le navigateur fav dans notre navigateur de repas. Nous pouvons donc simplement copier ce deuxième objet de configuration ici
et l'ajouter sur notre navigateur de filtres ici comme deuxième argument pour créer un navigateur de pile.
Bien sûr, nous pouvons supprimer cette ligne
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
de barre d'action.
C'est donc un changement simple mais utile, maintenant pour le tiroir lui-même, qu'en est-il de
ce look ici et du style du tiroir?
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
cette valeur par défaut d'avoir une liste avec effet d'entraînement ici sur Android et un effet différent sur iOS,
mais je
pense que c'est une belle valeur par défaut que je ne veux pas changer.
Si vous le souhaitez, vous pouvez cependant remplacer l'intégralité de ce composant qui est rendu ici et attaché, vous trouverez
un lien vers les documents officiels où vous pourrez en savoir plus au cas où vous auriez besoin de
le personnaliser.
Ce que je veux bien sûr changer, c'est le style de ces éléments et le texte qui est affiché ici.
Ce n'est pas
trop difficile, commençons par le texte. En tant que texte, comme vous pouvez le constater, il prend par défaut
ces identifiants ici, les filtres favoris des repas.
Maintenant, bien sûr, cela peut le faire, mais les plats favoris, ce n'est pas
vraiment un texte que nous voulons montrer à nos utilisateurs.
Par conséquent, je veux remplacer cela et nous pouvons le faire avec les bonnes anciennes options de navigation
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
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
chaque écran de ce navigateur, nous pouvons définir des options de navigation pour l'ensemble du navigateur lui-même, qui
ne sont alors pas pour les écrans du navigateur, mais pour le navigateur lorsqu'il est utilisé
comme écran, ce
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
juste pour que nous voyions que cela a
un effet, maintenant nous le
voyons ici, c'est donc là que nous pouvons définir cela, une option.
Alternativement ici lors de la création du navigateur de tiroir, nous pouvons utiliser ce formulaire plus long où
nous configurons un écran et où nous configurons ensuite les options de navigation ici et ce ne
sont que des alternatives où
aucun des deux n'est
meilleur ou pire, vous pouvez utiliser l'un des deux eux et maintenant ici, je vais mettre une étiquette de
tiroir sur les repas disons, cela a plus de sens pour moi que les plats préférés.
Donc, si j'ouvre maintenant le tiroir, je vois des repas et des filtres. Pour les filtres, je n'ai plus remplacé le titre
car je suis d'accord avec la valeur par défaut de prendre mon
identifiant mais pour les repas, je l'ai remplacé.
Maintenant, qu'en est-il du style, de la couleur, etc.?
Bien sûr, cela peut aussi être contrôlé. Eh bien, comme par exemple avec les onglets où nous
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
onglets en
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
argument qui est un objet configuré pour le navigateur de tiroir lui-même
et là, nous obtenons quelques options.
Encore une fois, les documents officiels vous donnent une liste exhaustive de tout ce que vous pouvez
configurer, par exemple, vous avez vos options de contenu qui vous permettent de contrôler le contenu dans le tiroir, donc
les éléments du tiroir à la fin et là, vous avez un tas de les paramètres que vous
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
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
et
donc maintenant, c'est orange et c'est si facile de changer ça, c'est tout ce que nous devons faire.
Maintenant, si nous voulons également changer la police
utilisée ici, nous pouvons également le faire. En plus de définir une couleur de teinte active ici sur les options
de contenu, nous pouvons
configurer un style d'étiquette ici et qui prend un objet de style qui sera appliqué au composant de texte
sous-jacent dans le tiroir, afin que nous puissions configurer des
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
ça, pas même la version en gras. Si nous faisons cela, nous voyons clairement une différence.
Maintenant, je vais le remettre en gras parce que c'est plus agréable, mais pour voir une différence,
je pense que c'était clair sans gras.
Alors maintenant, nous utilisons notre
propre police ici, la version en gras
et notre
propre couleur et c'est plutôt bien je dirais, cela fonctionne bien sûr également sur Android.
Voici comment vous pouvez travailler avec votre tiroir, comment vous pouvez également
tout styliser là-bas et avec cela, vous avez
appris les principaux modèles de navigation que vous pouvez ajouter à votre application à l'aide de
la navigation React.
Maintenant, évidemment, comme je l'ai souligné à plusieurs reprises dans ce module, il y a beaucoup à configurer, tous ces
navigateurs ont des options de navigation et des paramètres différents pour les navigateurs eux-mêmes et, par
conséquent, consultez les documents officiels et jouez simplement avec les différents paramètres que vous voyez là-bas
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
sont probablement les choses courantes que vous souhaitez personnaliser, c'est pourquoi je les ai montrées ici,
mais encore une fois, il y
a tellement de choses à faire, consultez certainement les documents officiels. Pour cette application, la partie
navigation est essentiellement terminée, il n'y a pas grand-chose
d'autre à ajouter, maintenant il est
temps de revoir le style général, par exemple assurez-vous que nous
utilisons les bonnes polices partout, également dans les onglets et dans l'en-tête et pour exemple également pour le
texte ici que nous ne sommes pas actuellement, puis remplissez également
le reste de l'application avec de la viande. Par exemple, la page de détails ici qui a
encore du contenu factice pour le moment et aussi notre page de filtres qui a aussi juste du contenu factice.
C'est ce que je ferai dans le reste
de ce module, ensuite dans le module suivant, nous nous assurerons également d'ajouter plus de logique et de pouvoir par
exemple marquer quelque chose comme favori et donc l'ajouter ensuite aux favoris onglet qui ne fonctionne pas actuellement.
Mais pour l'instant, terminons le style et ajoutons le reste de la mise en page et du contenu à cette application.