Je veux donc avoir un bouton de sauvegarde dans mon en-tête et pour cela bien sûr, nous devons ajouter des options de navigation à l'écran de la
carte et utiliser le formulaire de fonction là-bas, afin que nous ayons accès à cette navigation, cet objet avec
l'objet de navigation et là-bas , Je veux retourner mon objet de configuration.
Vous pouvez ajouter un titre d'en-tête, mais je suis en fait
heureux sans celui-ci, mais je veux définir l'en-tête ici et maintenant important, ici vous pouvez bien sûr
utiliser des boutons d'en-tête et rendre une belle icône mais en fait, je vais rendre du texte ici. Je vais donc importer le composant texte ou m'assurer
que vous l'avez bien importé. Je vais restituer du texte ici où
je dirai simplement enregistrer et vous pouvez bien sûr également ajouter une vérification de
la plate-forme
pour rendre ce majuscule sur Android si vous le souhaitez, je dirai simplement enregistrer comme ça, puis ajouter un style ici où J'ajoute le
style de texte de mon bouton d'en-tête et autour de cela, je veux avoir une vue tactile,
donc je vais utiliser l'opacité tactile ici que vous devez donc également importer, pas à partir de
là mais en fait à partir de React Native, donc l'opacité tactile doit être importée de React Native et avec celui importé,
nous pouvons envelopper ce texte pour créer nos propres boutons pour ainsi dire et là, je veux également ajouter un
style et ce style aura un identifiant de bouton d'en-tête, disons. Maintenant, en appuyant sur cela, je veux enregistrer ce que nous avons ajouté ou enregistrer notre emplacement que nous avons choisi,
mais c'est quelque chose que je ferai dans une seconde, pour le moment, stylisons cela. Donc là-bas dans la feuille de style, pour le bouton d'en-tête qui
est cette opacité tactile, j'ajouterai une marge horizontale de 20 pour avoir un certain espacement autour du bouton à gauche et à droite et sur le
texte du bouton d'en-tête ici, c'est bien sûr en haut à vous ce que vous voulez ajouter là-bas,
mais je vais ajouter une taille de police de 16 disons et important, la couleur. Pour cela, j'ai besoin de l'API de plate-forme car la couleur
doit différer, car c'est sur l'en-tête qui a un fond uni sur Android mais pas sur iOS,
je peux définir ma couleur ici, ma couleur de texte sur Platform. OS est égal à Android, donc pour vérifier cela et sur Android, je le
définirai sur blanc et sinon, je le définirai sur Couleurs. primaire et pour cela,
comme toujours, assurez-vous d'importer vos couleurs constantes de là-haut.
Alors maintenant, nous avons le bouton Enregistrer, lorsque nous appuyons sur le bouton Enregistrer, je veux déclencher une fonction qui devrait être définie
dans le composant et c'est aussi quelque chose que nous avons fait plusieurs fois au cours, je vous ai montré comment
vous pouvez communiquer entre votre composant et aussi vos options de navigation ici. Nous pouvons donc essentiellement ajouter une nouvelle fonction
ici, enregistrer le gestionnaire d'emplacement choisi, quel que soit le nom que vous souhaitez lui donner et cette fonction ou une référence à cette fonction doit
être transmise aux options de navigation et pour cela, nous pouvons utiliser le
bon crochet de l'ancien effet d'utilisation et utilisez le rappel pour éviter cette boucle infinie si vous vous en
souvenez et nous pouvons donc envelopper cela avec utiliser le rappel et ensuite utiliser l'effet ici pour dire à nos options de navigation à ce sujet
en utilisant les paramètres de navigation des accessoires et ensuite je veux définir mon paramètre de localisation de sauvegarde ici au gestionnaire d'emplacement de sauvegarde choisi, donc passez une référence
à cette fonction, à ce paramètre ou avec ce paramètre à mes en-têtes et l'effet d'utilisation dépend bien
sûr de la fonction de gestionnaire d'emplacement de choix d'enregistrement, donc je vais l'ajouter comme dépendance ici et important
maintenant, utiliser le rappel ici a également un tableau de dépendances car ici, je veux essentiellement quitter cette page et revenir en arrière,
donc ici je peux utiliser la navigation des accessoires pour revenir en arrière
et nous allons le modifier dans une seconde mais pour l'instant, nous peut le faire.
Et donc, normalement bien sûr, cette fonction de retour serait ma dépendance mais pour éviter une boucle infinie, avec cette approche que nous
devons utiliser en utilisant des paramètres pour mettre à jour le composant sur lequel nous sommes déjà,
je vais en fait ajouter un tableau vide ici en tant que dépendance, afin que cette fonction ne soit pas reconstruite
en ce moment.
Donc, avec cela, nous pouvons extraire ce paramètre d'emplacement de sauvegarde dans notre en-tête.
Alors ici, je veux pointer ma fonction de sauvegarde que j'obtiens avec navData. la navigation. getParam pointant sur l'identifiant de l'emplacement de
sauvegarde, puis la fonction de sauvegarde est la fonction que je connecte au gestionnaire onPress
sur l'opacité tactile.
Donc, cela devrait déclencher cette fonction de sauvegarde, cette fonction de gestionnaire d'emplacement choisi ici. Avec cela enregistré si nous revenons en arrière, essayons, allons
chercher sur la
carte et si je clique maintenant sur enregistrer, il devrait simplement revenir en arrière et c'est le cas.
Cela fonctionne, mais bien sûr, pour l'instant, je ne sauvegarde aucun emplacement, je n'utilise aucun emplacement, c'est
la prochaine étape et pour
cela, nous devons passer l'emplacement choisi par l'utilisateur à l'écran précédent. Avec revenir en arrière, c'est relativement difficile, mais à
la place, nous pouvons utiliser un modèle que je n'avais pas vraiment utilisé auparavant dans ce
cours, je peux également utiliser la navigation ici pour revenir en arrière. Je peux accéder à mon nouvel écran de lieu avec le nouvel identifiant
de lieu configuré ici dans mon navigateur de lieux et puisque je suis déjà sur un écran avant ce nouvel écran de lieu, n'oubliez pas qu'il s'agit
d'une pile d'écrans
et je suis sur un écran au-dessus du nouvel écran de position, cela ne poussera pas en fait
ce nouvel écran de position au-dessus de l'écran existant, nous pourrions forcer cela avec push mais
je ne veux pas, au lieu de cela, il
reviendra mais maintenant en utilisant la navigation, je peux ajouter quelques paramètres ici. Je peux ajouter mon emplacement choisi et là, pointez
sur mon accessoire d'emplacement sélectionné qui, espérons-le, contient mon emplacement choisi. Maintenant que j'utilise l'emplacement sélectionné ici et que cela change, je vais l'ajouter
comme dépendance pour utiliser le rappel afin que cette fonction soit recréée lorsque nous avons choisi
un nouvel emplacement et je veux m'assurer que nous avons un emplacement ici , donc je
vais vérifier si l'emplacement sélectionné ou pour être précis, si nous n'en avons pas, donc si ce n'est pas défini,
ce qui signifie
que l'utilisateur n'en a pas encore choisi, alors je reviendrai et ne continuerai pas et
nous pouvons également montrer une alerte ici si on veut. Maintenant, je ne le ferai pas ici, mais vous pouvez afficher
une alerte si vous le souhaitez.
Alors maintenant, nous ne pourrons cliquer sur enregistrer que si nous avons choisi un emplacement, mais si nous le
faisons, nous le définirons en fait sur les paramètres de
notre action de retour. Essayons, allons-y, cliquez
sur picK sur la carte et maintenant veuillez noter que je n'ai pas encore choisi de lieu, je n'ai encore
cliqué nulle part, donc si
je clique sur enregistrer, rien ne se passe. Si je choisis un emplacement et clique sur Enregistrer, je reviens cependant.
Alors maintenant, nous pouvons utiliser les données que nous renvoyons de l'écran de la carte dans notre sélecteur de position pour mettre à jour l'aperçu de la carte
là-bas, c'est donc la
prochaine chose que je ferai.