Ajouter un bouton à l'en-tête comme je le veux ici, un tel bouton de navigation, nécessite un peu
de travail supplémentaire au départ, mais par la suite, c'est très simple.
Nous devons tout d'abord installer un package supplémentaire pour vous faciliter la tâche car théoriquement, vous avez
ici beaucoup de puissance.
Vous pouvez ajouter de tels boutons à l'aide des options de
navigation, donc ici sur le MealDetailScreen, à côté de la définition d'un titre d'en-tête, vous pouvez définir headerLeft et headerRight pour
ajouter des boutons à gauche et à droite du titre.
En règle générale, vous souhaitez utiliser la droite, car la gauche est réservée au bouton Précédent et,
généralement, vous pouvez simplement y retourner un
élément jsx, vous pouvez donc simplement le mettre en texte, comme favori, c'est quelque chose que vous pouvez faire ici et me
laisser réellement affichez-le et redémarrez donc le serveur avant d'utiliser un package,
car si vous pouvez simplement ajouter un composant ici, obtenir le bon style, le bon positionnement pour toutes les différentes
plates-formes, surtout si vous n'utilisez pas seulement du texte ici, mais aussi peut-être une icône que vous voulez
généralement avoir là-bas, qui peut être vraiment encombrante et c'est pourquoi nous installerons un package supplémentaire
qui rend cette façon plus facile qu'elle ne l'est autrement.
Alors permettez-moi de redémarrer cela avec npm start, pas npm install, npm start et avec le fonctionnement
à nouveau, rechargeons ceci ici sur iOS et laissez-moi vous montrer ce que nous avons ici maintenant que je rend un texte.
Vous voyez ce texte ici,
donc cela devient
rendu mais comme je l'ai dit, avoir le bon rembourrage, le bon alignement, le bon style, la bonne taille, super ennuyeux
si vous le faites tout seul parce que vous ne faites pas seulement ceci pour un appareil
mais pour de nombreux appareils.
C'est pourquoi nous allons installer un package spécial ici qui nous aide à cela.
Donc, quittez le processus pour l'instant, le processus de développement en cours et utilisez
npm install --save et installez le package react-navigation-header-buttons qui est un package qui vous aide, étonnamment si vous regardez
le nom, avec la configuration quelques boutons dans votre en-tête, donc dans
cette barre d'outils supérieure ici. Il s'agit d'un package qui facilitera ensuite l'ajout de tels boutons. Avec cela ajouté, je redémarrerai mon serveur de
développement avec npm start et maintenant je créerai moi-même un nouveau composant d'aide dans le dossier des composants que
je nommerai helper, un bouton d'en-tête, pas helper, un bouton d'en-tête. Là, je vais importer React à
partir de React parce que ce sera un composant React normal que nous
créerons ici et importera quelque chose de ce nouveau package react-navigation-header-buttons que nous venons d'installer
et que quelque chose que j'importe est un bouton d'en-tête. En plus de cela, importons également quelque chose de @ expo / vector-icons qui devrait être
disponible mais juste pour être super sûr, vous pouvez certainement aussi exécuter npm install --save @ expo /
vector-icons pour installer ce paquet aussi parce que vous '' Nous en aurons besoin et la chose que nous devons importer à
partir de ce paquet est les ionicons. Bien sûr, vous pouvez utiliser n'importe quel jeu d'icônes que
vous voulez, j'ai couvert les icônes plus tôt dans ce cours et vous êtes libre d'utiliser n'importe quelle icône que vous voulez
dans votre bouton d'en-tête, je vais juste travailler avec des ionicons parce que je les utilise dans le reste
de ce cours aussi mais encore une fois, vous pouvez utiliser toutes les icônes que vous voulez et bien
sûr dans l'en-tête, vous n'avez pas besoin d'utiliser des icônes, vous pouvez également utiliser d'autres textes mais généralement, vous utilisez des icônes
bien sûr, c'est ce que les utilisateurs sont généralement utilisés à partir d'autres applications.
De plus, je vais également importer des couleurs à partir de constantes / Couleurs et maintenant créer mon composant ici et c'est, disons, un bouton
d'en-tête personnalisé ou simplement un bouton d'en-tête, quel que soit le nom que vous voulez, mais nous l'importons déjà, nous
devez choisir un nom différent ici pour ne pas avoir de conflit de
noms et cela recevra des accessoires et renverra le bouton d'en-tête que nous obtenons de ce paquet que nous avons installé, mais nous
ajouterons bientôt une configuration supplémentaire, c'est pourquoi je suis en l'enveloppant dans un composant
séparé afin que nous n'ayons pas à répéter cette configuration pour chaque bouton que nous utilisons
n'importe où dans
l'application, puis bien sûr, j'exporterai mon bouton d'en-tête personnalisé par défaut.
Alors maintenant, ce bouton d'en-tête que j'utilise ici à partir de ce paquet que nous avons installé, qui recevra tout d'abord tous
les accessoires que nous obtenons avec cette belle petite astuce que nous pouvons utiliser dans React où nous transmettons
tous les accessoires avec ce raccourci en retirant tous les paires clé-valeur et en les passant à cet objet
qu'est finalement ce composant.
C'est donc la première chose, nous devons transmettre tous les accessoires et c'est
super important,
n'oubliez pas cela sinon cela ne fonctionnera pas correctement.
La deuxième étape est que nous ajoutons le composant Icon prop avec un I majuscule, c'est un accessoire que le bouton d'en-tête que nous obtenons
de ce paquet attend et là je passe des ionicons. Donc, cela attend un package d'icônes
vectorielles qui peut être utilisé pour le rendu des icônes, ne doit pas être des ionicons mais doit
provenir soit de @ expo / vector-icons, soit du package d'icônes vectorielles React Native sous-jacent sur lequel
le package expo est basé. et vous pouvez également analyser une taille d'icône et je normaliserai cela
de sorte que tous mes boutons d'en-tête dans l'ensemble de l'application aient la
même taille de 23 que j'ai trouvé fonctionner assez bien. Enfin, je définirai également une couleur ici et j'utiliserai
ma couleur principale, bien que nous devions bien sûr nous différencier par plate-forme. Je vais donc également importer la plate-forme à partir de React Native
car sur Android, notre en-tête aura la couleur principale comme arrière-plan, donc là, nous voulons utiliser une
couleur d'icône de blanc.
Alors là, je vais vérifier la plateforme. os, si c'est égal à Android, alors je veux utiliser du blanc ici et
seulement si c'est iOS, je veux utiliser la couleur primaire.
Alors maintenant, nous avons ce bouton d'en-tête préconfiguré,
maintenant nous pouvons l'utiliser à l'endroit, dans le composant où nous voulons l'ajouter à notre en-tête et c'est
le MealDetailScreen dans ce cas. Là, nous devons maintenant importer quelque
chose d'autre à partir du package nouvellement installé, donc à partir
de react-navigation-header-buttons, à partir de ce package, ici nous devons installer ou importer des boutons d'en-tête, donc pas le bouton d'en-tête
que nous utilisons dans l'autre fichier mais boutons d'en-tête, pluriel. Nous ajoutons ceci ici parce que maintenant
là-bas où nous configurons les options de navigation pour ce composant, au lieu d'utiliser notre composant
texte là-bas, je veux utiliser des boutons d'en-tête, ce composant, j'ai simplement
ajouté l'importation pour et enrouler cela autour d'un autre élément que nous avons à importer à partir des
boutons d'en-tête de navigation de réaction et c'est l'élément. L'élément est un autre composant que nous importons
que nous pouvons maintenant utiliser entre les balises d'ouverture et de
fermeture des boutons d'en-tête, donc ici nous ajoutons l'élément et l'élément est un composant à fermeture automatique où nous décrivons l'icône que nous
voulons rendre à la fin. Nous pouvons également donner à ce titre un titre qui
serait rendu en tant que solution de rechange et je nommerai ce favori,
mais nous ne le verrons normalement pas, à la place
ici, je peux également définir un nom d'icône et maintenant cela devrait être, par exemple ios- étoile qui est une icône d'ionicons valide et vous pouvez rechercher dans la liste @ expo / vector-icons
que je vous ai montrée plus tôt dans le cours que vous trouverez également jointe à cette vidéo pour les
icônes possibles que vous pouvez utiliser ici.
Assurez-vous simplement que vous utilisez une icône du jeu d'icônes que vous avez utilisé dans vos boutons d'en-tête,
donc dans mon cas, des ionicons.
Maintenant, cela indique quelle icône
utiliser, maintenant ici, nous pouvons également ajouter onPress pour enregistrer une fonction qui devrait être déclenchée lorsque cette icône
est pressée ou lorsque cet élément dans l'en-tête est pressé
et pour l'instant je dirai simplement marquer comme favori ici, connectez-le dans la console afin que nous voyions que cela a fonctionné.
Nous n'en sommes pas encore là car nous n'utilisons pas notre
bouton d'en-tête personnalisé, c'est la dernière pièce manquante.
Nous devons importer ce composant que
nous avons créé, donc importez le bouton d'en-tête à partir des composants, puis là, à partir du bouton d'en-tête, c'est le
bouton sur lequel nous avons travaillé et nous le transmettons aux boutons d'en-tête ici car cela attend un accessoire de composant de bouton d'en-tête
où nous pointons le composant qui devrait être utilisé pour rendre cet élément à la fin.
Maintenant, tout cela est très complexe, comme vous pouvez le voir, beaucoup de composants imbriqués, c'est juste
une configuration qui est un peu lourde la première fois que vous le faites, mais lorsque vous l'utilisez ensuite dans d'autres
composants, il s'agit vraiment de copier la même configuration ici, en changeant le titre, en changeant l'icône
et en changeant la logique et vous y êtes, donc c'est tout ce que vous
avez à faire à l'avenir, c'est juste
la configuration initiale qui est un travail supplémentaire ici. Avec toute cette configuration cependant, si
nous enregistrons maintenant
cela, nous devrions pouvoir voir notre étoile ici. Ceci est l'icône que nous voyons et nous pouvons appuyer
dessus et comme j'appuie dessus, vous verrez que la marque préférée est connectée ici dans la console. Voyons également que sur Android, nous avons toujours l'étoile et
si j'appuie sur cette étoile ici, nous voyons également la
marque comme favorite, donc ça marche. Une petite note latérale que je viens de voir si nous avons plusieurs recettes, nous pourrions vouloir un style
supplémentaire, totalement indépendant du bouton d'en-tête, juste le voir. Donc, dans le MealItem. fichier js, sur l'élément de repas, je
vais en fait ajouter une marge verticale de 10, encore une fois, ce n'est
pas quelque chose dont vous avez besoin ici, juste là pour vous assurer que cela semble plus agréable si nous avons plusieurs
articles.
Ce qui est important ici, bien sûr, c'est que nous avons notre bouton d'en-tête, cette icône et c'est ainsi
que vous pouvez ajouter des boutons ou des éléments d'icônes ici à votre en-tête
et bien sûr, vous pouvez en ajouter plusieurs. Ici, dans l'écran de détail du repas, vous
pouvez avoir plusieurs de ces articles entre les boutons d'en-tête ici que vous configurez sur headerRight sur les options de navigation.
Voici comment vous ajoutez
des éléments ici, vous pouvez en avoir plusieurs, par exemple ici, nous pourrions également avoir ios-star-contour qui est une autre icône qui semble un peu
différente afin que nous puissions voir la différence ici, maintenant nous en
avons deux ici .
C'est donc possible, bien sûr, vous ne devriez pas surcharger cela pour que votre interface utilisateur reste propre et fonctionne, mais
c'est ainsi que vous pouvez ajouter des icônes ici à votre écran. Soit dit en passant, l'avertissement que je reçois ici concernant les doubles clés, le titre
ici est également utilisé comme clé pour vos articles, donc si vous avez plusieurs articles, vous ne
devriez pas utiliser le même titre, mais je viens de l'ajouter
pour à des fins de démonstration de toute façon, donc je vais simplement m'en débarrasser et nous sommes bons.
Maintenant, notre icône étoile ne fait rien encore, c'est quelque chose que
nous ajouterons plus tard, mais au moins nous le voyons et c'est vraiment important dans un module où nous
parlons de navigation et de travail avec l'en-tête.