1 00:00:02,080 --> 00:00:06,910 Pour l'emplacement de l'utilisateur, nous avons obtenu un autre package intégré à expo que nous pouvons facilement utiliser 2 00:00:06,910 --> 00:00:08,740 et c'est le package de localisation. 3 00:00:08,780 --> 00:00:14,230 Maintenant, comme précédemment, vous l'installez en suivant les instructions ici et vous voyez également 4 00:00:14,230 --> 00:00:15,520 un exemple d'utilisation 5 00:00:15,520 --> 00:00:17,130 là-bas, alors faisons-le rapidement. 6 00:00:17,140 --> 00:00:24,580 Lançons expo install expo-location dans notre projet et avec celui-ci installé, nous pouvons maintenant également ajouter 7 00:00:24,570 --> 00:00:27,580 un autre composant, en plus du composant 8 00:00:27,580 --> 00:00:33,340 sélecteur d'image, j'ajouterai le LocationPicker. fichier js parce que c'est une autre chose que je veux pouvoir 9 00:00:33,340 --> 00:00:38,920 faire dans cette application, je veux pouvoir choisir un emplacement. Pour cela dans le composant de sélection 10 00:00:38,920 --> 00:00:45,490 d'emplacement, je vais bien sûr importer React de React car ce sera un composant React normal à la 11 00:00:45,490 --> 00:00:54,040 fin et importer quelques éléments de React Native et parmi ces choses est la vue, un bouton qui nous permet pour commencer à obtenir 12 00:00:54,040 --> 00:01:00,610 l'emplacement de l'utilisateur, du texte, également pour afficher un texte de remplacement par défaut alors qu'aucun emplacement n'a 13 00:01:00,610 --> 00:01:06,640 été sélectionné, un indicateur d'activité pour afficher un spinner pendant que nous attendons que l'emplacement soit 14 00:01:07,300 --> 00:01:13,840 récupéré et peut-être également une alerte pour afficher une alerte si quelque chose ne va pas et aussi 15 00:01:13,840 --> 00:01:16,840 la feuille de style pour styliser ce composant. 16 00:01:16,860 --> 00:01:24,390 Maintenant, ici, j'ai mon composant de sélection d'emplacement qui reçoit les accessoires et ensuite nous ferons quelque 17 00:01:24,390 --> 00:01:33,390 chose, configurer l'objet de styles avec la feuille de style. créer et à la fin, exporter le composant sélecteur 18 00:01:33,450 --> 00:01:40,870 d'emplacement ici par défaut, comme ça. Maintenant, pour ce composant, à quoi devrait ressembler son code jsx? 19 00:01:40,940 --> 00:01:47,540 En fin de compte, cela dépend toujours de vous, mais je vais commencer très simplement ici et juste avoir 20 00:01:47,540 --> 00:01:48,460 une vue 21 00:01:49,590 --> 00:01:56,580 avec un bouton là-dedans qui me permettra de commencer à obtenir l'emplacement de l'utilisateur et également une autre vue là-dedans 22 00:01:56,580 --> 00:02:04,080 qui montre par exemple mon texte de secours, non emplacement choisi encore qui sera plus tard remplacé pour un petit aperçu de 23 00:02:04,110 --> 00:02:05,890 l'endroit sur une carte, c'est 24 00:02:05,910 --> 00:02:10,010 quelque chose que j'ajouterai plus tard. Maintenant, ici sur le bouton, je 25 00:02:13,220 --> 00:02:20,990 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 26 00:02:20,990 --> 00:02:27,430 ces couleurs constantes et en appuyant dessus, je veux sans surprise commencer à récupérer l'emplacement 27 00:02:27,430 --> 00:02:28,500 de l'utilisateur. 28 00:02:28,610 --> 00:02:38,180 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 29 00:02:38,210 --> 00:02:43,760 localisation de l'utilisateur et c'est ce que je déclenche lorsque je clique sur ce bouton. 30 00:02:45,530 --> 00:02:57,040 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 31 00:02:57,190 --> 00:03:03,790 style, nous pourrions également styliser ce texte mais je vais m'en tenir à la valeur 32 00:03:03,790 --> 00:03:15,570 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 33 00:03:15,570 --> 00:03:27,820 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 34 00:03:27,820 --> 00:03:33,380 disponible, une hauteur de peut-être 150 et aussi la couleur de bordure de 35 00:03:33,570 --> 00:03:41,310 cette couleur grisâtre avec le code hexadécimal #ccc et une largeur de bordure de un, c'est un peu 36 00:03:41,540 --> 00:03:47,620 comme la zone d'aperçu de l'image. Avec cela, nous avons ce composant configuré, nous pouvons maintenant 37 00:03:47,620 --> 00:03:50,170 l'inclure dans le nouvel écran de lieu. 38 00:03:50,200 --> 00:04:00,970 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 39 00:04:00,970 --> 00:04:05,750 code jsx sous le sélecteur d'image, juste comme ça. 40 00:04:05,900 --> 00:04:10,540 Si nous enregistrons maintenant cela et que nous regardons, nous voyons cette boîte ici. 41 00:04:10,560 --> 00:04:16,110 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. 42 00:04:18,460 --> 00:04:26,110 Pour cela, dans notre composant de sélection d'emplacement, nous devrons importer certaines choses ici - nous importerons tout comme emplacement à 43 00:04:26,200 --> 00:04:33,610 partir du package d'emplacement d'exposition que nous venons d'installer. En plus de l'emplacement, tout comme pour 44 00:04:33,610 --> 00:04:40,030 la caméra, nous devrons demander des autorisations, nous allons donc tout importer en tant qu'autorisations 45 00:04:40,060 --> 00:04:47,970 à 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 46 00:04:48,090 --> 00:04:54,540 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 47 00:04:54,540 --> 00:04:59,010 pourrions bien sûr également externaliser et écrire de manière plus générique pour travailler dans différents composants, 48 00:04:59,010 --> 00:05:04,800 ici je vais juste la copier, vérifier les autorisations. Bien sûr, ici, je ne demande pas le 49 00:05:04,800 --> 00:05:12,750 rôle de la caméra mais un emplacement à la place et vous devez accorder des autorisations de localisation pour utiliser cette application et 50 00:05:12,750 --> 00:05:20,820 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 51 00:05:20,850 --> 00:05:28,870 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 52 00:05:29,020 --> 00:05:33,040 je reviendrai ici, il n'y a pas devez continuer, car nous ne 53 00:05:33,040 --> 00:05:39,790 serons pas autorisés à récupérer l'emplacement de toute façon. Maintenant, sinon, nous pouvons continuer et maintenant nous pouvons 54 00:05:39,970 --> 00:05:47,680 utiliser le package d'emplacement pour obtenir la position actuelle asynchrone et cela fait ce que le nom implique, il 55 00:05:47,680 --> 00:05:53,230 obtient la position actuelle de l'utilisateur. Maintenant, localiser l'utilisateur peut prendre un certain temps, c'est pourquoi il 56 00:05:53,230 --> 00:05:58,150 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 57 00:05:58,180 --> 00:06:04,230 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 58 00:06:04,240 --> 00:06:09,400 que vous lui passez, encore une fois, comme toujours dans les documents officiels, vous avez 59 00:06:09,400 --> 00:06:16,550 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 60 00:06:16,550 --> 00:06:22,670 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 61 00:06:22,670 --> 00:06:23,870 arrêtons d'essayer et 62 00:06:23,870 --> 00:06:27,260 nous lançons une erreur, de sorte que la promesse serait alors rejetée. 63 00:06:27,310 --> 00:06:34,930 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 64 00:06:35,590 --> 00:06:42,610 erreurs si nous ne parvenons pas à récupérer un emplacement. Ici, j'utiliserai simplement le composant d'alerte que 65 00:06:42,610 --> 00:06:52,410 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 66 00:06:52,840 --> 00:06:59,940 sur la carte, ce qui n'est pas possible actuellement mais que nous '' Je vais bientôt 67 00:06:59,940 --> 00:07:07,920 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 68 00:07:08,880 --> 00:07:10,090 une raison quelconque, 69 00:07:10,130 --> 00:07:12,470 sinon ici, je m'attends à récupérer un emplacement, 70 00:07:12,500 --> 00:07:15,200 c'est donc le résultat de cette promesse à la fin, 71 00:07:15,200 --> 00:07:16,920 un emplacement que nous pouvons utiliser. 72 00:07:17,120 --> 00:07:25,720 Maintenant, nous pouvons ensuite utiliser cet emplacement à l'aide de l'état d'utilisation pour gérer un état interne ici, c'est 73 00:07:26,830 --> 00:07:36,250 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 74 00:07:36,250 --> 00:07:37,810 puis ici dans 75 00:07:37,810 --> 00:07:45,550 le gestionnaire d'emplacement, nous pouvons définir l'emplacement choisi à quelque chose, nous devrons voir quoi pour l'instant, 76 00:07:45,600 --> 00:07:52,230 à null, mais avant de définir quoi que ce soit ici, consolons l'emplacement du journal 77 00:07:52,290 --> 00:07:57,530 pour avoir une idée de ce qu'il y a à l'intérieur. 78 00:07:57,540 --> 00:08:03,740 Maintenant, je veux aussi montrer un spinner pendant que nous allons chercher, donc je vais gérer un autre 79 00:08:03,740 --> 00:08:10,190 état ici et c'est l'état qui va chercher et initialement, c'est bien sûr faux mais au départ nous ne 80 00:08:10,220 --> 00:08:12,260 cherchons pas mais ici ici dans 81 00:08:12,650 --> 00:08:19,670 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 82 00:08:19,670 --> 00:08:21,090 terminé et cela inclut 83 00:08:21,260 --> 00:08:24,410 également si nous avons une erreur, donc par la 84 00:08:24,410 --> 00:08:31,220 suite je le redéfinis sur false et maintenant nous pouvons utiliser la récupération pour montrer une fileuse pendant que nous allons 85 00:08:31,220 --> 00:08:31,640 chercher. 86 00:08:31,640 --> 00:08:39,740 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 87 00:08:39,950 --> 00:08:45,920 sûr, nous ne montrerons pas seulement le texte, mais nous afficherons également un extrait de carte. 88 00:08:45,920 --> 00:08:48,260 Maintenant, l'indicateur d'activité peut être configuré, nous pouvons 89 00:08:48,260 --> 00:08:55,440 définir la taille sur grand et la couleur sur Couleurs. primaire si vous le souhaitez. Avec tout cela, revenons en arrière 90 00:08:55,440 --> 00:08:57,940 et essayons ici sur iOS parce que même 91 00:08:57,960 --> 00:09:03,060 si je ne peux pas ajouter d'image ici, au moins je peux vérifier l'emplacement et cliquer sur 92 00:09:03,060 --> 00:09:07,980 obtenir l'emplacement de l'utilisateur et maintenant on me demande si je veux accorder les autorisations que 93 00:09:08,040 --> 00:09:14,820 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 94 00:09:14,820 --> 00:09:19,270 n'est pas l'emplacement réel de votre ordinateur sur lequel vous exécutez cela, à la place 95 00:09:19,480 --> 00:09:25,750 c'est un emplacement factice par défaut à San Francisco et ici sur Android, c'est la même chose, si je clique sur 96 00:09:25,780 --> 00:09:33,100 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 97 00:09:33,100 --> 00:09:39,700 ne voyez que des journaux bien sûr, vous voyez quelque chose. Là, vous voyez les objets qui étaient 98 00:09:39,700 --> 00:09:45,670 enregistrés où vous avez un sous-objet coords pour ainsi dire un champ nommé coords et 99 00:09:45,670 --> 00:09:53,230 l'objet qui est un autre objet avec la précision, puis une paire de longitude latitude qui décrit ce faux 100 00:09:53,290 --> 00:10:00,170 emplacement, les deux simulateurs utilisent de faux Emplacements. Vous avez également obtenu un horodatage. 101 00:10:00,210 --> 00:10:01,700 Alors maintenant, nous 102 00:10:01,740 --> 00:10:08,790 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 103 00:10:09,540 --> 00:10:17,330 où vous stockez une latitude d'emplacement. coords. latitude, c'est ce qu'il y a là, à droite et une longitude,. lng de 104 00:10:17,330 --> 00:10:20,280 l'emplacement. coords. longitude. 105 00:10:20,320 --> 00:10:26,140 Nous avons donc maintenant cet emplacement choisi disponible et cet emplacement sélectionné peut maintenant être utilisé pour, par 106 00:10:26,440 --> 00:10:28,440 exemple, afficher un petit extrait de 107 00:10:28,480 --> 00:10:34,420 carte ici une fois que nous avons un emplacement. Avant de faire cela, une petite chose, je veux m'assurer 108 00:10:34,720 --> 00:10:41,920 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 109 00:10:42,280 --> 00:10:48,490 et aligner les éléments au centre, de sorte que tous le contenu là-dedans est centré horizontalement et verticalement, c'est juste une 110 00:10:48,500 --> 00:10:50,310 toute petite chose, alors maintenant 111 00:10:50,320 --> 00:10:52,290 vous voyez tout cela au centre. 112 00:10:52,300 --> 00:10:58,390 Mais avec cela, assurons-nous maintenant d'afficher un petit extrait de carte qui montre l'emplacement choisi par l'utilisateur.