Maintenant, avec nos polices personnalisées ajoutées, nous sommes maintenant en mesure de les utiliser dans
notre application et je veux les utiliser dans tous les endroits où nous affichons des textes, comme ici
avec vous sélectionné, ici les adversaires devinent, puis aussi sur la page de résumé,
ce sera également un objectif ici dans cette application et en plus de cela, quand un jeu est terminé, non seulement
je veux utiliser notre police personnalisée ici sur cette page de jeu, mais je veux aussi montrer une image, un jeu sur
l'image ici, c'est donc
la prochaine chose que je veux travailler.
La première étape consiste à remplacer ce texte ici par le corps du texte pour utiliser la police, donc j'importe le texte du corps à partir du
dossier des composants et là, à partir du texte du corps, puis je remplace tous ces composants de texte ici par le corps du
texte, simplement pour que lorsqu'un jeu est terminé, nous utilisons notre police personnalisée, c'est
le but ici.
Mais c'est comme je viens de dire
une seule chose, la principale chose qui devrait arriver ici est que nous avons également une image ici.
Alors disons que nous avons notre jeu est sur le titre en fait, alors utilisons le texte du titre ici peut-être maintenant que j'y pense, le
texte du
titre au lieu du corps du texte mais qu'en dessous de ce titre,
donc en dessous du jeu est terminé, nous montrons un image.
Donc ici, je veux utiliser un composant qui nous permet en fait d'afficher une image et React Native
a un tel composant, il a un composant image. Nous pouvons utiliser l'image ici comme un composant normal dans notre code
jsx comme ça, c'est un composant à fermeture automatique, une image a un accessoire important et c'est l'accessoire source et
l'accessoire source comme son nom l'indique doit être réglé pour pointer sur une image et maintenant il y a deux types d'images que
vous pouvez utiliser - des images locales que vous expédiez dans le cadre de votre application, de sorte que vous incluez dans
votre code source, dans votre ensemble d'applications à la fin ou des images réseau et nous aurons un regardez les deux.
Commençons maintenant par une image locale et pour cela, vous trouverez ci-joint ces succès. fichier png que vous pouvez faire glisser dans votre dossier d'actifs, donc
pas dans le dossier des polices mais
juste dans les actifs ou vous créez un sous-dossier d'images si vous le souhaitez, cela n'a pas
vraiment
d'importance, je l'aurai
juste ici dans les actifs , c'est ce succès. fichier png et c'est le fichier que je
veux utiliser ici, donc l'image que je veux rendre ici. Maintenant pour cela, pour rendre cette image ici, nous utilisons une syntaxe spéciale qui
pourrait sembler étrange la première fois que vous la voyez. Vous avez utilisé cette fonction require qui est intégrée à Javascript
ou qui est prise en charge par React Native en Javascript, disons, où vous passez une chaîne comme argument et ceci
est la chaîne pointant vers l'image et cela devrait être un chemin relatif, donc ici depuis
nous sommes dans
le dossier screens, nous devons remonter d'un niveau, puis dans le dossier assets et puis ici, nous
pouvons pointer vers le succès. png,
juste comme ça.
Maintenant, cela indique à React Native que nous voulons utiliser cette image ici et dans les
coulisses, cela permet à React Native de la charger efficacement et également de regarder l'image et par exemple
de déterminer
sa largeur et sa hauteur, c'est pourquoi nous utilisons cette étrange nécessitent une syntaxe et nous devons charger des images locales comme celle-ci.
Maintenant, pour voir
le résultat, je vais modifier l'application. fichier js temporairement pour nous assurer que nous affichons toujours le jeu
sur l'écran, simplement pour que je ne doive pas toujours parcourir tout l'écran juste pour vérifier qu'il a mis à jour, qu'il a changé.
Donc, le jeu sur l'écran est ce que j'utiliserai temporairement comme contenu principal ici dès le début et je passerai simplement des numéros fictifs pour le numéro
de tours et le numéro d'utilisateur, encore une fois je ne fais cela que pour commencer
le jeu sur l'écran ici et voyez ce que cela nous donne. Et nous pouvons voir ce que cela
nous donne, cela nous donne au final une image plein écran, une très grande image.
La raison en est que l'image que je vous ai donnée
est assez grande, ce succès. Le fichier png n'est pas
un petit fichier, c'est une très grosse image concernant les pixels, sa largeur et sa hauteur.
Et comme je l'ai dit lorsque vous utilisez require comme ceci, la bonne chose est que React Native a regardé le fichier image,
a déterminé sa largeur et sa hauteur et utilise la même largeur et hauteur
ici, ce qui signifie que nous rendons cette image énorme ici sur l'application et l'inconvénient est simplement que cela ne tient plus
sur l'écran ou occupe tout l'écran parce que c'est un fichier trop volumineux.
Si nous avions une image plus petite, ce ne serait pas un problème, alors elle occuperait juste une
partie de l'écran mais comme c'est une grande image, elle occupe tout l'écran.