1
00:00:02,420 --> 00:00:06,140
Concentrons-nous sur l'écran de détail du repas pour l'instant, donc

2
00:00:06,170 --> 00:00:06,770
la

3
00:00:09,660 --> 00:00:13,950
partie ici où nous voyons les détails de la recette sélectionnée.

4
00:00:14,070 --> 00:00:19,590
En ce moment, nous avons juste le contenu factice là-bas, de l'écran de détail du repas et ce n'est bien sûr pas

5
00:00:19,590 --> 00:00:21,810
le contenu que je veux vraiment y avoir, à

6
00:00:22,020 --> 00:00:24,190
la place ce qui devrait y être?

7
00:00:24,210 --> 00:00:30,280
Eh bien, si nous jetons un coup d'œil à notre modèle de repas, il est probablement logique

8
00:00:30,330 --> 00:00:35,340
d'y avoir l'image, veuillez garder à l'esprit que le titre est déjà affiché dans

9
00:00:35,340 --> 00:00:43,710
notre en-tête, donc il est logique d'avoir l'image ici en haut peut-être et ci-dessous, répétez peut-être la durée, l'abordabilité et la complexité comme nous

10
00:00:43,710 --> 00:00:47,140
le faisons ici ci-dessous notre recette, puis aussi en

11
00:00:47,370 --> 00:00:56,730
dessous, listez tous les ingrédients et les étapes nécessaires pour faire ce plat. C'est donc en fin de compte ce que je veux avoir

12
00:00:56,730 --> 00:01:02,170
sur cette page ici sur le MealDetailScreen et donc, je pense qu'il est logique

13
00:01:02,340 --> 00:01:08,220
d'ajouter d'abord une vue de défilement parce que nous aurons certainement beaucoup de contenu là-bas

14
00:01:08,220 --> 00:01:15,340
qui ne sera probablement pas tenir sur un seul écran et certainement pas sur toutes les tailles d'appareils possibles.

15
00:01:15,390 --> 00:01:22,320
Je vais donc ajouter une vue de défilement ici et envelopper cela autour de mon contenu ici.

16
00:01:22,330 --> 00:01:24,920
Nous allons maintenant avoir quelques sections

17
00:01:25,030 --> 00:01:30,750
différentes ici, par exemple tout en haut, je veux avoir mon image et pour cela, j'importe

18
00:01:30,750 --> 00:01:36,300
également le composant image de React Native ici afin que nous puissions rendre une image

19
00:01:36,300 --> 00:01:39,030
ici, pas une image d'arrière-plan mais une

20
00:01:39,270 --> 00:01:45,260
image normale et je veux ajouter ceci, disons ici tout en haut, quelque chose comme ça.

21
00:01:45,260 --> 00:01:51,390
Maintenant, après l'image, je veux avoir une vue avec la durée, l'abordabilité et la complexité comme je l'ai mentionné, donc essentiellement la

22
00:01:51,400 --> 00:01:57,930
même configuration que nous avons dans le repas, ceci ici, vous pourriez dire et donc je vais en fait copier la vue à partir

23
00:01:57,930 --> 00:02:03,330
de là et ensuite nous pouvons l'ajuster comme nous en avons besoin ici dans le MealDetailScreen, donc je vais

24
00:02:03,360 --> 00:02:06,220
juste remplacer cette vue par la vue de copie.

25
00:02:06,360 --> 00:02:10,510
Bien sûr, cela nous oblige à importer le composant de

26
00:02:10,710 --> 00:02:11,700
texte par

27
00:02:11,720 --> 00:02:16,370
défaut ici, alors ajoutons ceci, importons le texte par défaut à partir

28
00:02:16,610 --> 00:02:21,450
du texte par défaut des composants. C'est donc la ligne suivante et

29
00:02:21,500 --> 00:02:26,580
par la suite, je veux avoir mes ingrédients et les étapes que vous devez exécuter.

30
00:02:26,890 --> 00:02:39,790
Nous pouvons donc ajouter du texte ici où nous disons ingrédients et là, je veux également appliquer un style, comme le texte des styles, le titre, quelque chose comme ça ou simplement le titre

31
00:02:39,820 --> 00:02:42,910
parce que je veux avoir un en-tête

32
00:02:45,630 --> 00:02:52,320
gras ici, peut-être augmenter la taille de la police. En dessous, j'ai ma liste d'ingrédients, donc la liste

33
00:02:52,320 --> 00:02:58,770
d'ingrédients et ce n'est bien sûr pas le contenu final, au lieu de cela, nous allons afficher une

34
00:02:58,770 --> 00:03:07,260
liste ici et en dessous, je vais répéter ici parce que je veux avoir un titre où je dis étapes, puis une liste

35
00:03:07,980 --> 00:03:14,760
d'étapes ci-dessous et maintenant je vais me débarrasser de cet ancien contenu là-bas et c'est ce que je

36
00:03:14,760 --> 00:03:15,940
veux travailler.

37
00:03:15,960 --> 00:03:20,790
Maintenant, bien sûr, tous les styles sont manquants et également la durée des accessoires et ainsi

38
00:03:20,790 --> 00:03:26,080
de suite, cela ne donne rien, à la place nous devons travailler avec le repas sélectionné ici, la

39
00:03:26,130 --> 00:03:34,560
durée du repas sélectionné, la complexité du repas sélectionné, l'abordabilité du repas sélectionné et pour l'image par exemple, je veux ajouter une source ici, source car c'est une image

40
00:03:34,590 --> 00:03:42,210
réseau, est un objet avec une propriété URI qui pointe sur selectedMeal. imageUrl pour charger ceci et nous devons également y

41
00:03:42,240 --> 00:03:47,210
appliquer un style, pour définir une largeur et une hauteur, donc ici

42
00:03:47,310 --> 00:03:53,190
je veux pointer sur les styles image disons et tous ces styles sont manquants

43
00:03:53,190 --> 00:04:02,470
comme je l'ai dit alors ajoutons cela. Ici pour ce style, je veux aussi dire les styles. détails peut-être parce que nous affichons les

44
00:04:02,470 --> 00:04:08,680
détails de cette recette et descendons donc à la feuille de style, supprimons l'écran dont

45
00:04:08,680 --> 00:04:09,340
nous

46
00:04:09,520 --> 00:04:16,920
n'avons plus besoin, au lieu ajoutons image et détails. Maintenant, pour plus de détails, nous devons définir la direction du flex sur row car

47
00:04:16,920 --> 00:04:19,180
cela devrait être tous les détails d'une ligne.

48
00:04:19,380 --> 00:04:27,060
Nous pouvons ajouter un peu de rembourrage dans toutes les directions, peut-être de 15 et également ajouter un

49
00:04:27,120 --> 00:04:33,550
contenu d'espace justifié pour bien répartir nos éléments de détail ici, cela devrait être bien.

50
00:04:35,210 --> 00:04:42,270
En plus de cela, sur l'image ici, nous devons également ajouter un style, là, la largeur devrait être de

51
00:04:42,440 --> 00:04:48,100
100% disons, pour prendre toute la largeur disponible et pour la hauteur, j'irai avec

52
00:04:48,140 --> 00:04:49,580
200, bien que

53
00:04:49,580 --> 00:04:54,680
vous puissiez bien sûr calculer dynamiquement cela avec l'API dimensions par exemple pour

54
00:04:54,740 --> 00:05:00,720
toujours prendre une certaine fraction de la hauteur disponible ou simplement jouer avec différentes valeurs ici.

55
00:05:00,890 --> 00:05:03,520
J'irai avec ça et jetterai un œil ici et ça n'a

56
00:05:03,740 --> 00:05:04,940
pas l'air trop minable, c'est

57
00:05:04,970 --> 00:05:06,130
pas trop mal.

58
00:05:07,450 --> 00:05:13,990
Maintenant, vous pouvez certainement essayer du travail bonus ici, des tâches bonus et par exemple colorer ces

59
00:05:13,990 --> 00:05:20,200
détails - simple, abordable et la durée selon qu'elle est plutôt courte ou en fonction des

60
00:05:20,200 --> 00:05:25,810
différentes valeurs que vous avez pour simple, pour la complexité et l'abordabilité .

61
00:05:25,810 --> 00:05:31,150
Ce n'est pas quelque chose que je ferai ici, mais vous pouvez bien sûr consulter les données sur les repas pour voir

62
00:05:31,150 --> 00:05:37,090
quelles valeurs nous avons là pour dériver ce qui est court, ce qui est une durée moyenne ce qui est une longue durée et pour

63
00:05:37,090 --> 00:05:41,800
voir quelles valeurs sont utilisées pour la complexité et ainsi de suite, puis vous pouvez ajouter des vérifications pour

64
00:05:41,800 --> 00:05:47,470
appliquer un style différent aux différentes valeurs que nous générons ici dans l'écran de détail des repas pour ces détails afin que vous coloriez

65
00:05:47,470 --> 00:05:52,360
le texte différemment selon qu'il est long ou non. Ce n'est pas quelque chose que je ferai

66
00:05:52,360 --> 00:05:58,150
ici parce que c'est juste un travail supplémentaire qui n'ajoute pas vraiment beaucoup à la navigation qui est au

67
00:05:58,150 --> 00:05:59,740
centre de ce module.

68
00:05:59,740 --> 00:06:08,110
Au lieu de cela, je vais me concentrer sur les ingrédients et les étapes et là, une première étape consiste à s'assurer que le titre

69
00:06:08,530 --> 00:06:10,250
ici est correctement stylisé.

70
00:06:10,330 --> 00:06:17,660
Donc, ajoutons un titre à la feuille de style et là, je vais ajouter une famille de polices et définir ceci

71
00:06:19,080 --> 00:06:26,790
pour ouvrir sans gras, définir la taille de police à 22 peut-être et définir l'alignement du texte au centre pour centrer le

72
00:06:26,810 --> 00:06:32,160
texte au milieu et avec cela si nous vérifions cela, cela semble assez agréable.

73
00:06:32,230 --> 00:06:37,540
Maintenant, je veux aussi sortir mes ingrédients dans mes étapes bien sûr et pour cela, il est important de comprendre

74
00:06:37,540 --> 00:06:40,770
que dans les données factices, ce sont des tableaux, ce sont mes

75
00:06:40,780 --> 00:06:42,480
ingrédients par exemple, ce sont mes

76
00:06:42,490 --> 00:06:49,540
étapes et vous voyez qu'il n'y a que du texte dans ces tableaux. Donc, je veux juste sortir mon texte ici sous forme

77
00:06:49,720 --> 00:06:56,410
de liste et je n'utiliserai pas de FlatList parce que vous pourriez le faire, vous pourriez avoir des conteneurs défilables pour

78
00:06:56,410 --> 00:07:01,470
ainsi dire, mais je vais simplement rendre les ingrédients et les étapes au-dessus de chacun autre.

79
00:07:01,480 --> 00:07:07,690
Donc, ici, nous pouvons utiliser une bonne vieille approche que nous connaissons de Vanilla React ou React for web à

80
00:07:07,690 --> 00:07:14,140
laquelle j'ai également montré plus tôt dans le cours. Nous pouvons utiliser notre repas sélectionné et là, les ingrédients qui

81
00:07:14,140 --> 00:07:17,640
sont un tableau de chaînes et le mapper dans un tableau de

82
00:07:17,650 --> 00:07:23,230
composants, c'est ainsi que vous pouvez générer une liste de données dans React et aussi React Native et souvent, vous

83
00:07:23,230 --> 00:07:27,660
utilisez FlatList mais ici nous ce n'est pas nécessaire, car ce n'est pas une quantité infinie,

84
00:07:27,670 --> 00:07:33,300
nous n'avons donc pas besoin de ces optimisations et nous avons une vue de défilement enveloppant sur tout l'écran afin

85
00:07:33,400 --> 00:07:38,050
que nous puissions également faire défiler si nous sortons plus que ce qui convient à l'écran, nous

86
00:07:38,050 --> 00:07:39,950
sommes donc très bien en utilisant cette

87
00:07:39,950 --> 00:07:45,220
approche et donc ici, je vais avoir mon ingrédient unique dans cette fonction de carte et la carte est

88
00:07:45,220 --> 00:07:46,900
une méthode intégrée à JavaScript

89
00:07:46,990 --> 00:07:50,030
comme vous le savez et ici nous devons retourner un élément

90
00:07:50,170 --> 00:07:55,660
jsx maintenant et ce que je veux retourner est un composant texte où je produis simplement l'ingrédient parce que les

91
00:07:55,720 --> 00:07:56,880
ingrédients sont un

92
00:07:56,890 --> 00:07:59,010
tableau de chaînes, donc l'ingrédient n'est qu'une

93
00:07:59,020 --> 00:08:03,280
chaîne et ici nous devons également fournir une clé, c'est une exigence de React et

94
00:08:03,280 --> 00:08:07,980
nous pouvons utiliser l'ingrédient comme clé parce que nous allons avoir toujours chaque ingrédient une seule fois.

95
00:08:07,990 --> 00:08:10,230
Donc, c'est garanti d'être unique, c'est comme

96
00:08:10,240 --> 00:08:12,510
ça que nos repas sont préparés et avec ça

97
00:08:12,550 --> 00:08:19,520
si on garde ça et qu'on regarde une recette ici, on voit nos ingrédients. Maintenant, pour le style, nous pouvons certainement faire quelque

98
00:08:19,520 --> 00:08:21,620
chose là-bas et je

99
00:08:21,650 --> 00:08:26,960
le ferai dans une seconde, mais avant de le faire, permettez-moi de répéter cela

100
00:08:26,960 --> 00:08:34,250
pour les étapes ici, remplacez ce texte par selectedMeal. étapes et ensuite sortir chaque étape ici qui est aussi juste une

101
00:08:34,350 --> 00:08:41,910
chaîne et qui est également unique dans un texte et avec cela ajouté, nous devrions également voir les étapes de notre repas, en effet nous le faisons.

102
00:08:42,630 --> 00:08:46,730
Maintenant, le style peut être amélioré un peu et nous ferons exactement cela et je pense

103
00:08:47,010 --> 00:08:53,460
qu'il est logique de créer un composant séparé ou une fonction de rendu pour cela et je vais créer un composant séparé, nous le

104
00:08:53,460 --> 00:08:58,830
stockerons dans le même fichier mais parce que nous ne l'utilisons vraiment que dans ce fichier, mais vous pouvez également

105
00:08:58,830 --> 00:08:59,310
créer

106
00:08:59,340 --> 00:09:03,260
un nouveau fichier, à vous de décider. Là, je vais avoir mon

107
00:09:03,270 --> 00:09:11,340
élément de liste qui reçoit les accessoires où je reviens et maintenant ici, je veux utiliser une vue que

108
00:09:11,350 --> 00:09:17,500
j'importe en tant que wrapper afin de pouvoir styliser ce conteneur et là-dedans, avoir

109
00:09:17,500 --> 00:09:24,690
mon texte où je produis les accessoires enfants et maintenant cette vue obtiendra un style à

110
00:09:24,700 --> 00:09:28,450
partir des styles. ListItem peut-être pour que nous puissions styliser

111
00:09:28,450 --> 00:09:33,490
cela bien et ici, bien sûr, je ne veux pas utiliser de texte mais en fait du texte

112
00:09:33,490 --> 00:09:34,630
par défaut, ici

113
00:09:34,780 --> 00:09:38,010
aussi bien sûr pour que nous profitions de notre propre texte personnalisé.

114
00:09:38,170 --> 00:09:47,430
Maintenant, pour le style d'élément de liste ici, descendons vers la feuille de style et ajoutons un élément de liste et chaque élément

115
00:09:47,460 --> 00:09:55,530
de liste devrait avoir une marge, une marge verticale de disons 10 et une marge horizontale de disons 20, donc

116
00:09:55,530 --> 00:10:05,600
plus d'espacement à gauche et à droite et ajoutons peut-être aussi une couleur de bordure d'une couleur grisâtre clair avec #ccc et une largeur de

117
00:10:05,600 --> 00:10:09,540
bordure de 1, nous verrons à quoi cela ressemble

118
00:10:09,540 --> 00:10:16,730
et ensuite ajouter un peu de rembourrage là-dedans, 10 dans toutes les directions et nous vais voir à

119
00:10:17,570 --> 00:10:18,930
quoi ça ressemble.

120
00:10:18,950 --> 00:10:25,910
Maintenant, nous devons juste nous assurer que nous utilisons notre composant d'élément de liste et nous l'utilisons en renvoyant qu'au lieu de texte ici lors

121
00:10:25,910 --> 00:10:30,590
de la sortie des ingrédients, nous passons toujours l'ingrédient entre les balises d'ouverture et de fermeture de

122
00:10:30,590 --> 00:10:36,200
notre propre composant personnalisé parce que là, nous sommes en utilisant des accessoires pour enfants qui utilisent le contenu que nous

123
00:10:36,470 --> 00:10:38,920
passons entre les balises d'ouverture et de fermeture et

124
00:10:39,110 --> 00:10:43,870
nous faisons de même pour nos étapes. Avec cela, jetons

125
00:10:44,530 --> 00:10:47,520
un coup d'œil à

126
00:10:47,670 --> 00:10:55,870
cela, oui ne semble pas trop mal. Nous obtenons nos étapes ici, avons nos ingrédients, bien sûr, vous pouvez affiner ce style,

127
00:10:55,870 --> 00:11:02,650
affiner vos besoins, la façon dont vous voulez qu'il apparaisse, mais je suis en fait assez content de cela et avec cela, nous avons obtenu

128
00:11:02,650 --> 00:11:08,050
un détail de base écran et bien sûr, cet écran de détail fonctionne également pour nos favoris parce que

129
00:11:08,050 --> 00:11:10,610
nous utilisons un seul et même écran là-bas.

130
00:11:10,660 --> 00:11:15,500
Donc ça a l'air plutôt sympa, l'écran du filtre est ce qui manque maintenant.