1
00:00:02,410 --> 00:00:07,070
Donc pour ce module, ci-joint vous retrouvez un simple projet de départ.

2
00:00:07,090 --> 00:00:09,640
Voilà l'application. fichier js avec une vue vide,

3
00:00:09,790 --> 00:00:11,680
donc il ne se passe pas trop de choses là-bas.

4
00:00:11,770 --> 00:00:16,870
Vous obtenez un dossier de constantes avec une couleur de base que j'ai mis en place pour vous et c'est tout.

5
00:00:16,870 --> 00:00:21,010
A part ça, il n'y a rien d'intéressant ici, c'est une application très

6
00:00:21,010 --> 00:00:25,320
basique que nous allons maintenant utiliser pour construire cette application que je viens d'esquisser.

7
00:00:25,420 --> 00:00:28,930
Maintenant, bien sûr, vous pouvez absolument aller de l'avant et créer vous-même

8
00:00:28,930 --> 00:00:34,870
les bases, donc ces trois écrans différents dont nous avons finalement besoin ou quatre écrans différents, un pour tous les lieux, un

9
00:00:34,870 --> 00:00:40,390
pour les détails du lieu, un pour créer un nouveau place et un pour la carte plein écran que nous

10
00:00:40,390 --> 00:00:45,590
voulons également montrer, vous pouvez absolument le faire et construire le squelette de base pour ces écrans par vous-même,

11
00:00:45,590 --> 00:00:51,100
configurer également la navigation de base car ce sont bien sûr toutes les choses que nous avons déjà faites plusieurs

12
00:00:51,370 --> 00:00:52,600
fois Dans ce cours.

13
00:00:52,750 --> 00:00:57,310
C'est aussi des choses que je vais commencer dans les prochaines conférences au cas où vous voudriez suivre ou

14
00:00:57,310 --> 00:01:01,000
comparer votre solution à la mienne et par la suite, nous nous plongerons dans la

15
00:01:01,090 --> 00:01:09,150
chair de ce module, nous nous pencherons sur la façon d'ajouter des capacités de périphérique natif . Commençons donc par les

16
00:01:09,210 --> 00:01:10,510
bases.

17
00:01:10,510 --> 00:01:17,080
Je vais ajouter un nouvel écran de dossier avec les quatre écrans que je veux avoir et ce serait le

18
00:01:17,080 --> 00:01:28,360
fichier d'écran de la liste des lieux, le fichier d'écran des détails du lieu, le nouveau fichier d'écran du lieu et également l'écran de la carte où nous pouvons alors voir ce plein écran carte

19
00:01:28,360 --> 00:01:33,770
et je vais les remplir avec du contenu tout au long de ce module, mais ce

20
00:01:33,820 --> 00:01:36,970
sont les quatre écrans de base dont j'ai besoin.

21
00:01:36,970 --> 00:01:43,460
Je vais également ajouter un dossier de navigation afin que nous puissions y configurer la navigation et

22
00:01:43,470 --> 00:01:51,030
ici, je vais configurer mon PlacesNavigator. fichier js. Maintenant, dans le projet de démarrage que

23
00:01:51,450 --> 00:01:52,920
j'ai fourni, la navigation

24
00:01:52,920 --> 00:01:56,720
React et toutes ses dépendances sont déjà installées, donc si vous l'utilisez,

25
00:01:58,260 --> 00:02:03,480
vous n'avez pas besoin de l'installer manuellement, sinon si vous utilisez votre propre projet de démarrage,

26
00:02:03,480 --> 00:02:09,660
assurez-vous de installez React navigation avec npm installez React navigation et assurez-vous également d'installer ces dépendances supplémentaires ici pour

27
00:02:09,660 --> 00:02:12,280
vous assurer que React navigation fonctionne avec expo.

28
00:02:12,330 --> 00:02:19,290
Donc, avec cela installé, maintenant bien sûr, nous pouvons configurer la navigation ici dans le navigateur de lieux et pour cela, ici,

29
00:02:19,380 --> 00:02:24,150
j'importe à partir de la navigation React et ce que j'importe est bien sûr la

30
00:02:26,730 --> 00:02:31,020
fonction de création de navigateur de pile, alors créez un navigateur de

31
00:02:31,020 --> 00:02:37,110
pile et créez également un conteneur d'application, ce que nous devons également faire, car nous devons faire les deux

32
00:02:37,110 --> 00:02:41,580
- créer un navigateur de pile et configurer le conteneur d'application par la suite.

33
00:02:41,580 --> 00:02:46,830
Maintenant, nous devons également importer les écrans avec lesquels nous voulons travailler et ce serait l'écran de la liste des lieux que j'importe

34
00:02:47,070 --> 00:02:53,640
à partir du dossier screens et là, c'est l'écran de la liste des lieux. Nous aurons également besoin de l'écran de détail de

35
00:02:53,640 --> 00:02:59,910
lieu bien sûr, de l'écran de détail de lieu qui est importé à partir de l'écran de détail des

36
00:02:59,910 --> 00:03:02,850
écrans et aussi, évidemment, des deux autres écrans.

37
00:03:02,850 --> 00:03:12,800
Nous avons donc obtenu le nouvel écran de lieu à partir des écrans, le nouvel écran de lieu et enfin et surtout, nous devons également importer notre

38
00:03:12,830 --> 00:03:18,770
écran de carte ici à partir du dossier screens, puis ce serait l'écran de carte.

39
00:03:18,770 --> 00:03:26,800
Maintenant, nous pouvons configurer notre navigateur de pile ici et je vais stocker ce navigateur de lieux dans une constante et comme

40
00:03:26,990 --> 00:03:31,440
vous l'avez également appris, nous mappons maintenant les identifiants à nos écrans,

41
00:03:31,550 --> 00:03:38,720
nous avons donc peut-être l'identifiant des lieux mappé à l'écran de la liste des lieux , nous avons obtenu l'identifiant

42
00:03:38,840 --> 00:03:41,180
de détail de lieu mappé sur

43
00:03:41,180 --> 00:03:49,300
l'écran de détail de lieu, nous avons également obtenu le nouvel identifiant de lieu mappé sur le nouvel écran de lieu et enfin

44
00:03:49,330 --> 00:03:57,040
et surtout, peut-être la carte mappée sur l'écran de carte. Et avec cela, nous pouvons configurer quelques options de navigation par défaut

45
00:03:57,130 --> 00:04:02,680
ici, donc je vais passer un deuxième argument et bien sûr, le configurer est totalement facultatif, mais je

46
00:04:02,680 --> 00:04:09,970
vais donc ajouter des options de navigation par défaut à chaque écran et je veux définir mon le style d'en-tête ici et assurez-vous que

47
00:04:09,970 --> 00:04:14,010
nous utilisons une couleur d'arrière-plan selon que nous fonctionnons sur Android ou non.

48
00:04:14,140 --> 00:04:21,880
Par conséquent, j'importerai cette chose API de plate-forme à partir de React Native et j'aurai également besoin de ma couleur, donc j'importe également

49
00:04:21,910 --> 00:04:30,790
des couleurs à partir de constantes / couleurs, ce qui est également nécessaire car avec cela, nous pouvons maintenant vérifier si le système d'exploitation de la

50
00:04:30,790 --> 00:04:37,120
plate-forme est Android et si c'est le cas, nous pouvons nous assurer que la couleur d'arrière-plan de l'en-tête

51
00:04:37,120 --> 00:04:39,400
est notre couleur principale, sinon

52
00:04:39,580 --> 00:04:46,600
je ne définirai aucune couleur, je veux utiliser l'aspect transparent par défaut qu'iOS utilise et ici également configurer une couleur de

53
00:04:46,600 --> 00:04:53,080
teinte d'en-tête pour le texte là-bas, vérifiant à nouveau la plate-forme parce que si la plate-forme est Android, car

54
00:04:53,080 --> 00:04:59,560
nous avons un fond uni, je vais définir la couleur de la teinte sur blanc, pour iOS, je ferai

55
00:04:59,590 --> 00:05:06,520
le contraire, là je le définirai sur mon couleur primaire. Maintenant que c'est ici, je n'ai pas de polices personnalisées dans ce projet,

56
00:05:06,520 --> 00:05:12,790
bien sûr, vous pouvez en ajouter si vous le souhaitez. Avec cette configuration, nous pouvons exporter notre conteneur d'application que nous

57
00:05:12,790 --> 00:05:21,230
devons donc créer avec créer un conteneur d'application et passer dans le navigateur de lieux ici. Maintenant, c'est la navigation configurée, bien sûr

58
00:05:21,230 --> 00:05:24,620
dans l'application.

59
00:05:24,620 --> 00:05:24,620
fichier js, nous pouvons maintenant l'utiliser.

60
00:05:24,620 --> 00:05:32,200
Donc, ici, nous devons importer le navigateur de lieux à partir du dossier de navigation, navigateur de lieux, nous n'avons plus besoin d'importer la

61
00:05:32,240 --> 00:05:39,920
vue ici et nous pouvons simplement retourner le navigateur de lieux. Comme je ne charge pas de polices personnalisées, je n'ai pas

62
00:05:39,920 --> 00:05:44,540
non plus besoin de faire cette application en chargeant des trucs que nous avons faits

63
00:05:44,540 --> 00:05:49,610
dans les modules précédents ou dans d'autres modules, ici je peux simplement le retourner dès le début.

64
00:05:51,500 --> 00:05:58,660
Maintenant, dans ces écrans ici, dans l'écran de la liste des lieux, je vais importer React de React, je vais importer quelques éléments de React

65
00:05:58,700 --> 00:06:01,190
Native, probablement une vue, un texte et une

66
00:06:01,220 --> 00:06:02,070
feuille de

67
00:06:02,120 --> 00:06:08,570
style et ensuite nous pouvons voir si nous avons besoin d'autre chose plus tard à partir de React Native et ensuite configurer

68
00:06:08,600 --> 00:06:15,740
la constante ici, l'écran de la liste des lieux est un composant React normal qui reçoit des accessoires et dont la fin retourne du contenu,

69
00:06:15,740 --> 00:06:19,550
ici je vais juste retourner une vue avec un texte de l'écran de

70
00:06:19,550 --> 00:06:24,330
la liste des lieux, donc juste quelques-uns le contenu factice pour l'instant et la feuille de

71
00:06:24,590 --> 00:06:30,230
style est également configurée ici avec la feuille de style. créer et, finalement, exporter

72
00:06:31,190 --> 00:06:34,800
l'écran de la liste des lieux.

73
00:06:34,800 --> 00:06:37,420
Et ce sera le squelette de base que nous pouvons utiliser pour

74
00:06:37,430 --> 00:06:40,880
chaque vue, donc je vais le déposer dans chaque vue et juste ajuster ce nom ici.

75
00:06:40,880 --> 00:06:48,250
Nous avons donc ici l'écran de détail de lieu que je veux utiliser, puis copiez-le également dans le nouvel écran de

76
00:06:48,850 --> 00:06:52,720
lieu et remplacez ce nom ici dans les trois endroits

77
00:06:52,720 --> 00:06:58,300
et enfin et surtout, déposez-le également dans l'écran de carte pour l'avoir ici comme bien, puis

78
00:06:58,300 --> 00:07:02,650
nous ajouterons bien sûr le vrai contenu tout au long de ce module.

79
00:07:02,800 --> 00:07:05,530
Voilà donc les écrans créés, si nous enregistrons

80
00:07:05,530 --> 00:07:12,190
maintenant cela et que vous l'exécutez avec npm start ou avec expo start et que vous l'exécutez sur votre

81
00:07:12,220 --> 00:07:18,660
émulateur ou émulateurs préférés, une fois ce bâtiment terminé, nous devrions voir l'écran de la liste des lieux

82
00:07:18,990 --> 00:07:21,020
à la fin, comme cette.

83
00:07:21,120 --> 00:07:26,790
Maintenant, bien sûr, nous n'avons pas de titre d'en-tête ici, alors assurons-nous d'en définir un, également sur Android en

84
00:07:27,180 --> 00:07:34,830
allant à l'écran de la liste des lieux et là-dedans, nous pouvons ajouter des options de navigation à l'écran de la liste des lieux et le définir

85
00:07:34,830 --> 00:07:42,690
sur un objet statique ici où nous pouvons ajouter un titre d'en-tête de tous les lieux ou quelque chose comme ça et avec cela bien sûr, une

86
00:07:42,690 --> 00:07:47,840
fois que cela se recharge, nous voyons ce titre ici sur l'écran de la liste des lieux.

87
00:07:48,030 --> 00:07:55,260
C'est donc la configuration de base de l'écran dont nous aurons besoin pour ce module ici. Avec cela avant de plonger plus profondément dans le

88
00:07:55,260 --> 00:07:58,530
contenu des autres écrans, assurez-vous en fait d'avoir

89
00:07:58,650 --> 00:08:04,020
un bouton plus ici dans l'en-tête qui nous amène au nouvel écran de

90
00:08:04,020 --> 00:08:10,770
lieu, car c'est alors que nous pouvons commencer à puiser dans fonctionnalités de l'appareil natif et

91
00:08:10,770 --> 00:08:13,010
avec l'ajout de lieux.

92
00:08:13,090 --> 00:08:20,200
Maintenant, bien sûr, vous savez comment ajouter un bouton à l'en-tête de votre navigateur, tout ce que vous avez à faire est d'installer

93
00:08:20,200 --> 00:08:27,040
un nouveau package avec npm install --save et c'est le package react-navigation header-buttons que nous avons utilisé plusieurs fois tout au long

94
00:08:27,040 --> 00:08:32,170
de ce cours et je vais l'utiliser exactement de la même manière que je l'ai utilisé

95
00:08:32,170 --> 00:08:33,790
dans le reste du cours.

96
00:08:33,880 --> 00:08:39,880
Je vais donc créer un dossier de composants dans lequel je peux configurer

97
00:08:40,000 --> 00:08:51,020
mon propre composant de bouton d'en-tête pour avoir ce composant de bouton réutilisable préconfiguré et dans ce composant, j'importe le bouton d'en-tête de ce

98
00:08:51,080 --> 00:09:02,460
package de boutons d'en-tête de navigation React que nous venons d'installer. Importez des Ionicons depuis expo / vector-icons, un package que vous voudrez peut-être

99
00:09:02,510 --> 00:09:07,110
installer au cas où vous obtiendriez des erreurs ici avec

100
00:09:07,110 --> 00:09:18,840
npm install --save et importez également la constante de couleurs du dossier constantes et là, le fichier de couleurs et puis ici nous avoir un bouton d'en-tête personnalisé

101
00:09:18,840 --> 00:09:24,870
de composant régulier qui reçoit des accessoires qui retournent du jsx et ici je

102
00:09:24,880 --> 00:09:31,260
veux retourner le bouton d'en-tête que nous importons mais maintenant nous allons simplement le configurer

103
00:09:31,260 --> 00:09:32,750
selon nos besoins.

104
00:09:33,000 --> 00:09:39,240
Tout d'abord en lui transmettant tous les accessoires, puis nous pouvons définir le composant icône sur ionicon pour

105
00:09:39,270 --> 00:09:40,480
qu'il soit

106
00:09:40,590 --> 00:09:47,250
utilisé, définir la taille de l'icône ici peut-être sur 23 parce que je pense que cela a très bien

107
00:09:47,250 --> 00:09:48,870
fonctionné jusqu'à présent et définir

108
00:09:48,870 --> 00:09:57,240
la couleur sur et maintenant je j'aurai besoin d'une autre importation, je devrai importer la plate-forme à partir de React Native parce que maintenant

109
00:09:57,600 --> 00:09:59,940
je veux vérifier la plate-forme ici et

110
00:10:01,560 --> 00:10:07,470
si la plate-forme est Android, nous aurons un fond solide, donc je veux utiliser le blanc comme

111
00:10:07,800 --> 00:10:10,680
couleur de l'icône, sinon j'utilise ma couleur principale.

112
00:10:10,740 --> 00:10:16,080
Maintenant, avec cela, la seule chose qui reste à faire est d'exporter ce bouton d'en-tête personnalisé ici et maintenant nous pouvons commencer

113
00:10:16,080 --> 00:10:20,600
à l'utiliser dans l'écran de la liste des lieux. Là aussi comme avant, j'importe

114
00:10:20,610 --> 00:10:29,280
deux autres packages à partir de react-navigation-header-buttons, deux autres choses à partir de ce package et qui seraient mes boutons d'en-tête et

115
00:10:29,280 --> 00:10:36,480
élément, les deux doivent être importés et en plus, nous pouvons également importer notre propre bouton d'en-tête personnalisé

116
00:10:36,480 --> 00:10:42,810
maintenant à partir du dossier des composants et à partir de ce fichier de bouton d'en-tête

117
00:10:42,810 --> 00:10:48,060
dans lequel nous venons de travailler. Mais avec cela importé, nous pouvons changer nos

118
00:10:48,060 --> 00:10:53,880
options de navigation ici pour être dynamiques, où nous avons cette fonction qui nous donne les données de navigation et

119
00:10:54,270 --> 00:11:00,750
qui retourne finalement cet objet de configuration car cela nous permettra ensuite de lier également le bouton à une fonction qui nous

120
00:11:00,750 --> 00:11:07,380
recevons via les paramètres de route car ici, je veux ajouter un en-tête à droite pour ajouter mes boutons d'en-tête et bien sûr,

121
00:11:07,380 --> 00:11:12,540
c'est maintenant aussi un modèle que nous avons fait plusieurs fois tout au long de ce cours,

122
00:11:12,540 --> 00:11:19,560
nous avons ajouté les boutons d'en-tête comme celui-ci et avoir l'élément dedans. Sur le composant de boutons d'en-tête, nous pouvons définir le

123
00:11:19,590 --> 00:11:27,330
composant de bouton d'en-tête et pointer sur notre composant de bouton d'en-tête personnalisé ici et sur l'élément, nous définissons maintenant un titre,

124
00:11:27,330 --> 00:11:31,930
comme ajouter un lieu et nous définissons ici un nom d'icône qui dépend

125
00:11:32,010 --> 00:11:39,870
de la plate-forme, donc par conséquent, je vais réellement importer cette API de plate-forme ici à partir de React Native et nous pouvons

126
00:11:39,960 --> 00:11:48,090
maintenant vérifier si le système d'exploitation de la plate-forme est Android, si c'est le cas, alors je veux le définir sur md add, sinon

127
00:11:48,240 --> 00:11:52,560
sur ios add qui ajoute un bouton plus pour le plate-forme spécifique, donc

128
00:11:52,560 --> 00:11:58,290
en suivant l'apparence spécifique de cette plate-forme. Nous devons également ajouter la fonction onPress et

129
00:11:58,290 --> 00:12:05,160
là, si nous tapons dessus, je veux simplement naviguer avec la méthode de navigation ici et c'est pourquoi nous devons

130
00:12:05,160 --> 00:12:11,310
avoir cette fonction dynamique ici, afin que nous ayons accès aux données de navigation, puis à la navigation,

131
00:12:11,430 --> 00:12:19,990
naviguer vers un nouvel endroit et un nouvel endroit ici est bien sûr mon identifiant dans le navigateur de lieux de cet écran de nouvel endroit.

132
00:12:20,040 --> 00:12:24,780
Donc, avec cela, nous avons un moyen d'aller à cet écran et donc si nous enregistrons cela, nous devrions être en

133
00:12:24,780 --> 00:12:25,960
mesure de le faire.

134
00:12:26,100 --> 00:12:32,800
Évidemment, je reçois une erreur parce que dans mon composant de bouton d'en-tête, car j'ai un composant React dedans, l'importation de

135
00:12:32,920 --> 00:12:38,680
React à partir de React ne semble pas être la pire idée, alors corrigeons rapidement cela ici

136
00:12:38,680 --> 00:12:45,290
dans le composant de bouton d'en-tête, mais maintenant avec ça , comme cela se recharge, nous avons ce bouton plus

137
00:12:45,290 --> 00:12:51,760
et nous pouvons aller à l'écran des nouveaux lieux, au nouvel écran des lieux, également ici sur Android bien sûr.

138
00:12:51,980 --> 00:12:57,680
Maintenant, sur ce nouvel écran de lieu, nous pouvons donc également ajouter des options de navigation pour définir un titre, de

139
00:12:58,070 --> 00:13:04,010
nouvelles options de navigation de l'écran de lieu, le définir pour un objet statique pour le moment parce que nous n'avons pas

140
00:13:04,010 --> 00:13:11,210
besoin pour le moment d'une fonction, nous ne 'ai pas besoin d'accéder aux données de navigation, nous avons juste besoin de définir le titre d'en-tête pour ajouter

141
00:13:11,930 --> 00:13:17,340
un lieu et avec cela si nous l'enregistrons, évidemment si nous y allons, nous voyons ce titre dans l'en-tête.

142
00:13:17,540 --> 00:13:20,440
C'est donc cette configuration de base ici, maintenant nous

143
00:13:20,570 --> 00:13:25,430
pouvons travailler sur cet écran d'ajout de lieu pour nous assurer que nous pouvons ajouter un lieu.