1
00:00:02,470 --> 00:00:09,580
Remplaçons le contenu de l'écran factice des catégories ici par une grille de catégories, car c'est l'idée derrière

2
00:00:09,580 --> 00:00:13,090
cet écran après tout. Maintenant, pour cela, nous

3
00:00:13,090 --> 00:00:18,140
pouvons utiliser un composant que nous avons utilisé auparavant et c'est la FlatList.

4
00:00:18,160 --> 00:00:20,980
Jusqu'à présent, nous l'avons utilisé pour des listes normales,

5
00:00:20,980 --> 00:00:25,490
vous pouvez également rendre des grilles avec et c'est exactement ce que nous ferons ici.

6
00:00:25,730 --> 00:00:34,960
Maintenant, pour cela dans cet écran de catégorie, je remplacerai tout par FlatList ici et ne produirai que ma liste plate ici dans cet écran que je retourne à la

7
00:00:34,960 --> 00:00:35,530
fin

8
00:00:35,530 --> 00:00:42,520
et je définirai des colonnes num ici qui est une nouvelle propriété que nous n'avons jamais vue auparavant à 2 et cela

9
00:00:42,520 --> 00:00:47,950
définit le nombre de colonnes que nous voulons avoir. La valeur par défaut est 1, qui est

10
00:00:47,950 --> 00:00:53,610
une liste normale, mais vous pouvez avoir plusieurs colonnes dedans, ce qui vous donne une grille efficace.

11
00:00:53,620 --> 00:00:55,080
Maintenant, avec cela, nous pourrions rendre

12
00:00:55,090 --> 00:00:57,070
une grille, mais bien sûr, nous avons besoin de

13
00:00:57,070 --> 00:00:59,340
données pour cela, sinon il est difficile de rendre une grille,

14
00:00:59,350 --> 00:00:59,640
non?

15
00:01:00,590 --> 00:01:06,290
Pour cela, je vais ajouter un nouveau dossier que je nommerai des données et là-dedans, j'ajouterai des données fictives. fichier js car à la fin, ce ne

16
00:01:06,290 --> 00:01:10,040
sont que des données factices que je fournis ici, nous ne chargeons

17
00:01:10,040 --> 00:01:16,740
pas cela à partir d'un serveur ou quelque chose comme ça en ce moment, chargez-le simplement comme ceci à la place.

18
00:01:16,920 --> 00:01:23,340
Je veux avoir un tas de catégories là-dedans et pour cela, je vais ajouter un autre dossier que je nomme des modèles qui

19
00:01:23,520 --> 00:01:29,550
est à la fin un dossier où je veux définir comment mes données sont façonnées dans cette application, à quoi elles

20
00:01:29,550 --> 00:01:30,440
ressemblent .

21
00:01:30,450 --> 00:01:36,810
Alors là, on peut ajouter une catégorie. fichier js par exemple et dans ce fichier,

22
00:01:36,840 --> 00:01:43,920
tout ce que je veux, c'est une classe que je nommerai catégorie et les classes sont des fonctionnalités Javascript par

23
00:01:44,040 --> 00:01:52,800
défaut dans Javascript moderne que j'exporte et là je définirai simplement à quoi devrait ressembler un objet catégorie dans mon application comme, de sorte que nous

24
00:01:52,920 --> 00:01:59,110
avons fondamentalement un moyen plus facile de créer ces objets sans faute de frappe et ainsi de suite.

25
00:01:59,130 --> 00:02:05,670
Donc ici, cette classe de catégorie prendra un constructeur et vous pouvez utiliser ce constructeur qui est une méthode par défaut

26
00:02:05,700 --> 00:02:06,610
que vous

27
00:02:06,630 --> 00:02:11,790
pouvez ajouter à n'importe quelle classe en Javascript pour initialiser un objet basé sur cette classe.

28
00:02:12,000 --> 00:02:16,350
Pour ce faire, attendez-vous à des arguments ici dans le constructeur et pour une catégorie, je veux

29
00:02:16,350 --> 00:02:22,200
obtenir un ID pour la catégorie, un titre et une couleur que j'utiliserai comme couleur d'arrière-plan dans la grille pour cet élément de grille

30
00:02:22,200 --> 00:02:23,880
pour cette catégorie et je stockerai

31
00:02:24,060 --> 00:02:29,460
toutes ces données dans des propriétés à l'aide du mot-clé this. Dans le cas où cela

32
00:02:29,460 --> 00:02:35,670
est totalement nouveau pour vous, plongez certainement dans certains cours ou ressources Javascript d'abord car cela

33
00:02:35,670 --> 00:02:38,550
n'a rien à voir avec la navigation

34
00:02:38,580 --> 00:02:42,470
React ou avec React Native, c'est du Javascript moderne vanille.

35
00:02:42,480 --> 00:02:44,470
Maintenant, pourquoi ai-je créé cela?

36
00:02:44,490 --> 00:02:52,650
Parce que maintenant je peux importer ma classe de catégorie depuis le dossier models, depuis la catégorie. fichier js dans le fichier de données factices,

37
00:02:52,650 --> 00:02:56,460
puis l'utiliser pour créer des données factices.

38
00:02:56,460 --> 00:03:04,650
Maintenant, vous trouvez ces données factices attachées, vous trouverez ci-joint un fichier Javascript avec ces catégories factices que je stocke dans

39
00:03:04,860 --> 00:03:09,070
une constante que j'exporte ensuite en tant qu'exportation nommée ici.

40
00:03:09,240 --> 00:03:14,200
Ce sont des données de catégorie factices pour les catégories de cette application, dans ces catégories

41
00:03:14,520 --> 00:03:19,290
que je veux avoir dans cette application. Ce sont les catégories que j'utiliserai dans cette

42
00:03:19,290 --> 00:03:25,590
application et ce sont les catégories que nous pouvons maintenant utiliser à l'intérieur de nos écrans, dans l'écran des catégories pour être précis.

43
00:03:26,540 --> 00:03:37,110
Donc, là-dedans, je veux ajouter une importation et importer des catégories à partir de données / données factices, donc c'est importer la

44
00:03:37,120 --> 00:03:40,640
constante nommée que nous exportons là-bas.

45
00:03:40,660 --> 00:03:44,020
Maintenant, c'est un tableau d'objets Javascript à la fin, non?

46
00:03:44,050 --> 00:03:45,610
C'est ce que nous avons stocké

47
00:03:45,640 --> 00:03:51,850
là-bas, c'est juste un tableau d'objets Javascript que nous pouvons maintenant utiliser pour rendre notre liste ou pour être précis,

48
00:03:51,850 --> 00:03:53,090
notre grille ici.

49
00:03:53,170 --> 00:04:01,240
Donc, les données de cette FlatList sont simplement mes tableaux de catégories, donc je vais simplement pointer sur les catégories et

50
00:04:01,240 --> 00:04:08,510
bien sûr, nous avons également besoin d'un élément de rendu pour définir comment un élément de grille unique doit

51
00:04:08,510 --> 00:04:15,380
être rendu, quel composant doit y être rendu. Pour cela, je vais ajouter une nouvelle fonction ici, rendre

52
00:04:15,380 --> 00:04:22,580
l'élément de grille qui est une fonction qui recevra des données d'élément à la fin ici et qui devrait retourner

53
00:04:22,580 --> 00:04:25,460
un élément jsx, devrait retourner un composant

54
00:04:25,460 --> 00:04:33,950
React ici et je pointerai sur la grille de rendu article ici. Maintenant là-dedans, je vais rendre une vue et pour garder les choses simples,

55
00:04:33,950 --> 00:04:39,380
pour l'instant ce sera une vue avec un texte là-dedans et dans ce texte, je veux rendre

56
00:04:39,500 --> 00:04:40,160
itemData.

57
00:04:40,160 --> 00:04:42,400
élément, c'est ce que nous avons disponible

58
00:04:42,410 --> 00:04:48,250
sur une FlatList si vous vous souvenez des modules précédents, l'objet de données d'élément ici a une propriété

59
00:04:48,250 --> 00:04:55,520
d'élément, React Native FlatList vous donne cette propriété et là-dedans, nous aurons une propriété de titre parce qu'un élément que nous sommes arriver

60
00:04:55,520 --> 00:05:01,940
ici est juste une catégorie que nous obtenons de nos données que nous alimentons dans la FlatList, donc nous aurons

61
00:05:01,970 --> 00:05:05,490
un tel objet Javascript comme élément là-bas et cet objet Javascript

62
00:05:05,630 --> 00:05:12,000
est basé sur notre modèle ici et là, nous avons mis en place un title, une couleur et une propriété

63
00:05:12,040 --> 00:05:12,820
ID, donc nous

64
00:05:12,980 --> 00:05:19,160
avons une propriété title, donc nous pouvons extraire le titre ici comme ceci, nous utiliserons la couleur plus tard.

65
00:05:20,250 --> 00:05:22,010
Voilà donc la

66
00:05:22,080 --> 00:05:26,850
première chose, cela devrait fonctionner. Désormais, dans les nouvelles versions

67
00:05:26,850 --> 00:05:35,340
de React Native, vous n'avez pas besoin d'informer React Native que votre ID n'est pas nommé clé mais est en fait nommé ID

68
00:05:35,400 --> 00:05:42,270
car les versions plus récentes de React Native acceptent également l'ID comme ID sur les données de liste.

69
00:05:42,270 --> 00:05:48,300
Si vous suiviez dans une ancienne version, vous auriez besoin d'ajouter ici un extracteur de clé qui est une fonction qui

70
00:05:48,630 --> 00:05:54,660
obtient l'élément et l'index et doit retourner la valeur qui devrait être utilisée comme clé, donc dans ce cas, ce

71
00:05:54,720 --> 00:05:56,980
serait être article. id, encore une

72
00:05:57,030 --> 00:06:03,030
fois, les nouvelles versions de React Native n'en ont pas besoin, mais juste pour référence et pour les anciennes

73
00:06:03,030 --> 00:06:05,150
versions, je vais toujours l'ajouter ici.

74
00:06:05,160 --> 00:06:08,610
Alors maintenant, nous retournons notre FlatList ici avec nos données.

75
00:06:08,610 --> 00:06:11,930
Si nous enregistrons maintenant cela, nous devrions déjà voir nos données

76
00:06:11,940 --> 00:06:15,320
ici, bien sûr pas vraiment si belles mais une grille, nous

77
00:06:15,330 --> 00:06:16,960
avons l'italien, à côté

78
00:06:17,040 --> 00:06:20,000
des hamburgers rapides et faciles, à côté de l'allemand,

79
00:06:20,130 --> 00:06:23,690
cela ne ressemble tout simplement pas à une grille mais c'est techniquement.

80
00:06:24,030 --> 00:06:32,250
Maintenant, pour le faire ressembler un peu plus à une grille, nous devons bien sûr ajouter plus de style. Maintenant, pour changer un peu ce style, nous pouvons aller à nos

81
00:06:32,250 --> 00:06:33,080
éléments de

82
00:06:33,090 --> 00:06:40,830
grille ici, à un élément de grille unique et ajouter l'accessoire de style ici et ajouter le style d'élément de grille ou tout

83
00:06:40,830 --> 00:06:42,620
ce que vous voulez nommer,

84
00:06:43,430 --> 00:06:50,700
puis là-bas, je vais ajouter élément de grille à ma feuille de style et donner cette propriété de flex, nous voulons prendre

85
00:06:50,700 --> 00:06:52,250
autant d'espace que possible,

86
00:06:53,390 --> 00:06:57,530
enregistrer cela, maintenant cela ressemble déjà un peu plus à une grille.

87
00:06:57,530 --> 00:07:00,640
Maintenant, une certaine marge autour de chaque élément serait également

88
00:07:00,650 --> 00:07:08,450
agréable, donc pour cela, nous pouvons simplement ajouter une marge et peut-être ajouter 15 comme marge autour de chaque élément, de sorte que nous ayons plus

89
00:07:08,450 --> 00:07:10,070
d'espacement dans toutes les directions

90
00:07:10,070 --> 00:07:12,500
et avec cela, ce n'est pas trop mal,

91
00:07:12,500 --> 00:07:18,080
bien sûr nous pouvons maintenant aussi changer l'aspect général et par exemple donner à chaque élément une hauteur de

92
00:07:18,080 --> 00:07:24,230
disons 150 et c'est totalement à vous de choisir les valeurs que vous choisissez là-bas, mais je dirais qu'avec cela, c'est

93
00:07:24,230 --> 00:07:25,610
une assez belle grille,

94
00:07:25,610 --> 00:07:26,400
ne gagne

95
00:07:26,450 --> 00:07:31,310
certainement pas un prix de style pour le moment mais nous allons dans la bonne direction.

96
00:07:32,920 --> 00:07:38,830
Maintenant, avant de terminer le style de cela et nous avons certainement du travail à faire pour cela, assurons-nous que

97
00:07:38,830 --> 00:07:44,950
nous pouvons appuyer sur ces éléments et nous allons ensuite à l'écran de détail pour cet élément spécifique, voyons donc aussi

98
00:07:45,090 --> 00:07:50,770
comment nous pouvons en fait, définissez un titre dans l'en-tête afin que nous ayons une meilleure idée de

99
00:07:50,770 --> 00:07:52,780
l'endroit où nous en sommes actuellement.