1
00:00:02,200 --> 00:00:07,030
Assurons-nous donc que nous pouvons voir toutes les données avec lesquelles nous travaillons. Dans l'élément de lieu, j'ai déjà

2
00:00:07,030 --> 00:00:09,310
eu une idée de l'adresse,

3
00:00:09,310 --> 00:00:14,820
je dois juste m'assurer que je l'intègre là-dedans. Donc, dans l'écran de la liste des lieux, lorsque j'utilise l'élément de lieu, au lieu

4
00:00:14,830 --> 00:00:20,940
de passer null pour l'adresse, nous devons bien sûr passer itemData. article. adresse là parce

5
00:00:20,940 --> 00:00:23,820
que nous devrions avoir l'adresse stockée.

6
00:00:23,820 --> 00:00:33,960
Donc, si nous essayons cela et que cela se recharge, nous voyons une adresse fictive ici et maintenant si nous ajoutons un nouvel élément qui devrait fonctionner

7
00:00:33,960 --> 00:00:41,260
comme un titre puis une image pour prendre une belle image et nous pouvons même nous déplacer un peu

8
00:00:41,260 --> 00:00:43,600
ici en appuyant sur la touche

9
00:00:43,600 --> 00:00:45,480
clé que vous voyez là-bas,

10
00:00:45,700 --> 00:00:46,630
alors

11
00:00:47,870 --> 00:00:55,760
maintenant si je prends une image ici, oui cela a l'air bien, celui-ci et confirmez en cliquant sur recadrer là-haut, ça

12
00:00:55,850 --> 00:00:56,900
a l'air bien.

13
00:00:56,900 --> 00:01:02,600
Maintenant, récupérez peut-être l'emplacement de l'utilisateur, puis enregistrez-le, cela semble bon.

14
00:01:02,600 --> 00:01:04,350
Ceci est l'adresse du siège de Google, cela

15
00:01:04,350 --> 00:01:05,550
ressemble à l'image que j'ai

16
00:01:05,550 --> 00:01:06,630
prise donc c'est sympa.

17
00:01:06,630 --> 00:01:12,240
Assurons-nous que sur la page de détail, nous voyons également un peu plus à ce sujet et pour cela sur

18
00:01:12,570 --> 00:01:19,890
l'écran de détail du lieu ici, nous pouvons bien sûr modifier cela et ajouter une vue de défilement afin de nous assurer que nous pouvons toujours tout

19
00:01:19,890 --> 00:01:25,460
voir, nous Je n'ai pas besoin d'une liste plate ici car nous n'aurons pas une quantité infinie d'éléments, peut-être juste

20
00:01:25,460 --> 00:01:28,690
un peu de défilement qui est nécessaire en fonction de la

21
00:01:29,180 --> 00:01:32,840
taille de l'appareil, puis là-dedans, je veux vraiment pouvoir sortir une image .

22
00:01:32,840 --> 00:01:36,410
Donc ici, je vais sortir mon image et en dessous, je

23
00:01:36,410 --> 00:01:43,270
veux aussi pouvoir sortir mon adresse et puis aussi en fait, un aperçu de la carte, donc je vais aussi importer

24
00:01:43,280 --> 00:01:47,190
ceci et nous aurons besoin de modifier un peu ce composant peu

25
00:01:47,200 --> 00:01:55,110
donc mais pour l'instant je vais juste importer la prévisualisation de la carte à partir de la prévisualisation de la carte des composants, comme ceci

26
00:01:55,110 --> 00:01:57,830
et afficher ceci sous mon texte ici.

27
00:01:57,890 --> 00:02:06,650
Maintenant, dans le texte, je veux avoir mon texte d'adresse à la fin et c'est bien sûr toutes les données que je m'attends à

28
00:02:06,650 --> 00:02:11,040
passer en tant que params ou avec l'aide de params, donc

29
00:02:11,120 --> 00:02:16,660
pour être précis lorsque nous sélectionnons un élément, nous passons déjà l'identifiant du lieu ici.

30
00:02:16,700 --> 00:02:25,200
Ainsi, dans l'écran de détail du lieu, je peux obtenir l'identifiant du lieu en accédant aux accessoires. la navigation. getParam place ID est l'identifiant que

31
00:02:25,230 --> 00:02:32,430
j'ai utilisé, puis nous pouvons bien sûr utiliser le sélecteur d'utilisation pour obtenir les données

32
00:02:32,490 --> 00:02:33,530
d'ajustement

33
00:02:33,540 --> 00:02:36,680
de notre magasin Redux, donc à partir

34
00:02:36,780 --> 00:02:47,260
de React Redux, c'est là que nous importons cela, puis ici, nous pouvons obtenir notre emplacement sélectionné avec le aide du sélecteur

35
00:02:47,300 --> 00:02:57,950
d'utilisation, passez une fonction et accédez à l'état. des endroits. places, puis la méthode find pour trouver un endroit spécifique

36
00:02:57,950 --> 00:03:03,920
où l'ID de lieu doit être égal à l'ID de lieu que nous extrayons de nos paramètres, c'est

37
00:03:03,920 --> 00:03:11,420
l'endroit que nous avons chargé pour cet écran et le lieu sélectionné a donc bien sûr un champ d'adresse qui nous pouvons accéder

38
00:03:11,420 --> 00:03:17,750
car cela suit notre modèle de place à la fin et pour l'image, nous pouvons bien sûr ensuite également lier

39
00:03:17,750 --> 00:03:26,600
la source et définir l'URI sur cet objet, nous passons la source à selectedPlace. imageUri parce que dans mon modèle de lieu là-bas,

40
00:03:26,690 --> 00:03:30,510
je nomme cette image URI, c'est ce que

41
00:03:30,520 --> 00:03:31,440
j'extrais

42
00:03:31,440 --> 00:03:33,640
ici et pour l'aperçu

43
00:03:33,940 --> 00:03:38,380
de la carte, je veux passer à mon emplacement.

44
00:03:38,390 --> 00:03:42,590
Heureusement, mon aperçu de la carte prend bien sûr un emplacement, il

45
00:03:42,590 --> 00:03:49,430
recherche cet accessoire de localisation afin que je puisse le transmettre et cela devrait être un objet avec la touche

46
00:03:49,520 --> 00:03:57,340
lat, afin que nous puissions utiliser selectedPlace. lat pour cela et la touche lng qui est sélectionnéePlace. lng.

47
00:03:57,360 --> 00:04:01,540
Alors maintenant, nous passons tout cela là-dedans.

48
00:04:01,590 --> 00:04:09,030
Maintenant, je vais également envelopper le texte ici dans une vue, puis attribuer des styles ici,

49
00:04:09,070 --> 00:04:19,490
donc sur l'image ici, je veux avoir un style de styles. image sur cette vue ici qui enveloppe tout mon contenu basé sur

50
00:04:19,490 --> 00:04:21,670
la localisation, je veux

51
00:04:21,800 --> 00:04:28,350
avoir un style de disons emplacement conteneur. Sur cette vue ici, un style

52
00:04:28,370 --> 00:04:29,600
de

53
00:04:31,980 --> 00:04:44,550
conteneur d'adresse, sur le texte ici, le style d'adresse et sur l'aperçu de la carte, je vais également définir un style

54
00:04:44,550 --> 00:04:46,400
et nommer cet

55
00:04:46,400 --> 00:04:49,860
aperçu de la carte, comme ceci.

56
00:04:51,410 --> 00:04:56,630
Maintenant, si vous utilisez les mêmes noms exacts, vous trouverez ci-joint un style que j'ai configuré pour vous, vous pouvez simplement

57
00:04:56,630 --> 00:04:59,010
remplacer votre objet styles par celui-ci et cela définit

58
00:04:59,120 --> 00:05:04,220
des styles pour tous ces identificateurs que je viens d'ajouter pour que tout ressemble à ce que je veulent qu'il

59
00:05:04,220 --> 00:05:04,520
regarde.

60
00:05:04,520 --> 00:05:09,200
Donc, c'est attaché et vous pouvez l'utiliser pour vous assurer d'obtenir le même style hors de la boîte

61
00:05:09,200 --> 00:05:13,730
sans que j'écrive tous ces styles parce que nous avons écrit tellement de styles tout au

62
00:05:13,730 --> 00:05:18,430
long de ce cours, ici je veux vraiment me concentrer sur la fonctionnalité native et non réécrivez-les tous.

63
00:05:18,490 --> 00:05:23,420
Maintenant, une chose importante, dans la vue de défilement, vous devez également définir le style du

64
00:05:23,420 --> 00:05:29,300
conteneur de contenu et là, j'utiliserai un style en ligne rapide et sale pour définir l'alignement des éléments ici

65
00:05:29,300 --> 00:05:37,710
sur les centres afin que tout soit bien centré sur l'axe horizontal. Avec cela, nous devrions être en mesure de voir les détails d'un lieu.

66
00:05:37,710 --> 00:05:41,590
Une note importante, j'utilise la constante de couleurs dans les styles que

67
00:05:41,620 --> 00:05:50,490
je vous ai fournis, vous devez donc vous assurer d'importer cela, d'importer des couleurs à partir de constantes / couleurs et avec cette importation ajoutée ici également,

68
00:05:50,490 --> 00:05:56,970
si vous enregistrez cela et que ces rechargements, vous devriez pouvoir voir ces lieux sur Android et bien sûr vous

69
00:05:56,970 --> 00:06:00,480
pouvez afficher un texte de remplacement si vous n'avez pas de

70
00:06:00,480 --> 00:06:03,360
lieux mais maintenant ici, vous voyez les lieux

71
00:06:03,360 --> 00:06:06,570
et si je clique dessus, c'est l'écran de détail.

72
00:06:06,750 --> 00:06:10,170
Maintenant, le seul problème que j'ai avec c'est que ça a l'air

73
00:06:10,170 --> 00:06:10,890
bien, c'est

74
00:06:10,980 --> 00:06:17,300
bien mais si je clique sur la carte, rien ne se passe et bien sûr là je veux aller à l'écran de

75
00:06:17,300 --> 00:06:23,650
la carte aussi mais de manière non modifiable, pour que je aller à l'écran de la carte sans pouvoir y apporter de modification.

76
00:06:23,750 --> 00:06:25,250
C'est le dernier morceau que nous

77
00:06:25,250 --> 00:06:25,880
devons ajouter.