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à
eu une idée de l'adresse,
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
de passer null pour l'adresse, nous devons bien sûr passer itemData. article. adresse là parce
que nous devrions avoir l'adresse stockée.
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
comme un titre puis une image pour prendre une belle image et nous pouvons même nous déplacer un peu
ici en appuyant sur la touche
clé que vous voyez là-bas,
alors
maintenant si je prends une image ici, oui cela a l'air bien, celui-ci et confirmez en cliquant sur recadrer là-haut, ça
a l'air bien.
Maintenant, récupérez peut-être l'emplacement de l'utilisateur, puis enregistrez-le, cela semble bon.
Ceci est l'adresse du siège de Google, cela
ressemble à l'image que j'ai
prise donc c'est sympa.
Assurons-nous que sur la page de détail, nous voyons également un peu plus à ce sujet et pour cela sur
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
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
un peu de défilement qui est nécessaire en fonction de la
taille de l'appareil, puis là-dedans, je veux vraiment pouvoir sortir une image .
Donc ici, je vais sortir mon image et en dessous, je
veux aussi pouvoir sortir mon adresse et puis aussi en fait, un aperçu de la carte, donc je vais aussi importer
ceci et nous aurons besoin de modifier un peu ce composant peu
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
et afficher ceci sous mon texte ici.
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 à
passer en tant que params ou avec l'aide de params, donc
pour être précis lorsque nous sélectionnons un élément, nous passons déjà l'identifiant du lieu ici.
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
j'ai utilisé, puis nous pouvons bien sûr utiliser le sélecteur d'utilisation pour obtenir les données
d'ajustement
de notre magasin Redux, donc à partir
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
d'utilisation, passez une fonction et accédez à l'état. des endroits. places, puis la méthode find pour trouver un endroit spécifique
où l'ID de lieu doit être égal à l'ID de lieu que nous extrayons de nos paramètres, c'est
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
car cela suit notre modèle de place à la fin et pour l'image, nous pouvons bien sûr ensuite également lier
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,
je nomme cette image URI, c'est ce que
j'extrais
ici et pour l'aperçu
de la carte, je veux passer à mon emplacement.
Heureusement, mon aperçu de la carte prend bien sûr un emplacement, il
recherche cet accessoire de localisation afin que je puisse le transmettre et cela devrait être un objet avec la touche
lat, afin que nous puissions utiliser selectedPlace. lat pour cela et la touche lng qui est sélectionnéePlace. lng.
Alors maintenant, nous passons tout cela là-dedans.
Maintenant, je vais également envelopper le texte ici dans une vue, puis attribuer des styles ici,
donc sur l'image ici, je veux avoir un style de styles. image sur cette vue ici qui enveloppe tout mon contenu basé sur
la localisation, je veux
avoir un style de disons emplacement conteneur. Sur cette vue ici, un style
de
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
et nommer cet
aperçu de la carte, comme ceci.
Maintenant, si vous utilisez les mêmes noms exacts, vous trouverez ci-joint un style que j'ai configuré pour vous, vous pouvez simplement
remplacer votre objet styles par celui-ci et cela définit
des styles pour tous ces identificateurs que je viens d'ajouter pour que tout ressemble à ce que je veulent qu'il
regarde.
Donc, c'est attaché et vous pouvez l'utiliser pour vous assurer d'obtenir le même style hors de la boîte
sans que j'écrive tous ces styles parce que nous avons écrit tellement de styles tout au
long de ce cours, ici je veux vraiment me concentrer sur la fonctionnalité native et non réécrivez-les tous.
Maintenant, une chose importante, dans la vue de défilement, vous devez également définir le style du
conteneur de contenu et là, j'utiliserai un style en ligne rapide et sale pour définir l'alignement des éléments ici
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.
Une note importante, j'utilise la constante de couleurs dans les styles que
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,
si vous enregistrez cela et que ces rechargements, vous devriez pouvoir voir ces lieux sur Android et bien sûr vous
pouvez afficher un texte de remplacement si vous n'avez pas de
lieux mais maintenant ici, vous voyez les lieux
et si je clique dessus, c'est l'écran de détail.
Maintenant, le seul problème que j'ai avec c'est que ça a l'air
bien, c'est
bien mais si je clique sur la carte, rien ne se passe et bien sûr là je veux aller à l'écran de
la carte aussi mais de manière non modifiable, pour que je aller à l'écran de la carte sans pouvoir y apporter de modification.
C'est le dernier morceau que nous
devons ajouter.