Maintenant, je veux également utiliser cette famille de polices pour le titre de l'en-tête.
Donc, ici, dans mon composant d'en-tête, sur le
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
et pour tout autre texte de cette application, je veux réellement utiliser mon open sans police.
Ainsi, par exemple, dans les jeux de démarrage verts ici, nous avons notre texte, sélectionnez un numéro et pour utiliser la
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
de texte ici au en bas, puis utilisez la famille de polices open-sans. Cela fonctionne, mais cela a bien sûr
un inconvénient.
L'inconvénient est que vous devez maintenant manuellement ajouter cette famille de polices à n'importe quel texte de votre application où
vous souhaitez l'utiliser et que vous devez l'ajouter directement sur les composants de texte, vous ne pouvez pas
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,
malheureusement cela ne fonctionne pas.
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,
vous voyez que ce n'est clairement pas en gras, sélectionnez un nombre n'est pas en gras.
Donc, le transmettre comme ceci, comme cela fonctionne en CSS, ne fonctionne pas parce que ce n'est
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
cet objet de style est attaché.
Il nous faudrait donc styliser ce texte individuellement, mais encore une fois, recréer ce style encore et encore dans tous les
différents endroits pourrait ne pas être ce que vous voulez faire à la fin.
Il existe deux solutions de contournement ou la solution de contournement semble toujours un
peu sale, deux façons de gérer cela de manière plus élégante.
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
que soit le nom que
vous souhaitez lui donner et je l'appellerai BodyText. js et ce sera un composant très
simple, je viens d'importer React de React et j'importe le texte et la feuille de style de React Native ici, puis le
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
les les balises de
texte afin que nous puissions passer du contenu au corps du texte en le passant entre la balise
de texte d'ouverture et de fermeture lorsque nous utilisons ce composant.
Ensuite, j'ai mes styles et là, j'utilise la feuille de style. créer et bien sûr j'exporte ce
composant comme ça et maintenant ici dans cette feuille de style, je mets simplement
un style que j'applique ici à ce texte, le corps des styles ou tout ce que vous voulez pour
le nommer,
avoir le style du corps ici et le style
que je set est la famille de polices open sans et je vais utiliser bold pour l'instant afin que nous
puissions voir que
cela a vraiment un effet avant de le changer en un peu plus difficile à voir, open sans,
donc open-sans-bold et maintenant c'est un composant très simple, juste une enveloppe mince autour du texte normal mais une
enveloppe mince qui définit toujours cette famille de
polices et cela signifie que chaque fois que nous voulons avoir du texte qui utilise cette seule
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
composant de corps de texte que je viens de créer. Je peux donc importer le corps du texte à
partir des composants BodyText, importer ce composant et maintenant je peux simplement remplacer le composant texte ici par le corps du texte et si
nous le faisons et que nous l'enregistrons, nous voyons bien sûr que maintenant ce sera en
gras, eh bien si je l'aurait utilisé sur le bon texte, c'est bien sûr le texte sélectionné
par l'utilisateur, c'est bien là aussi mais je veux aller ici pour sélectionner le numéro.
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
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 '
On voit immédiatement que c'est une police différente.
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
de texte qui a toujours cette famille de polices et si vous avez plusieurs familles de
polices différentes, comme un titre et un en-tête, vous créez des composants séparés.
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
donc ajouter un TitleText. fichier js qui est fondamentalement ce que nous avons dans le
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
texte du titre et ici, c'est le texte du titre
et là, nous utilisons open-sans- gras et peut-être pour le titre, a également une taille de police de 18 et maintenant encore,
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
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
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,
se débarrasser de ce style affectation ici, comme ça et faites de même dans
l'écran de démarrage du jeu. Là, ce texte peut maintenant
être un titre, tout ce que j'ai à faire
est de l'importer. Alors permettez-moi d'importer le texte
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
carte par exemple, si vous voulez que cela soit toujours personnalisable afin que nous puissions en configurer plus sur le titre ou
remplacer la taille de la police ou ajouter une marge comme nous le faisons ici, eh bien ce que vous
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
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
de titre, il vous suffit de vous assurer de fusionner ces styles entrants avec les styles que vous
configurez là-bas.
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
par toutes les valeurs définies dans le style des accessoires et vous avez maintenant un calque
de texte réglable qui définit ces styles par défaut mais qui peuvent être remplacés et ajustés à vos
besoins et nous avons
donc le même aspect qu'auparavant, mais maintenant avec plus de convivialité.
Encore une fois, c'est l'option numéro un.
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
voulez lui donner et
là-dedans, vous exportez une feuille de style par défaut et vous devez l'importer par conséquent, importez la
feuille de style de React Native.
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
voulez et ici
vous définissez une famille de polices, ouvrez sans et peut-être juste temporairement afin que nous puissions voir si cela
fonctionne, donnez-lui une couleur rouge.
Maintenant, vous pouvez importer cela dans différents fichiers,
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
par défaut ici par exemple sur les adversaires devinez, eh
bien alors tout ce que
nous faisons est de définir le style ici, d'atteindre les styles par défaut et de pointer sur le
corps du texte et vous verrez si nous commençons une partie maintenant,
ce texte sera rouge.
Donc, si nous commençons ce jeu, les adversaires devineront rouges.
Donc, ce serait une alternative à des composants séparés, que vous avez simplement une feuille de style gérée globalement
que vous importez dans différents fichiers et maintenant je n'ai
plus vraiment besoin d'un corps de texte rouge mais ce que je veux, c'est un titre et là , Je
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
le recrée juste ici pour montrer les
deux alternatives car maintenant avec le titre étant configuré comme ceci dans la feuille de style par défaut,
nous pouvons maintenant aller à l'écran de jeu et entendre ne pas utiliser le corps du texte mais utiliser
le titre sur la conjecture de l'adversaire et le résultat est que si nous redémarrons maintenant ce jeu, nous avoir ce
joli titre ici.
C'est donc une alternative valide et c'est à vous de choisir celui que vous préférez, des composants
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
latérale, dans ce style géré globalement, vous êtes de Bien sûr, ne se limite pas à la gestion des propriétés
spécifiques aux polices, vous pouvez gérer tous les styles ici. Ainsi, tous les styles que vous souhaitez partager entre les composants
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,
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
autour de la vue ou le texte du corps ou le texte du titre qui sont également juste
des wrappers qui ajoutent du style ou qui gèrent cela ici dans une feuille de style globale, c'est à vous de
décider ce que vous préférez.
Personnellement, j'ai préféré l'approche axée sur les composants, car à la fin, React est tout au sujet des composants
et donc je pense que nous restons un peu plus proches du monde React par défaut en le faisant
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
ces concepts, peut-être avez-vous parfois quelque chose où un composant séparé n'a pas vraiment de sens, gérez-le
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
de style globale.