1
00:00:02,210 --> 00:00:07,310
Maintenant, je veux également utiliser cette famille de polices pour le titre de l'en-tête.

2
00:00:07,310 --> 00:00:10,990
Donc, ici, dans mon composant d'en-tête, sur le

3
00:00:11,000 --> 00:00:18,560
titre de l'en-tête, je veux également définir une famille de polices sur open-sans-bold pour que nous l'utilisions là aussi

4
00:00:20,300 --> 00:00:27,110
et pour tout autre texte de cette application, je veux réellement utiliser mon open sans police.

5
00:00:27,440 --> 00:00:35,480
Ainsi, par exemple, dans les jeux de démarrage verts ici, nous avons notre texte, sélectionnez un numéro et pour utiliser la

6
00:00:35,870 --> 00:00:45,080
police normale ouverte sans, nous pouvons bien sûr y attribuer un style, puis utiliser des styles de texte par exemple et ajouter ce style

7
00:00:45,350 --> 00:00:55,900
de texte ici au en bas, puis utilisez la famille de polices open-sans. Cela fonctionne, mais cela a bien sûr

8
00:00:55,900 --> 00:00:57,450
un inconvénient.

9
00:00:57,700 --> 00:01:04,810
L'inconvénient est que vous devez maintenant manuellement ajouter cette famille de polices à n'importe quel texte de votre application où

10
00:01:04,810 --> 00:01:10,980
vous souhaitez l'utiliser et que vous devez l'ajouter directement sur les composants de texte, vous ne pouvez pas

11
00:01:11,140 --> 00:01:18,880
l'ajouter à une vue et par exemple définir ceci sur l'écran ici et comptez sur ce qui est transmis aux textes imbriqués,

12
00:01:18,880 --> 00:01:21,010
malheureusement cela ne fonctionne pas.

13
00:01:21,040 --> 00:01:28,120
Donc, si j'allais à l'écran ici et que je définis la famille de polices sur open-sans-bold afin que nous puissions facilement voir si cela fonctionne ou non,

14
00:01:28,120 --> 00:01:32,340
vous voyez que ce n'est clairement pas en gras, sélectionnez un nombre n'est pas en gras.

15
00:01:32,530 --> 00:01:38,250
Donc, le transmettre comme ceci, comme cela fonctionne en CSS, ne fonctionne pas parce que ce n'est

16
00:01:38,290 --> 00:01:45,130
pas CSS, c'est Javascript et ce que vous appliquez sur un objet n'est appliqué que sur l'élément, sur le composant auquel

17
00:01:45,190 --> 00:01:47,470
cet objet de style est attaché.

18
00:01:47,470 --> 00:01:52,930
Il nous faudrait donc styliser ce texte individuellement, mais encore une fois, recréer ce style encore et encore dans tous les

19
00:01:52,930 --> 00:01:56,760
différents endroits pourrait ne pas être ce que vous voulez faire à la fin.

20
00:01:57,600 --> 00:02:01,680
Il existe deux solutions de contournement ou la solution de contournement semble toujours un

21
00:02:01,680 --> 00:02:05,440
peu sale, deux façons de gérer cela de manière plus élégante.

22
00:02:05,460 --> 00:02:12,210
La première est que vous créez un composant distinct, peut-être un composant de corps de texte ou simplement un composant de texte, quel

23
00:02:12,210 --> 00:02:13,920
que soit le nom que

24
00:02:13,920 --> 00:02:19,040
vous souhaitez lui donner et je l'appellerai BodyText. js et ce sera un composant très

25
00:02:19,040 --> 00:02:27,360
simple, je viens d'importer React de React et j'importe le texte et la feuille de style de React Native ici, puis le

26
00:02:30,250 --> 00:02:39,730
composant de corps de texte ici obtient des accessoires et renvoie simplement mon composant de texte ici où je produis des accessoires pour enfants entre

27
00:02:39,730 --> 00:02:41,650
les les balises de

28
00:02:41,650 --> 00:02:48,430
texte afin que nous puissions passer du contenu au corps du texte en le passant entre la balise

29
00:02:48,430 --> 00:02:52,500
de texte d'ouverture et de fermeture lorsque nous utilisons ce composant.

30
00:02:52,510 --> 00:02:56,570
Ensuite, j'ai mes styles et là, j'utilise la feuille de style. créer et bien sûr j'exporte ce

31
00:02:56,950 --> 00:03:01,390
composant comme ça et maintenant ici dans cette feuille de style, je mets simplement

32
00:03:01,390 --> 00:03:07,370
un style que j'applique ici à ce texte, le corps des styles ou tout ce que vous voulez pour

33
00:03:08,650 --> 00:03:09,590
le nommer,

34
00:03:09,820 --> 00:03:12,680
avoir le style du corps ici et le style

35
00:03:12,910 --> 00:03:19,060
que je set est la famille de polices open sans et je vais utiliser bold pour l'instant afin que nous

36
00:03:19,060 --> 00:03:20,110
puissions voir que

37
00:03:20,170 --> 00:03:25,890
cela a vraiment un effet avant de le changer en un peu plus difficile à voir, open sans,

38
00:03:25,900 --> 00:03:31,900
donc open-sans-bold et maintenant c'est un composant très simple, juste une enveloppe mince autour du texte normal mais une

39
00:03:31,960 --> 00:03:34,360
enveloppe mince qui définit toujours cette famille de

40
00:03:34,420 --> 00:03:39,640
polices et cela signifie que chaque fois que nous voulons avoir du texte qui utilise cette seule

41
00:03:39,640 --> 00:03:46,780
famille, peut-être à tous les endroits de l'application, au lieu d'utiliser le composant de texte normal de React Native, nous utilisons simplement le

42
00:03:46,780 --> 00:03:52,920
composant de corps de texte que je viens de créer. Je peux donc importer le corps du texte à

43
00:03:53,890 --> 00:04:01,630
partir des composants BodyText, importer ce composant et maintenant je peux simplement remplacer le composant texte ici par le corps du texte et si

44
00:04:01,630 --> 00:04:06,830
nous le faisons et que nous l'enregistrons, nous voyons bien sûr que maintenant ce sera en

45
00:04:07,090 --> 00:04:12,640
gras, eh bien si je l'aurait utilisé sur le bon texte, c'est bien sûr le texte sélectionné

46
00:04:12,640 --> 00:04:17,670
par l'utilisateur, c'est bien là aussi mais je veux aller ici pour sélectionner le numéro.

47
00:04:17,740 --> 00:04:23,800
Donc, si je l'utilise là-bas, le corps du texte, envelopper ce texte, vous voyez maintenant que c'est en gras et maintenant nous pouvons également

48
00:04:23,800 --> 00:04:30,850
revenir en arrière et donner à notre corps de texte le look sans ouvert réellement prévu qui n'est toujours pas la police par défaut mais qui peut '

49
00:04:31,240 --> 00:04:33,370
On voit immédiatement que c'est une police différente.

50
00:04:33,400 --> 00:04:40,240
Il s'agit donc de l'option de passer un style de texte ou une famille de polices, vous créez simplement votre propre composant

51
00:04:40,240 --> 00:04:45,250
de texte qui a toujours cette famille de polices et si vous avez plusieurs familles de

52
00:04:45,250 --> 00:04:49,670
polices différentes, comme un titre et un en-tête, vous créez des composants séparés.

53
00:04:49,790 --> 00:04:55,960
Par exemple ici, nous avons un titre, eh bien nous voulons peut-être l'utiliser aussi dans d'autres parties de l'application. Nous pouvons

54
00:04:55,960 --> 00:05:02,500
donc ajouter un TitleText. fichier js qui est fondamentalement ce que nous avons dans le

55
00:05:02,500 --> 00:05:09,700
corps du texte, donc je vais juste le copier et le déplacer dans le texte du titre, puis ici, nous avons le nom du

56
00:05:09,910 --> 00:05:12,980
texte du titre et ici, c'est le texte du titre

57
00:05:12,980 --> 00:05:19,510
et là, nous utilisons open-sans- gras et peut-être pour le titre, a également une taille de police de 18 et maintenant encore,

58
00:05:19,530 --> 00:05:26,010
renommons cela en titre peut-être, a plus de sens pour l'accessoire de style mais maintenant encore, nous avons une enveloppe très mince

59
00:05:26,010 --> 00:05:34,110
autour du texte et dans tous les endroits où nous avons besoin du titre, comme dans l'en-tête par exemple, nous pouvons nous débarrasser de cette affectation manuelle

60
00:05:34,110 --> 00:05:43,340
de style ici dans le composant d'en-tête et au lieu d'importer simplement notre texte de titre à partir du composant de texte de titre et l'utiliser à la place du texte,

61
00:05:43,340 --> 00:05:47,450
se débarrasser de ce style affectation ici, comme ça et faites de même dans

62
00:05:47,690 --> 00:05:51,520
l'écran de démarrage du jeu. Là, ce texte peut maintenant

63
00:05:51,560 --> 00:05:54,750
être un titre, tout ce que j'ai à faire

64
00:05:54,920 --> 00:05:57,860
est de l'importer. Alors permettez-moi d'importer le texte

65
00:05:57,860 --> 00:06:06,500
du titre à partir du dossier des composants et là, à partir du texte du titre et nous pouvons maintenant le réutiliser et comme nous l'avons fait auparavant avec la

66
00:06:06,500 --> 00:06:12,980
carte par exemple, si vous voulez que cela soit toujours personnalisable afin que nous puissions en configurer plus sur le titre ou

67
00:06:12,980 --> 00:06:18,740
remplacer la taille de la police ou ajouter une marge comme nous le faisons ici, eh bien ce que vous

68
00:06:18,770 --> 00:06:25,440
pouvez toujours faire est que vous pouvez toujours ajouter du style ici au texte du titre, se référer au titre des styles, donc

69
00:06:25,530 --> 00:06:32,080
au style de titre que j'ai mis en place là-bas dans l'écran de démarrage du jeu et à l'intérieur du composant de texte

70
00:06:32,080 --> 00:06:37,270
de titre, il vous suffit de vous assurer de fusionner ces styles entrants avec les styles que vous

71
00:06:37,270 --> 00:06:38,240
configurez là-bas.

72
00:06:38,260 --> 00:06:47,680
Donc ici, le style pointe maintenant sur un objet où vous prenez toutes les valeurs dans les titres définis ici, puis les fusionnez ou remplacez-les

73
00:06:47,680 --> 00:06:53,510
par toutes les valeurs définies dans le style des accessoires et vous avez maintenant un calque

74
00:06:53,620 --> 00:07:00,190
de texte réglable qui définit ces styles par défaut mais qui peuvent être remplacés et ajustés à vos

75
00:07:00,190 --> 00:07:01,990
besoins et nous avons

76
00:07:01,990 --> 00:07:06,330
donc le même aspect qu'auparavant, mais maintenant avec plus de convivialité.

77
00:07:06,340 --> 00:07:08,730
Encore une fois, c'est l'option numéro un.

78
00:07:08,740 --> 00:07:15,700
L'alternative à cela serait que, par exemple, dans le dossier constantes, vous avez vos styles par défaut. fichier js ou tout ce que vous

79
00:07:15,720 --> 00:07:18,070
voulez lui donner et

80
00:07:18,310 --> 00:07:26,770
là-dedans, vous exportez une feuille de style par défaut et vous devez l'importer par conséquent, importez la

81
00:07:26,770 --> 00:07:29,530
feuille de style de React Native.

82
00:07:32,240 --> 00:07:43,590
Vous exportez votre feuille de style par défaut. créer un objet et là vous définissez comme votre corps de texte par exemple, n'importe quel nom que vous

83
00:07:44,070 --> 00:07:45,100
voulez et ici

84
00:07:45,150 --> 00:07:50,910
vous définissez une famille de polices, ouvrez sans et peut-être juste temporairement afin que nous puissions voir si cela

85
00:07:50,910 --> 00:07:52,520
fonctionne, donnez-lui une couleur rouge.

86
00:07:52,680 --> 00:07:55,480
Maintenant, vous pouvez importer cela dans différents fichiers,

87
00:07:55,680 --> 00:08:07,630
disons dans l'écran de jeu, là, nous pouvons maintenant importer des styles par défaut à partir du dossier constantes et là, des styles par défaut et si nous voulons maintenant ce style de texte

88
00:08:07,670 --> 00:08:11,070
par défaut ici par exemple sur les adversaires devinez, eh

89
00:08:11,090 --> 00:08:12,930
bien alors tout ce que

90
00:08:13,160 --> 00:08:19,340
nous faisons est de définir le style ici, d'atteindre les styles par défaut et de pointer sur le

91
00:08:19,340 --> 00:08:23,440
corps du texte et vous verrez si nous commençons une partie maintenant,

92
00:08:23,450 --> 00:08:25,200
ce texte sera rouge.

93
00:08:25,370 --> 00:08:29,360
Donc, si nous commençons ce jeu, les adversaires devineront rouges.

94
00:08:29,390 --> 00:08:35,360
Donc, ce serait une alternative à des composants séparés, que vous avez simplement une feuille de style gérée globalement

95
00:08:35,360 --> 00:08:38,470
que vous importez dans différents fichiers et maintenant je n'ai

96
00:08:38,680 --> 00:08:44,760
plus vraiment besoin d'un corps de texte rouge mais ce que je veux, c'est un titre et là , Je

97
00:08:44,780 --> 00:08:52,730
veux avoir une famille de polices open-sans-bold et une taille de police disons 18 et oui j'ai la même configuration dans le texte du titre, je

98
00:08:52,970 --> 00:08:55,320
le recrée juste ici pour montrer les

99
00:08:55,340 --> 00:09:01,010
deux alternatives car maintenant avec le titre étant configuré comme ceci dans la feuille de style par défaut,

100
00:09:01,010 --> 00:09:06,920
nous pouvons maintenant aller à l'écran de jeu et entendre ne pas utiliser le corps du texte mais utiliser

101
00:09:07,250 --> 00:09:13,610
le titre sur la conjecture de l'adversaire et le résultat est que si nous redémarrons maintenant ce jeu, nous avoir ce

102
00:09:13,610 --> 00:09:14,630
joli titre ici.

103
00:09:14,660 --> 00:09:19,670
C'est donc une alternative valide et c'est à vous de choisir celui que vous préférez, des composants

104
00:09:19,670 --> 00:09:25,560
séparés que vous réutilisez au lieu du composant texte ou du composant texte avec un style géré globalement et comme note

105
00:09:25,760 --> 00:09:31,460
latérale, dans ce style géré globalement, vous êtes de Bien sûr, ne se limite pas à la gestion des propriétés

106
00:09:31,460 --> 00:09:37,490
spécifiques aux polices, vous pouvez gérer tous les styles ici. Ainsi, tous les styles que vous souhaitez partager entre les composants

107
00:09:37,490 --> 00:09:43,940
peuvent être gérés dans une telle feuille de style globale, qui peut être des configurations de mise en page générales, qui peuvent être des couleurs,

108
00:09:43,940 --> 00:09:50,900
qui peuvent être ce que vous voulez, mais généralement vous devez toujours choisir entre la création de composants séparés comme composant de carte qui est un wrapper

109
00:09:50,900 --> 00:09:55,790
autour de la vue ou le texte du corps ou le texte du titre qui sont également juste

110
00:09:55,790 --> 00:10:01,400
des wrappers qui ajoutent du style ou qui gèrent cela ici dans une feuille de style globale, c'est à vous de

111
00:10:01,400 --> 00:10:02,780
décider ce que vous préférez.

112
00:10:02,780 --> 00:10:07,910
Personnellement, j'ai préféré l'approche axée sur les composants, car à la fin, React est tout au sujet des composants

113
00:10:08,180 --> 00:10:13,280
et donc je pense que nous restons un peu plus proches du monde React par défaut en le faisant

114
00:10:13,310 --> 00:10:20,430
comme ça, mais ce n'est pas non plus une décision où vous devez toujours suivre le chemin A ou chemin B, vous pouvez mélanger et assortir

115
00:10:20,540 --> 00:10:25,330
ces concepts, peut-être avez-vous parfois quelque chose où un composant séparé n'a pas vraiment de sens, gérez-le

116
00:10:25,350 --> 00:10:31,070
dans un style global puis et dans d'autres cas, peut-être qu'un composant personnalisé a plus de sens que d'avoir une configuration

117
00:10:31,070 --> 00:10:32,180
de style globale.