Pour l'emplacement de l'utilisateur, nous avons obtenu un autre package intégré à expo que nous pouvons facilement utiliser
et c'est le package de localisation.
Maintenant, comme précédemment, vous l'installez en suivant les instructions ici et vous voyez également
un exemple d'utilisation
là-bas, alors faisons-le rapidement.
Lançons expo install expo-location dans notre projet et avec celui-ci installé, nous pouvons maintenant également ajouter
un autre composant, en plus du composant
sélecteur d'image, j'ajouterai le LocationPicker. fichier js parce que c'est une autre chose que je veux pouvoir
faire dans cette application, je veux pouvoir choisir un emplacement. Pour cela dans le composant de sélection
d'emplacement, je vais bien sûr importer React de React car ce sera un composant React normal à la
fin et importer quelques éléments de React Native et parmi ces choses est la vue, un bouton qui nous permet pour commencer à obtenir
l'emplacement de l'utilisateur, du texte, également pour afficher un texte de remplacement par défaut alors qu'aucun emplacement n'a
été sélectionné, un indicateur d'activité pour afficher un spinner pendant que nous attendons que l'emplacement soit
récupéré et peut-être également une alerte pour afficher une alerte si quelque chose ne va pas et aussi
la feuille de style pour styliser ce composant.
Maintenant, ici, j'ai mon composant de sélection d'emplacement qui reçoit les accessoires et ensuite nous ferons quelque
chose, configurer l'objet de styles avec la feuille de style. créer et à la fin, exporter le composant sélecteur
d'emplacement ici par défaut, comme ça. Maintenant, pour ce composant, à quoi devrait ressembler son code jsx?
En fin de compte, cela dépend toujours de vous, mais je vais commencer très simplement ici et juste avoir
une vue
avec un bouton là-dedans qui me permettra de commencer à obtenir l'emplacement de l'utilisateur et également une autre vue là-dedans
qui montre par exemple mon texte de secours, non emplacement choisi encore qui sera plus tard remplacé pour un petit aperçu de
l'endroit sur une carte, c'est
quelque chose que j'ajouterai plus tard. Maintenant, ici sur le bouton, je
dirai donc obtenir l'emplacement de l'utilisateur par exemple, définissez la couleur sur Couleurs. primaire et pour cela, comme toujours, assurez-vous d'importer
ces couleurs constantes et en appuyant dessus, je veux sans surprise commencer à récupérer l'emplacement
de l'utilisateur.
Donc, ici, j'ajouterai une nouvelle constante, get location handler, qui est ensuite une fonction qui utilisera cette API de localisation que nous venons d'installer pour obtenir la
localisation de l'utilisateur et c'est ce que je déclenche lorsque je clique sur ce bouton.
Maintenant, pour le style ici, je vais ajouter un sélecteur d'emplacement de style, sur cette vue ici, je vais ajouter un autre aperçu de la carte de
style, nous pourrions également styliser ce texte mais je vais m'en tenir à la valeur
par défaut et maintenant ajouter ces deux styles à la feuille de style, donc sélecteur de position ici, là, je vais ajouter une marge au bas de disons
15 et sur l'aperçu de la carte, là, je vais également ajouter une marge au bas de disons 10 et la largeur de 100% à prendre toute la largeur
disponible, une hauteur de peut-être 150 et aussi la couleur de bordure de
cette couleur grisâtre avec le code hexadécimal #ccc et une largeur de bordure de un, c'est un peu
comme la zone d'aperçu de l'image. Avec cela, nous avons ce composant configuré, nous pouvons maintenant
l'inclure dans le nouvel écran de lieu.
Donc, dans ce composant d'écran, j'importe un sélecteur d'emplacement à partir de composants, un sélecteur d'emplacement comme celui-ci et l'ajoute dans le
code jsx sous le sélecteur d'image, juste comme ça.
Si nous enregistrons maintenant cela et que nous regardons, nous voyons cette boîte ici.
Maintenant, lorsque je clique sur obtenir l'emplacement de l'utilisateur, sans surprise, l'idée est que je commence à obtenir l'emplacement de l'utilisateur.
Pour cela, dans notre composant de sélection d'emplacement, nous devrons importer certaines choses ici - nous importerons tout comme emplacement à
partir du package d'emplacement d'exposition que nous venons d'installer. En plus de l'emplacement, tout comme pour
la caméra, nous devrons demander des autorisations, nous allons donc tout importer en tant qu'autorisations
à partir des autorisations expo, cela est également requis. Avec cela ajouté ici dans le gestionnaire d'emplacement, j'ai tout d'abord envie de vérifier mes autorisations
et pour cela, je peux copier l'approche que j'utilise dans le sélecteur d'images. Là, nous avons cette fonction de vérification des autorisations que nous
pourrions bien sûr également externaliser et écrire de manière plus générique pour travailler dans différents composants,
ici je vais juste la copier, vérifier les autorisations. Bien sûr, ici, je ne demande pas le
rôle de la caméra mais un emplacement à la place et vous devez accorder des autorisations de localisation pour utiliser cette application et
vérifier maintenant que les autorisations sont exécutées ici dans le gestionnaire d'emplacement. Nous pouvons utiliser async attendre ici à nouveau pour attendre le résultat
de cette vérification, donc la permission est ce que je veux vérifier ici et sinon, donc si nous n'avons pas les autorisations, eh bien
je reviendrai ici, il n'y a pas devez continuer, car nous ne
serons pas autorisés à récupérer l'emplacement de toute façon. Maintenant, sinon, nous pouvons continuer et maintenant nous pouvons
utiliser le package d'emplacement pour obtenir la position actuelle asynchrone et cela fait ce que le nom implique, il
obtient la position actuelle de l'utilisateur. Maintenant, localiser l'utilisateur peut prendre un certain temps, c'est pourquoi il
s'agit d'une tâche asynchrone et pourquoi cela renvoie une promesse, une promesse qui se résoudra une fois que nous aurons l'emplacement de
l'utilisateur ou qui sera rejetée si elle ne parvient pas à en récupérer un. Nous pouvons également configurer cela avec un objet
que vous lui passez, encore une fois, comme toujours dans les documents officiels, vous avez
tout appris sur toutes les options que vous pouvez y définir. Par exemple, une option que vous pouvez définir est le délai d'expiration
et définissez-le sur cinq secondes pour vous assurer que si nous ne pouvons pas récupérer un emplacement pendant cinq secondes, nous
arrêtons d'essayer et
nous lançons une erreur, de sorte que la promesse serait alors rejetée.
Maintenant, nous pouvons attendre cela et bien sûr l'envelopper dans un bloc try catch, c'est important de s'assurer que nous gérons les
erreurs si nous ne parvenons pas à récupérer un emplacement. Ici, j'utiliserai simplement le composant d'alerte que
j'importe déjà pour lancer une alerte, je n'ai pas pu récupérer l'emplacement, puis ici, veuillez réessayer plus tard ou choisir un emplacement
sur la carte, ce qui n'est pas possible actuellement mais que nous '' Je vais bientôt
ajouter et voici un bouton où nous disons OK. C'est donc une alerte que je montre si la récupération de l'emplacement échoue pour
une raison quelconque,
sinon ici, je m'attends à récupérer un emplacement,
c'est donc le résultat de cette promesse à la fin,
un emplacement que nous pouvons utiliser.
Maintenant, nous pouvons ensuite utiliser cet emplacement à l'aide de l'état d'utilisation pour gérer un état interne ici, c'est
l'emplacement choisi et définir l'emplacement choisi et là, nous pouvons appeler l'état d'utilisation qui n'a pas de valeur initiale ici et
puis ici dans
le gestionnaire d'emplacement, nous pouvons définir l'emplacement choisi à quelque chose, nous devrons voir quoi pour l'instant,
à null, mais avant de définir quoi que ce soit ici, consolons l'emplacement du journal
pour avoir une idée de ce qu'il y a à l'intérieur.
Maintenant, je veux aussi montrer un spinner pendant que nous allons chercher, donc je vais gérer un autre
état ici et c'est l'état qui va chercher et initialement, c'est bien sûr faux mais au départ nous ne
cherchons pas mais ici ici dans
l'emplacement get gestionnaire, avant de commencer à obtenir l'emplacement, je définirai la récupération sur true et une fois que nous aurons
terminé et cela inclut
également si nous avons une erreur, donc par la
suite je le redéfinis sur false et maintenant nous pouvons utiliser la récupération pour montrer une fileuse pendant que nous allons
chercher.
Donc, ici, si la récupération est vraie, je montrerai l'indicateur d'activité et seulement sinon, je montrerai ce texte et plus tard, bien
sûr, nous ne montrerons pas seulement le texte, mais nous afficherons également un extrait de carte.
Maintenant, l'indicateur d'activité peut être configuré, nous pouvons
définir la taille sur grand et la couleur sur Couleurs. primaire si vous le souhaitez. Avec tout cela, revenons en arrière
et essayons ici sur iOS parce que même
si je ne peux pas ajouter d'image ici, au moins je peux vérifier l'emplacement et cliquer sur
obtenir l'emplacement de l'utilisateur et maintenant on me demande si je veux accorder les autorisations que
je veux autoriser, toujours autoriser et vous voyez ce spinner, c'est super rapide parce que c'est un simulateur, il simule également l'emplacement, ce
n'est pas l'emplacement réel de votre ordinateur sur lequel vous exécutez cela, à la place
c'est un emplacement factice par défaut à San Francisco et ici sur Android, c'est la même chose, si je clique sur
obtenir l'emplacement de l'utilisateur ici, je dois accorder des autorisations et une fois que je l'ai fait, vous voyez le spinner ici et ensuite vous
ne voyez que des journaux bien sûr, vous voyez quelque chose. Là, vous voyez les objets qui étaient
enregistrés où vous avez un sous-objet coords pour ainsi dire un champ nommé coords et
l'objet qui est un autre objet avec la précision, puis une paire de longitude latitude qui décrit ce faux
emplacement, les deux simulateurs utilisent de faux Emplacements. Vous avez également obtenu un horodatage.
Alors maintenant, nous
savons ce qu'il y a là-dedans, nous pouvons donc définir l'emplacement choisi, nous pouvons maintenant définir cela pour, disons, un objet
où vous stockez une latitude d'emplacement. coords. latitude, c'est ce qu'il y a là, à droite et une longitude,. lng de
l'emplacement. coords. longitude.
Nous avons donc maintenant cet emplacement choisi disponible et cet emplacement sélectionné peut maintenant être utilisé pour, par
exemple, afficher un petit extrait de
carte ici une fois que nous avons un emplacement. Avant de faire cela, une petite chose, je veux m'assurer
que le texte et le spinner ici sont centrés, donc sur l'aperçu de la carte, je vais également définir justifier le contenu au centre
et aligner les éléments au centre, de sorte que tous le contenu là-dedans est centré horizontalement et verticalement, c'est juste une
toute petite chose, alors maintenant
vous voyez tout cela au centre.
Mais avec cela, assurons-nous maintenant d'afficher un petit extrait de carte qui montre l'emplacement choisi par l'utilisateur.