1
00:00:02,100 --> 00:00:09,600
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

2
00:00:09,600 --> 00:00:15,800
être en mesure de rendre une carte interactive et pour cela, expo nous a à nouveau couverts.

3
00:00:15,870 --> 00:00:17,880
Vous y trouverez le package

4
00:00:18,970 --> 00:00:20,810
de visualisation de carte.

5
00:00:20,850 --> 00:00:25,840
Maintenant, dans les coulisses, nous utilisons un package nommé React Native maps que vous pouvez également utiliser dans

6
00:00:25,840 --> 00:00:30,220
des applications non-expo, d'ailleurs beaucoup de ces packages peuvent être utilisés dans des applications non-expo et

7
00:00:30,220 --> 00:00:33,950
c'est quelque chose que je reviendrai dans les applications de construction sans module

8
00:00:34,060 --> 00:00:38,480
expo mais pour l'instant, nous pouvons simplement installer cela en exécutant cette commande et cela installera

9
00:00:38,500 --> 00:00:40,630
le package React Native maps et nous

10
00:00:40,640 --> 00:00:43,820
pourrons ensuite l'utiliser comme nous le voyons ici dans cet exemple.

11
00:00:43,900 --> 00:00:49,660
Au fait, consultez également la documentation officielle sur ce lien pour voir beaucoup plus d'exemples d'utilisation là-bas car là,

12
00:00:49,660 --> 00:00:52,660
vous pouvez tout apprendre sur la façon d'utiliser ce

13
00:00:52,660 --> 00:00:56,300
package, quelques exemples sont également présentés ici dans ce module bien sûr.

14
00:00:56,410 --> 00:01:01,810
Lançons donc expo install react-native-maps pour installer ce paquet ici et cela nous

15
00:01:01,810 --> 00:01:06,160
permettra ensuite d'utiliser divers composants qui rendent des cartes interactives.

16
00:01:06,160 --> 00:01:12,860
Attendons donc que cela se termine et avec cela terminé, dans le composant d'écran de carte, nous pouvons commencer à utiliser cette

17
00:01:12,860 --> 00:01:13,300
carte.

18
00:01:15,730 --> 00:01:26,160
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

19
00:01:26,160 --> 00:01:31,150
nous venons d'installer et cela nous permettra de rendre une carte à l'écran.

20
00:01:31,200 --> 00:01:32,730
Maintenant, comment ça marche?

21
00:01:32,730 --> 00:01:38,880
Eh bien, allons ici dans notre écran de carte et au lieu de retourner cette vue ici, je vais retourner une

22
00:01:39,630 --> 00:01:41,340
vue de carte comme ça.

23
00:01:41,370 --> 00:01:43,470
Maintenant, la vue de la carte peut être une balise à fermeture

24
00:01:43,470 --> 00:01:47,910
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

25
00:01:48,180 --> 00:01:51,530
vous devez configurer cette vue de la carte. Pour être précis, il

26
00:01:51,540 --> 00:01:58,310
a besoin d'un accessoire de région qui lui indique où il doit se concentrer lors du chargement, donc quelle

27
00:01:58,440 --> 00:02:03,990
partie de la carte ou quelle partie du monde il doit se concentrer lors du chargement.

28
00:02:03,990 --> 00:02:12,770
Nous devons donc créer une telle région ici et je vais stocker cela dans une région de carte

29
00:02:12,770 --> 00:02:20,810
nommée constante et une région est en fait un objet avec quatre propriétés et vous devez

30
00:02:20,840 --> 00:02:24,470
les nommer comme ceci - latitude

31
00:02:27,360 --> 00:02:32,680
et non lat mais vraiment latitude écrite, longitude, latitudeDelta et longitudeDelta.

32
00:02:32,830 --> 00:02:41,430
Les deltas définissent essentiellement le facteur de zoom car cela décrit la quantité d'espace que vous pouvez voir autour du

33
00:02:41,490 --> 00:02:45,450
centre que vous décrivez avec ces deux points.

34
00:02:45,480 --> 00:02:48,690
Donc, qui décrit un point, avec les deux

35
00:02:48,690 --> 00:02:51,030
deltas, il décrit une surface.

36
00:02:51,080 --> 00:02:54,890
Alors maintenant, ici, nous pouvons commencer avec des valeurs

37
00:02:54,890 --> 00:02:58,820
fictives avant de nous assurer ensuite que nous pouvons préremplir cela.

38
00:02:58,820 --> 00:03:03,980
Alors ici, je vais définir cette valeur fictive de 37. 78 et -122. 43 qui

39
00:03:03,980 --> 00:03:11,900
se trouve dans la Bay Area autour du siège de Google et ici,

40
00:03:11,900 --> 00:03:18,080
latitudeDelta prendra 0. 0922 puis 0. 0421, j'ai trouvé que

41
00:03:18,080 --> 00:03:21,030
cela fonctionne assez bien en tant que région.

42
00:03:21,080 --> 00:03:27,120
Bien sûr, vous pouvez expérimenter ces chiffres, mais à la fin, passez ici dans cette région de la carte.

43
00:03:27,200 --> 00:03:30,020
Maintenant, cela devrait rendre une carte à l'écran, maintenant nous devons

44
00:03:30,110 --> 00:03:32,320
juste être en mesure de l'atteindre et pour

45
00:03:32,330 --> 00:03:37,000
cela, laissez-moi revenir au sélecteur de position et je veux l'atteindre de deux manières différentes - l'une est

46
00:03:37,010 --> 00:03:42,380
à l'aide d'un bouton que je n'ai pas encore ajouté. En plus du bouton Obtenir l'emplacement de l'utilisateur,

47
00:03:42,390 --> 00:03:48,730
je veux avoir un deuxième bouton qui devrait être assis à côté du premier, donc je vais ajouter une

48
00:03:48,730 --> 00:03:53,830
vue pour envelopper les deux, puis déplacer ce bouton ici et avoir un deuxième bouton

49
00:03:53,830 --> 00:04:01,400
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

50
00:04:01,400 --> 00:04:09,740
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

51
00:04:09,740 --> 00:04:10,870
donc utiliser

52
00:04:10,940 --> 00:04:16,220
ici et c'est une façon de sélectionner cela. L'autre façon de le sélectionner ou d'accéder

53
00:04:16,220 --> 00:04:22,900
à 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.

54
00:04:22,900 --> 00:04:30,460
Je vais lui donner un identifiant de style d'actions, puis là-bas, les actions peuvent être configurées de manière

55
00:04:30,460 --> 00:04:31,620
relativement simple.

56
00:04:32,930 --> 00:04:38,720
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

57
00:04:38,720 --> 00:04:45,580
espace autour pour distribuer l'espace libre disponible autour des deux boutons, je prendrai une largeur

58
00:04:45,620 --> 00:04:49,400
de 100% pour cette ligne et c'est tout.

59
00:04:49,400 --> 00:04:51,170
Maintenant avec ça, j'ai mes boutons

60
00:04:51,170 --> 00:04:56,510
ici, maintenant nous devons nous assurer que nous pouvons également appuyer sur l'aperçu de la carte et pour cela,

61
00:04:56,510 --> 00:05:03,090
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

62
00:05:03,110 --> 00:05:07,700
simplement utiliser l'opacité tactile, bien sûr, vous pouvez également opter pour des composants tactiles différents en

63
00:05:07,700 --> 00:05:08,260
fonction

64
00:05:08,270 --> 00:05:14,000
de la plate-forme sur laquelle vous utilisez, je veux garder cela relativement simple, je vais donc remplacer cette vue ici par

65
00:05:14,450 --> 00:05:15,430
une opacité tactile, avoir

66
00:05:15,440 --> 00:05:20,750
mon style ici, c'est bien mais aussi bien sûr avoir le gestionnaire onPress et là, je veux déclencher une

67
00:05:20,750 --> 00:05:23,950
fonction que je m'attends à obtenir de l'extérieur via des accessoires.

68
00:05:24,020 --> 00:05:28,210
J'appellerai cela aussi surPress, mais vous pouvez donner à cet accessoire le nom que vous voulez.

69
00:05:28,250 --> 00:05:32,030
Cela nous permet maintenant d'ajouter un accessoire onPress sur l'aperçu de la carte,

70
00:05:32,030 --> 00:05:38,030
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

71
00:05:38,030 --> 00:05:42,050
déclencher la même fonction que lorsque je clique sur le bouton vers le bas Là.

72
00:05:42,140 --> 00:05:44,420
Je veux déclencher le choix du gestionnaire de carte,

73
00:05:44,660 --> 00:05:46,490
c'est donc ce que je fais.

74
00:05:46,520 --> 00:05:49,790
Maintenant, le gestionnaire de choix sur la carte devrait simplement aller à l'écran de la

75
00:05:49,790 --> 00:05:56,700
carte à droite, donc nous pouvons y dire des accessoires. la navigation. naviguer sur la carte et c'est tout pour la seconde.

76
00:05:56,720 --> 00:06:01,760
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

77
00:06:01,760 --> 00:06:04,140
encore sélectionner un lieu mais au moins nous pouvons le voir.

78
00:06:04,160 --> 00:06:09,500
Alors maintenant, si je clique sur le plus ici et que je choisis sur la carte, je

79
00:06:09,600 --> 00:06:15,930
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

80
00:06:15,930 --> 00:06:20,700
disponible que sur les composants qui sont directement chargés en tant qu'écrans, ce que le sélecteur de position n'est bien

81
00:06:20,700 --> 00:06:22,140
sûr pas. Maintenant, il

82
00:06:22,140 --> 00:06:23,750
existe diverses solutions de contournement, il y

83
00:06:23,760 --> 00:06:26,070
aurait un composant d'ordre supérieur que nous pouvons utiliser,

84
00:06:26,080 --> 00:06:29,910
nous pouvons également installer un package de hooks spécifique à la navigation React, mais ici,

85
00:06:30,360 --> 00:06:35,430
je vais adopter une approche simple et je m'assurerai simplement d'avoir un accessoire de navigation sur le sélecteur d'emplacement par

86
00:06:35,760 --> 00:06:39,720
aller au nouvel écran de lieu qui est l'endroit où j'utilise le sélecteur de position et

87
00:06:39,960 --> 00:06:45,600
là je définirai cet accessoire de navigation et les accessoires avant. navigation dont je dispose ici car il s'agit

88
00:06:45,600 --> 00:06:49,170
d'un composant directement chargé via un navigateur, donc maintenant je ne

89
00:06:49,170 --> 00:06:54,960
fais que transférer l'accès à mes accessoires de navigation. Et avec cela, si nous revenons maintenant en arrière et

90
00:06:55,680 --> 00:07:00,300
cliquons dessus, nous chargeons cette carte ici ou au moins un écran de carte, mais

91
00:07:00,320 --> 00:07:01,740
où est la carte?

92
00:07:01,820 --> 00:07:09,290
Eh bien, la carte est invisible car, et c'est important, pour votre carte, vous devez ajouter un style

93
00:07:09,290 --> 00:07:15,130
et ici, je vais ajouter des styles. map et cela peut être un style très simple mais il

94
00:07:15,140 --> 00:07:18,520
vous suffit de définir sa taille car par défaut, il n'occupera aucun espace.

95
00:07:18,560 --> 00:07:24,410
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

96
00:07:24,410 --> 00:07:26,840
cela, vous vous assurerez que vous voyez une carte.

97
00:07:26,840 --> 00:07:35,360
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

98
00:07:35,450 --> 00:07:40,490
Maps, bien que vous puissiez également utiliser Google Maps si vous le souhaitez, les documents

99
00:07:40,490 --> 00:07:44,680
officiels vous expliquent comment, sur Android, vous utilisez toujours Google Maps.

100
00:07:44,690 --> 00:07:46,820
Donc, ici, si je clique sur Choisir sur la

101
00:07:46,910 --> 00:07:53,430
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

102
00:07:53,430 --> 00:07:55,290
cliquant sur notre aperçu ici, c'est ce

103
00:07:55,350 --> 00:07:56,580
que nous avons

104
00:07:56,580 --> 00:08:00,500
configuré correctement, de sorte que cela fonctionne également, bien sûr, également sur iOS.

105
00:08:00,540 --> 00:08:05,940
Et d'ailleurs, l'animation ici n'est pas super fluide, sur un vrai appareil, ce sera, donc ce

106
00:08:05,940 --> 00:08:09,300
n'est pas un problème, c'est juste ici sur l'émulateur.

107
00:08:09,300 --> 00:08:14,040
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

108
00:08:14,040 --> 00:08:16,620
peu petit, sur un vrai appareil, il ne le sera pas.

109
00:08:16,620 --> 00:08:21,090
Donc ici, vous pouvez faire défiler, vous pourrez également pincer et zoomer plus tard, donc vous pouvez faire tout

110
00:08:21,090 --> 00:08:23,150
cela et avec cela, nous voyons la carte.

111
00:08:23,220 --> 00:08:27,570
Maintenant, la carte est utilisable mais bien sûr, nous ne pouvons pas encore choisir un endroit là-bas, c'est donc

112
00:08:27,600 --> 00:08:29,430
la prochaine chose que nous devons changer.