Alors maintenant, avec cette image ajoutée et maintenant que nous travaillons déjà sur le jeu sur l'écran ici,
affinons ce texte que nous voyons ici en
bas, rendons-le un peu plus joli, un peu plus beau et en plus
avant Je fais cela, je vais en fait revenir de l'utilisation de l'image réseau à l'image locale
mais cela dépend entièrement de vous, ce que vous préférez là-bas.
Je veux donc travailler sur le texte ici et au lieu d'avoir simplement ce genre de texte tabulaire ici
qui ne produit que des informations d'une manière ennuyeuse, pourquoi
ne le présentons-nous pas dans une attente plus agréable? En détail, je pense que ce serait plus
agréable si nous avions un texte lisible par l'homme ici, donc une vraie phrase que nous pouvons lire.
Donc là, nous pourrions dire que votre téléphone avait besoin, puis ici nous avons le nombre de tours, les tours pour deviner le nombre
et qu'ici entrerait le nombre.
Donc, bien sûr, le nombre est le numéro d'utilisateur des accessoires et encore une fois, vous pouvez vous débarrasser
de cette ligne maintenant, mais je ne veux pas simplement afficher le numéro d'utilisateur des accessoires comme ceci, au lieu de cela,
je veux le mettre en évidence, je veux lui donner une couleur spéciale c'est différent de l'autre couleur ici et la même chose ici pour les tours,
donc le nombre de tours des accessoires serait bien si cela était également coloré différemment. Maintenant, pour colorer cela différemment, nous pouvons réellement
envelopper cela dans un autre nœud de texte ici. Vous pouvez donc avoir des nœuds de texte, des
composants de texte à l'intérieur du texte, à l'intérieur d'autres composants
de texte, c'est donc possible, juste comme ça.
Maintenant, c'est vraiment important à comprendre,
vous pouvez imbriquer des composants de texte dans d'autres composants de texte et garder à l'esprit que le corps du texte à la fin n'est
qu'un composant de texte, le corps de texte est un composant qui renvoie simplement le composant de texte
intégré, donc tout ce que nous entrer entre le corps du texte est le même que si nous le saisissions entre
les composants de texte intégrés et donc nous pouvons avoir du texte imbriqué là-dedans et nous pouvons théoriquement aussi avoir des vues imbriquées
dedans mais il y a quelques mises en garde à cela et donc si vous vous n'avez absolument aucune
raison valable pour laquelle vous auriez besoin d'une vue, vous ne devriez pas vraiment imbriquer des vues dans du texte
et il y a rarement une raison de le faire. Le texte à l'intérieur du texte peut cependant avoir
beaucoup de sens car il vous permet de styliser des parties d'un texte différemment du reste du texte.
Donc ici, par exemple, je veux ajouter du style avec des styles. mettez en surbrillance et la même chose ici pour le deuxième
texte pour mettre en évidence cette partie du texte et maintenant bien sûr, nous pouvons ajouter un surlignage là-bas dans notre
feuille de style dans le jeu sur l'écran, surligner et là par exemple donner à cette couleur une couleur où nous utilisons des couleurs et
pour cela, nous devons ajouter l'importation où nous importons des couleurs à partir de constantes / Couleurs et ensuite peut-être
utiliser notre couleur principale là-bas, donc Couleurs. primaire. Si nous faisons cela, ce que vous verrez, c'est que maintenant, cela est mis en évidence.
Maintenant aussi quelque chose d'intéressant, si je vais temporairement dans le corps du texte et que je le
change pour
ouvrir sans gras ici, donc j'utilise la version en gras, vous verrez que même ce texte en surbrillance est toujours
en gras, peut être un peu difficile à voir mais c'est en fait audacieux et c'est très intéressant car plus
tôt dans le cours, j'ai mentionné que vos styles n'hériteraient pas, de sorte que si vous par exemple dans le jeu sur
écran définissez une famille de polices ici sur votre style d'écran qui est appliqué à la vue qui enveloppe tout, cette famille de polices ne serait
pas transmise aux composants imbriqués à l'intérieur de cette vue.
Donc, ce n'est pas parce que vous définissez un style ici sur cette vue que toutes les autres vues ou tous
les autres textes, quels qu'ils soient, obtiennent les mêmes styles. Les styles que vous appliquez toujours à
un composant sont simplement appliqués à ce composant et non aux composants imbriqués et pourtant c'est différent pour le texte.
Là, ce texte ici, le texte en surbrillance qui est imbriqué à l'intérieur du corps du texte obtient également cette famille en gras si nous le modifions sur le
corps du
texte et c'est simplement une différence importante que React Native a. Pour les composants de texte, si vous
y
ajoutez du style, le style est transmis aux composants de texte imbriqués,
c'est une exception pour React Native. Le texte à l'intérieur du texte reçoit le style
défini sur le texte externe, donc tout style que vous définissez sur le corps du texte ici est automatiquement reçu par les composants de texte imbriqués.
Il y a un autre comportement important concernant le composant texte dans React Native et c'est
qu'il n'utilise pas flexbox. La vue utilise flexbox, le
composant texte bien sûr ne le fait pas et je l'ai déjà mentionné, que
le composant view utilise flexbox pas du texte ou d'autres composants mais le texte utilise son propre système de positionnement où il s'enroule automatiquement
dans une nouvelle ligne s'il ne le fait pas '' t rentrer dans une ligne et pour
le démontrer, nous pourrions aller ici au jeu sur l'écran et envelopper notre texte entier ici en bas dans une autre vue,
alors prenez ce corps de texte et ajoutez-le ici dans cette vue et là, ajoutez un style disons que le nom du texte de résultat, quel
que soit le nom que vous souhaitez donner à ce conteneur de résultats, soit plus conforme aux autres noms de style.
Donc, le conteneur de résultats est ajouté
à la vue et maintenant si j'ajoute cela ici, n'importe où ici dans ma feuille de style et que je lui donne une largeur de disons 80%,
ce qui est logique, de sorte que le texte a un peu plus de
distance à gauche et à droite ou alternativement, j'ajoute une marge horizontale de disons 20 pour avoir un certain espacement à gauche et à droite autour
du conteneur, puis vous voyez que le texte est en effet enveloppé dans une nouvelle ligne et c'est également un comportement
par défaut du composant texte dans React Native.
Non seulement il analyse les styles jusqu'au texte imbriqué, il a également son propre système de positionnement ou son propre système de
mise en page où le texte s'enroule automatiquement dans une nouvelle ligne s'il ne tient pas
et la même ligne et cela fait bien sûr beaucoup de sens, c'est généralement ce que vous voulez
sur votre texte, vous voulez qu'il s'encapsule dans de nouvelles lignes. Maintenant, avec cela, je reviendrai sur ce paramètre sur le corps du texte,
je ne
vais pas utiliser open-sans-bold là, j'utilise juste
open sans mais je voulais montrer cette chose d'héritage de style et aussi bien sûr en général vous laisser savoir
comment le texte se comporte quant à la façon dont il est mis en page.
Tout cela étant dit à propos du texte, nous
n'avons pas fini cependant, je ne pense
pas que ça a l'air si bien, à la place sur le jeu sur l'écran, ce texte en surbrillance devrait peut-être être
en gras, donc je vais utiliser une famille de polices de open -sans-bold ici pour que cela se démarque
vraiment et soit plus facile à voir et en plus, j'ajouterai également une marge horizontale de 30 ici pour avoir un peu plus d'espacement de gauche
à droite autour du texte.
Maintenant, en plus, je veux aussi m'assurer que le texte est centré, de sorte que si nous avons un
saut de ligne, tout est centré au milieu et nous ne recommençons pas sur le bord gauche et cela peut maintenant être
réalisé avec une propriété de
style spéciale que vous pouvez ajouter sur les composants
de texte et c'est la propriété d'alignement du texte.
Le problème, c'est que je ne veux pas utiliser ceci sur le texte en surbrillance,
je veux l'utiliser sur le corps du texte et par conséquent, nous devons ajouter un style ici, peut-être que le texte
du résultat est un nom approprié ici puisque c'est notre le texte dans
son ensemble, puis ici, nous pouvons simplement
ajouter du texte
de résultat et sur ce texte de résultat, définir l'alignement du texte au centre.
Cependant, si je l'enregistre, cela n'a aucun effet car notre corps de texte n'est pas configuré pour prendre en compte le style,
l'accessoire de style que nous pourrions y ajouter. Dans le corps du texte, le seul style défini est
le texte défini en interne.
Maintenant, nous avons appris comment changer cela, nous passons simplement un objet ici
au style, prenons toutes nos propriétés de style personnalisées de ce fichier et les distribuons dans cet objet et fusionnons cela avec
tout ce que nous obtenons sur le style des accessoires en utilisant l'opérateur de
propagation ici aussi. Et avec cela,
maintenant si nous sauvegardons cela, nous voyons que c'est maintenant bien centré et c'est certainement un
peu plus agréable à lire qu'auparavant.
Maintenant, avec cela, nous avons presque fini de styliser ce texte, la dernière chose qui me semble bien ici est que si
sur le texte du résultat, nous augmentons également un peu la taille de la police.
Donc, si nous définissons la taille de la police ici à 20 peut-être, donc très grand et sur
le conteneur de résultat, je veux également avoir une marge verticale de 15 peut-être, pour avoir un certain espacement en haut et en
bas autour du texte.
Et maintenant, avec cela, nous avons un jeu sur écran qui, à mon avis, n'a pas l'air trop mal
et vous avez beaucoup appris sur le fonctionnement du texte, alors comment vous pouvez travailler avec le composant texte dans React Native.