Pour l'afficher sur une carte, nous avons ce composant d'écran de carte qui n'a actuellement qu'un contenu factice et maintenant nous devons
être en mesure de rendre une carte interactive et pour cela, expo nous a à nouveau couverts.
Vous y trouverez le package
de visualisation de carte.
Maintenant, dans les coulisses, nous utilisons un package nommé React Native maps que vous pouvez également utiliser dans
des applications non-expo, d'ailleurs beaucoup de ces packages peuvent être utilisés dans des applications non-expo et
c'est quelque chose que je reviendrai dans les applications de construction sans module
expo mais pour l'instant, nous pouvons simplement installer cela en exécutant cette commande et cela installera
le package React Native maps et nous
pourrons ensuite l'utiliser comme nous le voyons ici dans cet exemple.
Au fait, consultez également la documentation officielle sur ce lien pour voir beaucoup plus d'exemples d'utilisation là-bas car là,
vous pouvez tout apprendre sur la façon d'utiliser ce
package, quelques exemples sont également présentés ici dans ce module bien sûr.
Lançons donc expo install react-native-maps pour installer ce paquet ici et cela nous
permettra ensuite d'utiliser divers composants qui rendent des cartes interactives.
Attendons donc que cela se termine et avec cela terminé, dans le composant d'écran de carte, nous pouvons commencer à utiliser cette
carte.
Maintenant, là-bas, pour utiliser la carte, nous pouvons importer la vue de la carte à partir de la carte React Native, donc à partir de ce paquet que
nous venons d'installer et cela nous permettra de rendre une carte à l'écran.
Maintenant, comment ça marche?
Eh bien, allons ici dans notre écran de carte et au lieu de retourner cette vue ici, je vais retourner une
vue de carte comme ça.
Maintenant, la vue de la carte peut être une balise à fermeture
automatique pour le moment, nous pouvons également ajouter des marqueurs plus tard, mais pour l'instant, nous allons simplement la rendre comme ceci et maintenant
vous devez configurer cette vue de la carte. Pour être précis, il
a besoin d'un accessoire de région qui lui indique où il doit se concentrer lors du chargement, donc quelle
partie de la carte ou quelle partie du monde il doit se concentrer lors du chargement.
Nous devons donc créer une telle région ici et je vais stocker cela dans une région de carte
nommée constante et une région est en fait un objet avec quatre propriétés et vous devez
les nommer comme ceci - latitude
et non lat mais vraiment latitude écrite, longitude, latitudeDelta et longitudeDelta.
Les deltas définissent essentiellement le facteur de zoom car cela décrit la quantité d'espace que vous pouvez voir autour du
centre que vous décrivez avec ces deux points.
Donc, qui décrit un point, avec les deux
deltas, il décrit une surface.
Alors maintenant, ici, nous pouvons commencer avec des valeurs
fictives avant de nous assurer ensuite que nous pouvons préremplir cela.
Alors ici, je vais définir cette valeur fictive de 37. 78 et -122. 43 qui
se trouve dans la Bay Area autour du siège de Google et ici,
latitudeDelta prendra 0. 0922 puis 0. 0421, j'ai trouvé que
cela fonctionne assez bien en tant que région.
Bien sûr, vous pouvez expérimenter ces chiffres, mais à la fin, passez ici dans cette région de la carte.
Maintenant, cela devrait rendre une carte à l'écran, maintenant nous devons
juste être en mesure de l'atteindre et pour
cela, laissez-moi revenir au sélecteur de position et je veux l'atteindre de deux manières différentes - l'une est
à l'aide d'un bouton que je n'ai pas encore ajouté. En plus du bouton Obtenir l'emplacement de l'utilisateur,
je veux avoir un deuxième bouton qui devrait être assis à côté du premier, donc je vais ajouter une
vue pour envelopper les deux, puis déplacer ce bouton ici et avoir un deuxième bouton
là-bas et ce bouton sera généralement configuré de la même manière mais je dirai choisir sur la carte et bien sûr, je
déclencherai une méthode différente, une fonction différente, ici je veux déclencher une fonction qui est le gestionnaire de sélection sur la carte et je vais
donc utiliser
ici et c'est une façon de sélectionner cela. L'autre façon de le sélectionner ou d'accéder
à la carte est de cliquer sur l'aperçu de la carte. Avant d'implémenter cela, permettez-moi de styliser rapidement cette vue qui contient les deux boutons.
Je vais lui donner un identifiant de style d'actions, puis là-bas, les actions peuvent être configurées de manière
relativement simple.
Je veux que l'élément soit assis côte à côte, donc la direction du flex sera une ligne et non une colonne. Justifier le contenu peut être un
espace autour pour distribuer l'espace libre disponible autour des deux boutons, je prendrai une largeur
de 100% pour cette ligne et c'est tout.
Maintenant avec ça, j'ai mes boutons
ici, maintenant nous devons nous assurer que nous pouvons également appuyer sur l'aperçu de la carte et pour cela,
permettez-moi d'aller à l'aperçu de la carte et de l'envelopper, non pas dans une vue mais dans un composant tactile et ici Je vais
simplement utiliser l'opacité tactile, bien sûr, vous pouvez également opter pour des composants tactiles différents en
fonction
de la plate-forme sur laquelle vous utilisez, je veux garder cela relativement simple, je vais donc remplacer cette vue ici par
une opacité tactile, avoir
mon style ici, c'est bien mais aussi bien sûr avoir le gestionnaire onPress et là, je veux déclencher une
fonction que je m'attends à obtenir de l'extérieur via des accessoires.
J'appellerai cela aussi surPress, mais vous pouvez donner à cet accessoire le nom que vous voulez.
Cela nous permet maintenant d'ajouter un accessoire onPress sur l'aperçu de la carte,
donc ici dans le sélecteur de position, je peux écouter onPress sur l'aperçu de la carte et là bien sûr, je veux
déclencher la même fonction que lorsque je clique sur le bouton vers le bas Là.
Je veux déclencher le choix du gestionnaire de carte,
c'est donc ce que je fais.
Maintenant, le gestionnaire de choix sur la carte devrait simplement aller à l'écran de la
carte à droite, donc nous pouvons y dire des accessoires. la navigation. naviguer sur la carte et c'est tout pour la seconde.
Donc, si nous enregistrons maintenant cela, nous devrions être en mesure d'accéder à cette carte interactive en plein écran où nous ne pouvons pas
encore sélectionner un lieu mais au moins nous pouvons le voir.
Alors maintenant, si je clique sur le plus ici et que je choisis sur la carte, je
reçois une erreur, maintenant pourquoi est-ce? Eh bien, cela n'a rien à voir avec les modules natifs. Vous vous souvenez peut-être que l'accessoire de navigation n'est
disponible que sur les composants qui sont directement chargés en tant qu'écrans, ce que le sélecteur de position n'est bien
sûr pas. Maintenant, il
existe diverses solutions de contournement, il y
aurait un composant d'ordre supérieur que nous pouvons utiliser,
nous pouvons également installer un package de hooks spécifique à la navigation React, mais ici,
je vais adopter une approche simple et je m'assurerai simplement d'avoir un accessoire de navigation sur le sélecteur d'emplacement par
aller au nouvel écran de lieu qui est l'endroit où j'utilise le sélecteur de position et
là je définirai cet accessoire de navigation et les accessoires avant. navigation dont je dispose ici car il s'agit
d'un composant directement chargé via un navigateur, donc maintenant je ne
fais que transférer l'accès à mes accessoires de navigation. Et avec cela, si nous revenons maintenant en arrière et
cliquons dessus, nous chargeons cette carte ici ou au moins un écran de carte, mais
où est la carte?
Eh bien, la carte est invisible car, et c'est important, pour votre carte, vous devez ajouter un style
et ici, je vais ajouter des styles. map et cela peut être un style très simple mais il
vous suffit de définir sa taille car par défaut, il n'occupera aucun espace.
Donc, en réglant simplement flex sur un ici et en lui disant qu'il devrait prendre tout l'espace qu'il obtient, juste en faisant
cela, vous vous assurerez que vous voyez une carte.
Alors maintenant, si vous cliquez dessus, voici notre carte en cours de chargement. Maintenant, il convient également de noter que sur iOS, vous utilisez automatiquement Apple
Maps, bien que vous puissiez également utiliser Google Maps si vous le souhaitez, les documents
officiels vous expliquent comment, sur Android, vous utilisez toujours Google Maps.
Donc, ici, si je clique sur Choisir sur la
carte, nous verrons également qu'une fois que nous aurons chargé ce nouvel écran, le voici. Maintenant, bien sûr, nous pouvons également accéder à cet écran en
cliquant sur notre aperçu ici, c'est ce
que nous avons
configuré correctement, de sorte que cela fonctionne également, bien sûr, également sur iOS.
Et d'ailleurs, l'animation ici n'est pas super fluide, sur un vrai appareil, ce sera, donc ce
n'est pas un problème, c'est juste ici sur l'émulateur.
Donc, avec cela, nous avons notre carte ici et sur cette carte, nous pouvons faire défiler. Encore une fois, sur le simulateur, il peut être un
peu petit, sur un vrai appareil, il ne le sera pas.
Donc ici, vous pouvez faire défiler, vous pourrez également pincer et zoomer plus tard, donc vous pouvez faire tout
cela et avec cela, nous voyons la carte.
Maintenant, la carte est utilisable mais bien sûr, nous ne pouvons pas encore choisir un endroit là-bas, c'est donc
la prochaine chose que nous devons changer.