1 00:00:02,320 --> 00:00:08,220 Alors maintenant, avec cette image ajoutée et maintenant que nous travaillons déjà sur le jeu sur l'écran ici, 2 00:00:08,230 --> 00:00:11,280 affinons ce texte que nous voyons ici en 3 00:00:11,280 --> 00:00:15,640 bas, rendons-le un peu plus joli, un peu plus beau et en plus 4 00:00:15,760 --> 00:00:21,400 avant Je fais cela, je vais en fait revenir de l'utilisation de l'image réseau à l'image locale 5 00:00:21,400 --> 00:00:24,850 mais cela dépend entièrement de vous, ce que vous préférez là-bas. 6 00:00:24,850 --> 00:00:29,890 Je veux donc travailler sur le texte ici et au lieu d'avoir simplement ce genre de texte tabulaire ici 7 00:00:29,930 --> 00:00:32,560 qui ne produit que des informations d'une manière ennuyeuse, pourquoi 8 00:00:32,560 --> 00:00:37,460 ne le présentons-nous pas dans une attente plus agréable? En détail, je pense que ce serait plus 9 00:00:37,600 --> 00:00:43,030 agréable si nous avions un texte lisible par l'homme ici, donc une vraie phrase que nous pouvons lire. 10 00:00:43,400 --> 00:00:52,720 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 11 00:00:52,800 --> 00:00:55,140 et qu'ici entrerait le nombre. 12 00:00:55,240 --> 00:00:59,810 Donc, bien sûr, le nombre est le numéro d'utilisateur des accessoires et encore une fois, vous pouvez vous débarrasser 13 00:00:59,950 --> 00:01:05,260 de cette ligne maintenant, mais je ne veux pas simplement afficher le numéro d'utilisateur des accessoires comme ceci, au lieu de cela, 14 00:01:05,260 --> 00:01:11,680 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, 15 00:01:11,690 --> 00:01:19,480 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 16 00:01:19,480 --> 00:01:28,150 envelopper cela dans un autre nœud de texte ici. Vous pouvez donc avoir des nœuds de texte, des 17 00:01:28,150 --> 00:01:32,920 composants de texte à l'intérieur du texte, à l'intérieur d'autres composants 18 00:01:32,920 --> 00:01:36,820 de texte, c'est donc possible, juste comme ça. 19 00:01:36,820 --> 00:01:38,970 Maintenant, c'est vraiment important à comprendre, 20 00:01:38,970 --> 00:01:45,790 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 21 00:01:45,790 --> 00:01:51,080 qu'un composant de texte, le corps de texte est un composant qui renvoie simplement le composant de texte 22 00:01:51,160 --> 00:01:57,100 intégré, donc tout ce que nous entrer entre le corps du texte est le même que si nous le saisissions entre 23 00:01:57,100 --> 00:02:03,430 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 24 00:02:03,430 --> 00:02:08,800 dedans mais il y a quelques mises en garde à cela et donc si vous vous n'avez absolument aucune 25 00:02:08,800 --> 00:02:14,370 raison valable pour laquelle vous auriez besoin d'une vue, vous ne devriez pas vraiment imbriquer des vues dans du texte 26 00:02:14,370 --> 00:02:20,020 et il y a rarement une raison de le faire. Le texte à l'intérieur du texte peut cependant avoir 27 00:02:20,020 --> 00:02:25,310 beaucoup de sens car il vous permet de styliser des parties d'un texte différemment du reste du texte. 28 00:02:25,360 --> 00:02:32,970 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 29 00:02:33,210 --> 00:02:40,170 texte pour mettre en évidence cette partie du texte et maintenant bien sûr, nous pouvons ajouter un surlignage là-bas dans notre 30 00:02:40,170 --> 00:02:48,510 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 31 00:02:48,530 --> 00:02:55,010 pour cela, nous devons ajouter l'importation où nous importons des couleurs à partir de constantes / Couleurs et ensuite peut-être 32 00:02:55,010 --> 00:03:02,420 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. 33 00:03:03,440 --> 00:03:09,350 Maintenant aussi quelque chose d'intéressant, si je vais temporairement dans le corps du texte et que je le 34 00:03:09,350 --> 00:03:10,210 change pour 35 00:03:10,490 --> 00:03:17,150 ouvrir sans gras ici, donc j'utilise la version en gras, vous verrez que même ce texte en surbrillance est toujours 36 00:03:17,150 --> 00:03:23,570 en gras, peut être un peu difficile à voir mais c'est en fait audacieux et c'est très intéressant car plus 37 00:03:23,870 --> 00:03:30,860 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 38 00:03:30,860 --> 00:03:39,170 é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 39 00:03:39,470 --> 00:03:42,970 pas transmise aux composants imbriqués à l'intérieur de cette vue. 40 00:03:42,980 --> 00:03:48,490 Donc, ce n'est pas parce que vous définissez un style ici sur cette vue que toutes les autres vues ou tous 41 00:03:48,490 --> 00:03:54,080 les autres textes, quels qu'ils soient, obtiennent les mêmes styles. Les styles que vous appliquez toujours à 42 00:03:54,080 --> 00:04:00,780 un composant sont simplement appliqués à ce composant et non aux composants imbriqués et pourtant c'est différent pour le texte. 43 00:04:00,780 --> 00:04:09,050 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 44 00:04:09,260 --> 00:04:10,160 corps du 45 00:04:10,250 --> 00:04:16,550 texte et c'est simplement une différence importante que React Native a. Pour les composants de texte, si vous 46 00:04:16,580 --> 00:04:17,720 y 47 00:04:17,720 --> 00:04:23,900 ajoutez du style, le style est transmis aux composants de texte imbriqués, 48 00:04:23,900 --> 00:04:29,750 c'est une exception pour React Native. Le texte à l'intérieur du texte reçoit le style 49 00:04:29,750 --> 00:04:37,610 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. 50 00:04:37,680 --> 00:04:43,800 Il y a un autre comportement important concernant le composant texte dans React Native et c'est 51 00:04:43,800 --> 00:04:47,370 qu'il n'utilise pas flexbox. La vue utilise flexbox, le 52 00:04:47,370 --> 00:04:52,110 composant texte bien sûr ne le fait pas et je l'ai déjà mentionné, que 53 00:04:52,320 --> 00:05:00,180 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 54 00:05:00,210 --> 00:05:05,580 dans une nouvelle ligne s'il ne le fait pas '' t rentrer dans une ligne et pour 55 00:05:05,580 --> 00:05:12,810 le démontrer, nous pourrions aller ici au jeu sur l'écran et envelopper notre texte entier ici en bas dans une autre vue, 56 00:05:12,810 --> 00:05:21,180 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 57 00:05:21,210 --> 00:05:28,080 que soit le nom que vous souhaitez donner à ce conteneur de résultats, soit plus conforme aux autres noms de style. 58 00:05:28,170 --> 00:05:30,410 Donc, le conteneur de résultats est ajouté 59 00:05:30,570 --> 00:05:38,300 à 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%, 60 00:05:38,550 --> 00:05:42,420 ce qui est logique, de sorte que le texte a un peu plus de 61 00:05:42,480 --> 00:05:49,980 distance à gauche et à droite ou alternativement, j'ajoute une marge horizontale de disons 20 pour avoir un certain espacement à gauche et à droite autour 62 00:05:49,980 --> 00:05:55,980 du conteneur, puis vous voyez que le texte est en effet enveloppé dans une nouvelle ligne et c'est également un comportement 63 00:05:55,980 --> 00:05:58,410 par défaut du composant texte dans React Native. 64 00:05:58,410 --> 00:06:05,700 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 65 00:06:05,700 --> 00:06:10,950 mise en page où le texte s'enroule automatiquement dans une nouvelle ligne s'il ne tient pas 66 00:06:11,040 --> 00:06:16,830 et la même ligne et cela fait bien sûr beaucoup de sens, c'est généralement ce que vous voulez 67 00:06:17,070 --> 00:06:24,920 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, 68 00:06:24,920 --> 00:06:25,880 je ne 69 00:06:25,880 --> 00:06:28,190 vais pas utiliser open-sans-bold là, j'utilise juste 70 00:06:28,310 --> 00:06:34,530 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 71 00:06:34,580 --> 00:06:38,960 comment le texte se comporte quant à la façon dont il est mis en page. 72 00:06:38,960 --> 00:06:41,450 Tout cela étant dit à propos du texte, nous 73 00:06:41,480 --> 00:06:43,730 n'avons pas fini cependant, je ne pense 74 00:06:43,760 --> 00:06:49,860 pas que ça a l'air si bien, à la place sur le jeu sur l'écran, ce texte en surbrillance devrait peut-être être 75 00:06:50,100 --> 00:06:55,400 en gras, donc je vais utiliser une famille de polices de open -sans-bold ici pour que cela se démarque 76 00:06:55,670 --> 00:07:02,930 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 77 00:07:02,930 --> 00:07:04,640 à droite autour du texte. 78 00:07:04,640 --> 00:07:10,490 Maintenant, en plus, je veux aussi m'assurer que le texte est centré, de sorte que si nous avons un 79 00:07:10,490 --> 00:07:17,090 saut de ligne, tout est centré au milieu et nous ne recommençons pas sur le bord gauche et cela peut maintenant être 80 00:07:17,090 --> 00:07:19,010 réalisé avec une propriété de 81 00:07:19,010 --> 00:07:21,760 style spéciale que vous pouvez ajouter sur les composants 82 00:07:21,790 --> 00:07:24,770 de texte et c'est la propriété d'alignement du texte. 83 00:07:25,070 --> 00:07:29,210 Le problème, c'est que je ne veux pas utiliser ceci sur le texte en surbrillance, 84 00:07:29,210 --> 00:07:34,990 je veux l'utiliser sur le corps du texte et par conséquent, nous devons ajouter un style ici, peut-être que le texte 85 00:07:35,000 --> 00:07:38,460 du résultat est un nom approprié ici puisque c'est notre le texte dans 86 00:07:38,660 --> 00:07:40,760 son ensemble, puis ici, nous pouvons simplement 87 00:07:44,450 --> 00:07:45,400 ajouter du texte 88 00:07:45,410 --> 00:07:49,150 de résultat et sur ce texte de résultat, définir l'alignement du texte au centre. 89 00:07:49,220 --> 00:07:56,570 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, 90 00:07:56,630 --> 00:08:02,660 l'accessoire de style que nous pourrions y ajouter. Dans le corps du texte, le seul style défini est 91 00:08:02,660 --> 00:08:04,660 le texte défini en interne. 92 00:08:04,670 --> 00:08:09,080 Maintenant, nous avons appris comment changer cela, nous passons simplement un objet ici 93 00:08:09,080 --> 00:08:16,170 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 94 00:08:16,170 --> 00:08:20,670 tout ce que nous obtenons sur le style des accessoires en utilisant l'opérateur de 95 00:08:20,670 --> 00:08:22,930 propagation ici aussi. Et avec cela, 96 00:08:22,940 --> 00:08:28,370 maintenant si nous sauvegardons cela, nous voyons que c'est maintenant bien centré et c'est certainement un 97 00:08:28,550 --> 00:08:30,490 peu plus agréable à lire qu'auparavant. 98 00:08:30,680 --> 00:08:37,070 Maintenant, avec cela, nous avons presque fini de styliser ce texte, la dernière chose qui me semble bien ici est que si 99 00:08:37,070 --> 00:08:41,490 sur le texte du résultat, nous augmentons également un peu la taille de la police. 100 00:08:41,570 --> 00:08:47,990 Donc, si nous définissons la taille de la police ici à 20 peut-être, donc très grand et sur 101 00:08:47,990 --> 00:08:55,700 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 102 00:08:55,700 --> 00:08:57,180 bas autour du texte. 103 00:08:57,320 --> 00:09:02,240 Et maintenant, avec cela, nous avons un jeu sur écran qui, à mon avis, n'a pas l'air trop mal 104 00:09:02,240 --> 00:09:07,520 et vous avez beaucoup appris sur le fonctionnement du texte, alors comment vous pouvez travailler avec le composant texte dans React Native.