1
00:00:02,070 --> 00:00:07,410
Donc, dans l'écran de la liste des lieux, je veux sortir une liste des lieux sans surprise et pour cela,

2
00:00:07,550 --> 00:00:09,780
vous connaissez un composant de React Native que nous

3
00:00:09,780 --> 00:00:14,010
pouvons importer et c'est la liste plate. La liste plate est bien sûr parfaite

4
00:00:14,040 --> 00:00:15,620
pour sortir une liste.

5
00:00:15,780 --> 00:00:18,570
Alors ici, je vais revenir à plat

6
00:00:18,900 --> 00:00:21,890
maintenant et je veux avoir accès à mes lieux.

7
00:00:21,930 --> 00:00:23,970
Ceux-ci sont stockés dans Redux afin

8
00:00:23,970 --> 00:00:30,960
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

9
00:00:30,960 --> 00:00:37,740
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.

10
00:00:37,740 --> 00:00:41,630
Donc ici, je veux avoir accès à mes lieux à l'aide du

11
00:00:41,640 --> 00:00:47,190
sélecteur d'utilisation, c'est un jeu d'enfant, nous passons dans cette fonction qui reçoit notre magasin Redux, notre

12
00:00:47,190 --> 00:00:53,490
état Redux qui est stocké dans le magasin là-bas et là je veux avoir accès à la tranche d'endroits

13
00:00:53,490 --> 00:00:59,880
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

14
00:01:00,240 --> 00:01:02,880
réducteur de lieux et dans ce réducteur, nous avons une autre clé de

15
00:01:03,000 --> 00:01:09,870
lieux, donc à la fin ici, je veux accéder à l'état. des endroits. endroits et avec cela, nous savons quel

16
00:01:09,870 --> 00:01:12,660
type de données nous voulons alimenter dans la liste plate.

17
00:01:12,660 --> 00:01:19,800
Maintenant, je vais également ajouter un extracteur de clés ici pour dire à la liste plate où trouver un ID unique pour chaque

18
00:01:19,800 --> 00:01:23,480
élément et pour moi, c'est dans la propriété ID de chaque endroit

19
00:01:23,490 --> 00:01:29,820
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

20
00:01:29,820 --> 00:01:32,920
un composant pour chaque article que nous voulons sortir.

21
00:01:33,060 --> 00:01:38,730
Maintenant, pour cela, je vais réellement créer un tout nouveau composant dans le dossier des

22
00:01:38,790 --> 00:01:47,910
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

23
00:01:48,180 --> 00:01:53,040
le vôtre ou le contenu du vôtre par le mien, mais je vais bien sûr vous expliquer ce que je

24
00:01:53,040 --> 00:01:53,790
fais là-dedans.

25
00:01:53,910 --> 00:01:59,520
Ceci est un composant de base car nous l'avons également construit plusieurs fois tout au long de ce cours,

26
00:01:59,520 --> 00:02:05,460
j'ai juste mon propre composant ici qui est capable de produire une image car nous en aurons besoin plus tard, qui

27
00:02:05,520 --> 00:02:09,240
a ensuite une vue avec deux morceaux de texte qui asseyez-vous à côté

28
00:02:09,270 --> 00:02:15,930
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

29
00:02:15,930 --> 00:02:21,900
sûr, ce sont des informations que nous n'avons pas encore, mais nous les ajouterons tout au long de ce module et nous

30
00:02:21,900 --> 00:02:27,720
avons un composant d'opacité tactile autour de cela afin que nous puissions appuyer sur chaque endroit et quand. nous appuyons dessus,

31
00:02:27,720 --> 00:02:31,400
nous déclenchons une fonction que nous nous attendons à obtenir sur l'hélice de sélection.

32
00:02:31,440 --> 00:02:36,990
Maintenant, dans mon style ici, je l'ai configuré de telle sorte que l'image et ce bloc de texte

33
00:02:36,990 --> 00:02:43,230
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

34
00:02:43,230 --> 00:02:49,860
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

35
00:02:49,860 --> 00:02:56,310
bien sûr également changer pour par exemple cette couleur grisâtre. Ensuite, nous avons le conteneur d'informations qui est

36
00:02:56,310 --> 00:03:01,590
le conteneur contenant les deux morceaux de texte qui sont maintenant organisés dans une colonne au-dessus

37
00:03:02,010 --> 00:03:07,290
de l'autre, puis nous avons le titre qui est un peu plus grand que l'adresse et

38
00:03:07,290 --> 00:03:14,210
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

39
00:03:14,210 --> 00:03:17,330
lieu que nous pouvons maintenant importer dans l'écran

40
00:03:17,330 --> 00:03:27,850
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.

41
00:03:27,850 --> 00:03:34,780
Donc là, je veux sortir l'élément placé en tant que composant à fermeture automatique et maintenant placer l'élément, ce

42
00:03:34,780 --> 00:03:40,630
nouveau composant a besoin de certaines données d'entrée. Nous devons passer un accessoire on select qui pointe vers

43
00:03:40,630 --> 00:03:47,560
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,

44
00:03:47,560 --> 00:03:53,730
donc quatre accessoires qui doivent être fournis. Alors faisons-le ici. Pour l'image, nous n'avons pas encore d'image,

45
00:03:53,740 --> 00:03:59,500
alors ici je vais juste passer null pour le moment. Pour le titre, nous pouvons le faire bien sûr,

46
00:03:59,590 --> 00:04:06,010
nous pouvons pointer sur itemData. article. titre car un seul élément est juste un élément suivant notre modèle

47
00:04:06,010 --> 00:04:13,100
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

48
00:04:13,100 --> 00:04:14,470
mettre cela à

49
00:04:14,780 --> 00:04:16,260
zéro et pour sélectionner,

50
00:04:16,280 --> 00:04:18,440
eh bien nous pouvons bien sûr

51
00:04:18,440 --> 00:04:19,940
définir cela, là, je

52
00:04:19,970 --> 00:04:25,070
veux aller à une nouvelle page après tout. Nous pouvons donc le faire avec une fonction en ligne anonyme ici ou avec

53
00:04:25,070 --> 00:04:26,750
une fonction nommée stockée dans une constante distincte,

54
00:04:27,200 --> 00:04:28,300
tout ce que vous voulez,

55
00:04:28,610 --> 00:04:35,440
je le ferai en ligne et là je pourrai utiliser des accessoires. la navigation. naviguer et aller à l'écran de détail de

56
00:04:35,450 --> 00:04:40,580
lieu avec l'identifiant de détail de lieu qui bien sûr dans mon navigateur est cet identifiant ici et

57
00:04:43,380 --> 00:04:43,950
là,

58
00:04:43,980 --> 00:04:50,610
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

59
00:04:50,610 --> 00:04:52,860
que je veux transmettre, c'est le titre du

60
00:04:52,860 --> 00:04:57,680
lieu et c'est bien sûr itemData. article. title, donc exactement la

61
00:04:57,750 --> 00:05:01,770
même chose que j'introduis dans l'accessoire title ici et c'est aussi l'ID

62
00:05:01,770 --> 00:05:06,650
de lieu qui est itemData. article. id et nous avons également

63
00:05:06,720 --> 00:05:08,890
cet ID déjà, donc c'est déjà quelque

64
00:05:08,910 --> 00:05:14,640
chose que nous générons lorsque nous ajoutons un nouvel endroit. Avec cela, nous avons un élément de lieu qui nous

65
00:05:14,640 --> 00:05:19,800
amène à l'écran de détail du lieu et puisque nous avons déjà un squelette de base dans cet

66
00:05:19,950 --> 00:05:21,890
écran, nous devrions pouvoir le voir.

67
00:05:21,960 --> 00:05:28,170
Une chose que j'ajouterai à l'écran de détail du lieu est cependant la configuration de mes options de navigation où

68
00:05:28,170 --> 00:05:34,950
j'ai besoin de cette fonction dynamique qui retourne ensuite un objet de configuration parce que là je veux définir le titre de

69
00:05:34,950 --> 00:05:41,040
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

70
00:05:41,040 --> 00:05:47,070
titre et d'ID de lieu à ce nouvel écran. Le titre du lieu est ce que je veux extraire et définir ici

71
00:05:47,070 --> 00:05:47,890
dans mon en-tête,

72
00:05:47,940 --> 00:05:56,040
donc là je peux définir le titre de l'en-tête sur navData. la navigation. getParam place title afin

73
00:05:56,070 --> 00:06:02,910
que nous ayons ce titre dans l'en-tête. Et maintenant avec ça, essayons, sauvons

74
00:06:02,910 --> 00:06:11,230
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,

75
00:06:11,230 --> 00:06:18,100
nous allons à l'écran de détail où nous voyons cela dans l'en-tête. Essayons également sur Android avec un

76
00:06:18,700 --> 00:06:26,070
test, enregistrons cela, cliquez dessus et cela fonctionne. C'est donc le flux de base pour cela, mais une chose

77
00:06:26,070 --> 00:06:30,300
que nous n'avons pas encore fait bien sûr est d'utiliser des fonctionnalités natives.

78
00:06:30,570 --> 00:06:34,710
Alors maintenant, il est vraiment temps de le faire et je veux commencer par la caméra.