Donc, dans l'écran de la liste des lieux, je veux sortir une liste des lieux sans surprise et pour cela,
vous connaissez un composant de React Native que nous
pouvons importer et c'est la liste plate. La liste plate est bien sûr parfaite
pour sortir une liste.
Alors ici, je vais revenir à plat
maintenant et je veux avoir accès à mes lieux.
Ceux-ci sont stockés dans Redux afin
que nous puissions ou avec l'aide de Redux, afin que nous puissions importer React Redux ici ou pour être précis, à partir de ce
paquet, nous importons le sélecteur d'utilisation parce que maintenant dans notre composant, nous pouvons l'utiliser pour avoir accès aux données stocké dans Redux.
Donc ici, je veux avoir accès à mes lieux à l'aide du
sélecteur d'utilisation, c'est un jeu d'enfant, nous passons dans cette fonction qui reçoit notre magasin Redux, notre
état Redux qui est stocké dans le magasin là-bas et là je veux avoir accès à la tranche d'endroits
et ici j'utilise des endroits parce que dans l'application. js, j'ai utilisé des lieux comme identifiant ici, qui nous amène à la tranche gérée avec le
réducteur de lieux et dans ce réducteur, nous avons une autre clé de
lieux, donc à la fin ici, je veux accéder à l'état. des endroits. endroits et avec cela, nous savons quel
type de données nous voulons alimenter dans la liste plate.
Maintenant, je vais également ajouter un extracteur de clés ici pour dire à la liste plate où trouver un ID unique pour chaque
élément et pour moi, c'est dans la propriété ID de chaque endroit
et bien sûr, nous devons ajouter un élément de rendu, afin que nous obtenions nos données de données d'article, puis sortir
un composant pour chaque article que nous voulons sortir.
Maintenant, pour cela, je vais réellement créer un tout nouveau composant dans le dossier des
composants et c'est le PlaceItem. fichier js. Maintenant, pour gagner du temps, j'ai attaché mon PlaceItem. fichier js à cette conférence et vous pouvez simplement remplacer
le vôtre ou le contenu du vôtre par le mien, mais je vais bien sûr vous expliquer ce que je
fais là-dedans.
Ceci est un composant de base car nous l'avons également construit plusieurs fois tout au long de ce cours,
j'ai juste mon propre composant ici qui est capable de produire une image car nous en aurons besoin plus tard, qui
a ensuite une vue avec deux morceaux de texte qui asseyez-vous à côté
de cette image, grâce au style que j'ai appliqué là-bas. Là, je produis le titre et l'adresse de cet endroit, bien
sûr, ce sont des informations que nous n'avons pas encore, mais nous les ajouterons tout au long de ce module et nous
avons un composant d'opacité tactile autour de cela afin que nous puissions appuyer sur chaque endroit et quand. nous appuyons dessus,
nous déclenchons une fonction que nous nous attendons à obtenir sur l'hélice de sélection.
Maintenant, dans mon style ici, je l'ai configuré de telle sorte que l'image et ce bloc de texte
soient assis côte à côte dans une rangée ici avec une direction de flexion, l'image est alors l'image arrondie, donc c'est
une image arrondie, c'est un cercle avec une couleur d'arrière-plan complète dans le cas où nous n'avons pas encore d'image que vous pouvez
bien sûr également changer pour par exemple cette couleur grisâtre. Ensuite, nous avons le conteneur d'informations qui est
le conteneur contenant les deux morceaux de texte qui sont maintenant organisés dans une colonne au-dessus
de l'autre, puis nous avons le titre qui est un peu plus grand que l'adresse et
là, je veux également utiliser noir comme couleur de texte. C'est la configuration que j'utiliserai ici et c'est l'élément de
lieu que nous pouvons maintenant importer dans l'écran
de la liste des lieux, nous pouvons donc importer l'élément de lieu à partir des éléments de lieu des composants et le publier ici dans les éléments de rendu.
Donc là, je veux sortir l'élément placé en tant que composant à fermeture automatique et maintenant placer l'élément, ce
nouveau composant a besoin de certaines données d'entrée. Nous devons passer un accessoire on select qui pointe vers
une fonction qui doit être exécutée lorsque nous tapons sur une icône. Nous devons passer un accessoire d'image, un accessoire de titre et un accessoire d'adresse,
donc quatre accessoires qui doivent être fournis. Alors faisons-le ici. Pour l'image, nous n'avons pas encore d'image,
alors ici je vais juste passer null pour le moment. Pour le titre, nous pouvons le faire bien sûr,
nous pouvons pointer sur itemData. article. titre car un seul élément est juste un élément suivant notre modèle
de lieu et qui a bien sûr un accessoire de titre, afin que nous puissions y accéder en toute sécurité. Pour l'adresse, nous ne l'avons pas encore, je vais donc
mettre cela à
zéro et pour sélectionner,
eh bien nous pouvons bien sûr
définir cela, là, je
veux aller à une nouvelle page après tout. Nous pouvons donc le faire avec une fonction en ligne anonyme ici ou avec
une fonction nommée stockée dans une constante distincte,
tout ce que vous voulez,
je le ferai en ligne et là je pourrai utiliser des accessoires. la navigation. naviguer et aller à l'écran de détail de
lieu avec l'identifiant de détail de lieu qui bien sûr dans mon navigateur est cet identifiant ici et
là,
je veux également passer des données supplémentaires, des paramètres, donc je vais passer un deuxième argument ici pour naviguer et là sont deux informations
que je veux transmettre, c'est le titre du
lieu et c'est bien sûr itemData. article. title, donc exactement la
même chose que j'introduis dans l'accessoire title ici et c'est aussi l'ID
de lieu qui est itemData. article. id et nous avons également
cet ID déjà, donc c'est déjà quelque
chose que nous générons lorsque nous ajoutons un nouvel endroit. Avec cela, nous avons un élément de lieu qui nous
amène à l'écran de détail du lieu et puisque nous avons déjà un squelette de base dans cet
écran, nous devrions pouvoir le voir.
Une chose que j'ajouterai à l'écran de détail du lieu est cependant la configuration de mes options de navigation où
j'ai besoin de cette fonction dynamique qui retourne ensuite un objet de configuration parce que là je veux définir le titre de
l'en-tête en fonction des paramètres que j'obtiens parce que dans la liste des lieux écran, je passe un paramètre de
titre et d'ID de lieu à ce nouvel écran. Le titre du lieu est ce que je veux extraire et définir ici
dans mon en-tête,
donc là je peux définir le titre de l'en-tête sur navData. la navigation. getParam place title afin
que nous ayons ce titre dans l'en-tête. Et maintenant avec ça, essayons, sauvons
tout et ajoutons un nouvel endroit, un test. Cliquez sur enregistrer l'endroit, nous sommes repris et nous voyons qu'ici, si je tape dessus,
nous allons à l'écran de détail où nous voyons cela dans l'en-tête. Essayons également sur Android avec un
test, enregistrons cela, cliquez dessus et cela fonctionne. C'est donc le flux de base pour cela, mais une chose
que nous n'avons pas encore fait bien sûr est d'utiliser des fonctionnalités natives.
Alors maintenant, il est vraiment temps de le faire et je veux commencer par la caméra.