1
00:00:02,290 --> 00:00:08,230
Maintenant, avec ce conteneur d'entrée défini et avec quelques nouveaux styles couverts, nous pouvons faire

2
00:00:08,270 --> 00:00:12,580
quelque chose que j'ai mentionné que ce serait toujours une bonne

3
00:00:12,640 --> 00:00:16,380
idée, nous pouvons diviser notre application en plusieurs composants.

4
00:00:16,600 --> 00:00:17,800
Ce look ici, ce

5
00:00:17,800 --> 00:00:24,100
look de conteneur d'entrée, ce look de carte est probablement quelque chose que nous voulons également utiliser dans d'autres parties

6
00:00:24,100 --> 00:00:24,890
de l'application.

7
00:00:25,060 --> 00:00:28,450
Nous pourrions avoir différents articles que nous voulons présenter dans une

8
00:00:28,450 --> 00:00:32,680
telle carte, pensez à créer une boutique en ligne où vous avez chaque produit

9
00:00:32,680 --> 00:00:39,160
dans une telle carte sur l'écran de vue d'ensemble. Maintenant, pour éviter de répéter cette définition de style encore

10
00:00:39,160 --> 00:00:45,130
et encore, nous pouvons l'externaliser dans un composant séparé, un composant qui n'a pas vraiment beaucoup de logique

11
00:00:45,160 --> 00:00:46,950
mais qui contrôle le style

12
00:00:47,080 --> 00:00:53,050
de son contenu, un pur composant de présentation donc. Techniquement, il s'agit toujours d'un composant React normal et je vais donc créer un

13
00:00:53,050 --> 00:00:58,450
nouveau fichier ici dans le dossier des composants et le nommer carte. Le nom dépend de vous, mais c'est ce look de

14
00:00:58,450 --> 00:00:59,400
carte typique, donc

15
00:00:59,410 --> 00:01:01,510
cela ressemble à un nom approprié pour moi.

16
00:01:02,220 --> 00:01:11,290
Maintenant, ici comme toujours, importez React de React, puis importez également la vue de React Native ici, puis créez le composant de

17
00:01:11,290 --> 00:01:20,830
carte, un composant fonctionnel comme celui-ci que vous exportez finalement par défaut et évidemment, car il s'agit de présentation ici, nous J'aurai besoin

18
00:01:21,310 --> 00:01:22,900
de la feuille

19
00:01:22,900 --> 00:01:28,630
de style pour créer un objet de style car ce sera l'élément central de

20
00:01:28,630 --> 00:01:31,120
ce composant, il devrait être là

21
00:01:31,120 --> 00:01:36,200
pour s'enrouler autour de tout contenu et appliquer simplement un style général.

22
00:01:37,270 --> 00:01:42,600
Alors maintenant, je vais à l'écran de démarrage du jeu et je vais saisir tous les styles ici du conteneur d'entrée, les copier

23
00:01:42,700 --> 00:01:49,180
à partir de là et les ajouter à la carte à la place. Ici, je vais ajouter une nouvelle propriété de carte

24
00:01:49,180 --> 00:01:49,790
et

25
00:01:51,220 --> 00:01:54,880
utiliser mes styles ici et à l'intérieur du composant carte, je

26
00:01:55,020 --> 00:01:59,670
vais avoir un balisage très simple pour ainsi dire, du code jsx très simple.

27
00:01:59,670 --> 00:02:05,900
C'est juste une vue que je reviens ici qui devrait être entourée d'accessoires enfants, accessoires enfants est

28
00:02:05,910 --> 00:02:11,880
cet accessoire spécial dans React qui est essentiellement le contenu que vous passez entre les balises

29
00:02:11,880 --> 00:02:18,570
d'ouverture et de fermeture de votre composant personnalisé. Il peut donc s'enrouler autour de n'importe quel contenu car le

30
00:02:18,570 --> 00:02:25,400
seul objectif de ce composant de carte est d'appliquer un style au conteneur environnant et nous le faisons en ajoutant des styles de carte ici.

31
00:02:25,510 --> 00:02:32,610
Maintenant, il n'y a qu'une seule chose, il y a certains styles ici qui ne devraient probablement pas être définis de

32
00:02:32,610 --> 00:02:33,790
l'intérieur de la

33
00:02:33,810 --> 00:02:41,580
carte, toutes les cartes ne peuvent pas avoir cette largeur ou cette largeur maximale et toutes les cartes ne doivent pas centrer leur contenu.

34
00:02:41,580 --> 00:02:47,220
Par conséquent, je vais couper ces trois éléments à partir de là et ne disposer que de l'ombre et

35
00:02:47,220 --> 00:02:50,890
du rembourrage ici et je veux rendre cela un peu plus flexible.

36
00:02:50,970 --> 00:02:57,780
Outre les styles de carte, ce serait bien si nous pouvions également attribuer nos propres styles

37
00:02:57,780 --> 00:03:07,440
de l'extérieur et peut-être même remplacer certains des styles de carte. Nous pouvons le faire en passant un nouvel objet à l'accessoire de style et

38
00:03:07,530 --> 00:03:13,730
en distribuant toutes les propriétés, toutes les paires clé-valeur de notre style de cartes ici dans ce nouvel objet.

39
00:03:13,800 --> 00:03:20,400
Il s'agit de l'opérateur d'étalement, une fonctionnalité Javascript moderne qui extrait toutes les paires clé-valeur d'un objet de

40
00:03:20,460 --> 00:03:23,910
cet objet et l'ajoute à un nouvel objet environnant.

41
00:03:24,150 --> 00:03:28,170
Nous copions donc tous les styles définis là-bas dans ce nouvel objet et je

42
00:03:28,170 --> 00:03:34,170
le fais pour que je puisse également ajouter une autre paire clé-valeur ici ou un autre ensemble de paires clé-valeur où

43
00:03:34,170 --> 00:03:41,370
je prends tous les styles définis dans les styles d'accessoires, donc dans le style prop que j'ai passé à mon propre composant personnalisé, je prends

44
00:03:41,370 --> 00:03:42,090
toutes les

45
00:03:42,090 --> 00:03:48,060
paires clé-valeur qui y sont définies et les fusionne dans cet objet et puisque je fais cette seconde, cela remplacera toutes

46
00:03:48,240 --> 00:03:53,760
les paires clé-valeur configurées dans la carte des styles, afin que nous puissions remplacer tous les styles qui y

47
00:03:53,760 --> 00:03:56,700
sont configurés de l'extérieur lorsque nous utilisons notre composant

48
00:03:56,700 --> 00:04:02,100
et lorsque nous ajoutons des styles supplémentaires en dehors du composant, il fusionnera également cela dans et le considérera

49
00:04:02,140 --> 00:04:08,160
et avec cela, nous pouvons également attribuer nos propres styles de l'extérieur du composant carte lorsque nous utilisons le composant carte

50
00:04:08,160 --> 00:04:12,730
et l'utilisation du composant carte est quelque chose qui aurait du sens dans une prochaine étape.

51
00:04:12,750 --> 00:04:20,040
Alors, allons à l'écran de démarrage du jeu et importons la carte à partir du dossier des composants et à partir

52
00:04:20,040 --> 00:04:28,220
du dossier de la carte et remplaçons notre vue du conteneur d'entrée ici par une carte, comme celle-ci, comme celle-ci, par des balises

53
00:04:28,220 --> 00:04:29,920
d'ouverture et de fermeture.

54
00:04:29,930 --> 00:04:35,420
Maintenant, encore une fois, je veux définir mes propres styles, je veux définir ma propre largeur, la largeur maximale

55
00:04:35,510 --> 00:04:39,040
et aligner les éléments, donc je vais garder le conteneur d'entrée dans

56
00:04:39,320 --> 00:04:46,030
la feuille de style là-bas mais maintenant me débarrasser de tous les autres styles là-dedans, tous les styles qui sont maintenant configurés dans la

57
00:04:46,100 --> 00:04:46,650
carte

58
00:04:46,790 --> 00:04:54,920
afin que nous ne gardions que la largeur et l'alignement ici, puis que nous ajoutions ceci ici à la carte sur l'accessoire de style qui est accepté ou qui

59
00:04:54,980 --> 00:05:01,280
a un effet parce que dans le composant de la carte, c'est cet accessoire de style qui Je fusionne avec mes autres

60
00:05:01,280 --> 00:05:10,250
styles, donc pour cet accessoire de style, je pointerai sur le conteneur d'entrée des styles. Maintenant, si nous enregistrons cela, je reçois une erreur,

61
00:05:10,250 --> 00:05:12,330
l'objet n'est pas

62
00:05:12,350 --> 00:05:17,350
une fonction près de la feuille de style React Native.

63
00:05:17,420 --> 00:05:24,250
Donc dans la carte. fichier js car il pointe ici, quelque chose ne va pas, me donne même le

64
00:05:24,260 --> 00:05:30,890
numéro de ligne, c'est la ligne 10, c'est ce que ce nombre signifie ici et oui, mon problème ici est que j'utilise une feuille de style comme celle-ci, c'est

65
00:05:30,920 --> 00:05:31,640
faux, à la

66
00:05:31,640 --> 00:05:35,760
place nous devons appeler la feuille de style . créer pour définir nos propres styles, c'est

67
00:05:35,780 --> 00:05:37,010
donc la bonne syntaxe.

68
00:05:37,010 --> 00:05:42,240
C'est donc une erreur de syntaxe, pas techniquement une erreur de syntaxe mais j'utilise mal l'objet de feuille de style.

69
00:05:42,410 --> 00:05:46,430
C'est donc une erreur de mon côté, le message d'erreur nous a aidés et maintenant

70
00:05:46,430 --> 00:05:52,420
nous avons le même look qu'avant mais nous avons cette carte réutilisable que nous pouvons maintenant utiliser dans n'importe quel endroit où nous

71
00:05:52,430 --> 00:05:55,280
voulons avoir exactement ce look avec les ombres et bientôt.