Alors maintenant que la logique générale du jeu fonctionne, concentrons-nous davantage sur la finition de ce style et également sur l'ajout
de nos propres polices personnalisées et une belle petite image sur le jeu sur l'écran parce que travailler
avec des images et travailler avec des polices personnalisées est une chose typique dans les temps modernes. le développement d'applications bien sûr,
vous voulez rarement vous en tenir aux polices système par défaut et vous avez rarement une application sans aucune image.
Commençons donc avec les polices personnalisées et dans une expo React Native, l'ajout de polices est super trivial.
Dans votre dossier de projet, dans
le dossier des ressources, créons un dossier de polices. Vous pouvez le stocker n'importe où, mais j'aime le
garder dans le dossier des actifs pour garder mes actifs comme les polices et les images organisées.
Donc ici, dans le dossier des polices, je veux sans surprise gérer mes polices et pour
cela, vous trouverez ci-joint un fichier zip avec deux polices que vous pouvez simplement extraire puis
faire glisser et déposer ici, c'est OpenSans-Bold et OpenSans-Regular,
donc ces deux polices sont attachées à cette vidéo dans un fichier zip, extraites et faites-les glisser dans le
dossier des polices.
Maintenant, avec cela, ces polices sont généralement disponibles, mais pour les utiliser, vous devez encore en configurer davantage.
Vous devez accéder à votre application. fichier js et essentiellement demander à React Native et expo de charger
ces polices, donc de les utiliser. Pour cela dans l'application. fichier js et j'utilise l'application. fichier js parce que c'est
le premier fichier qui est chargé ou qui est exécuté pour ainsi dire quand l'application démarre et
que vous voulez charger vos polices lorsque l'application démarre, là-dedans, vous devez ajouter une importation et cette importation est que vous importez
tout en tant que police, bien que ce nom dépend de vous, mais généralement, vous utilisez la police ici, à partir de expo-font.
Donc, expo-font est un package qui vous donne des utilitaires de police, donc des utilitaires qui vous permettent de charger des polices et d'importer
tout de ce package et de le regrouper dans cet objet de police, c'est ce que
nous faisons ici. Maintenant, pour charger
des polices, j'ajouterai une nouvelle fonction en dehors du composant fonctionnel car cette fonction n'a
pas besoin d'être recréée pour chaque cycle de rendu de composant.
Maintenant, je vais le
nommer chercher les
polices, le nom dépend de vous
et dans cette fonction ici, j'appellerai la police. loadAsync.
Maintenant, c'est une fonction ou une méthode sur le package de polices que nous importons ici qui
vous permet de charger des polices et ce que vous passez pour charger async est un objet où vous dites à Expo et donc React Native de
toutes les polices que vous souhaitez charge. Vous faites cela en utilisant une clé où
vous choisissez n'importe quel nom de votre choix, comme open-sans et vous pourrez plus tard utiliser ces polices par
ces noms, alors ici ouvrez sans parce que ma police s'appelle open sans.
Donc, ici, c'est open sans et ensuite vous ajoutez require, c'est
une fonctionnalité de langage que Javascript propose où vous pointez sur le chemin où cette police est stockée.
C'est un chemin
relatif, donc ici je pointe vers le dossier des
actifs, le dossier des polices et ensuite c'est l'OpenSans-Bold, pas en gras mais régulier. fichier ttf et maintenant je vais ajouter un
deuxième élément ici à cet objet que je passe pour charger async et qui pourrait être open-sans-bold.
Maintenant, ces noms vous appartiennent totalement et je souhaite charger la version en gras.
Donc, avec cela, nous disons à React Native à la fin où nos polices vivent, où ces fichiers de polices vivent et à quels noms nous voulons
les mapper et nous pouvons plus tard utiliser ces noms pour affecter ces polices au texte. Maintenant, charger async renvoie en fait une promesse, ce qui signifie que cela
prendra un peu plus de temps, pas très long, mais il ne les chargera pas instantanément et je retournerai cette promesse ici
à l'intérieur des polices fetch afin que chaque fois que nous appelons des polices fetch, nous pouvons attendre
pour que cette promesse soit résolue avant de continuer. Maintenant, où
voulons-nous récupérer nos polices?
Eh bien, nous pourrions charger manuellement nos polices ici, nous pourrions par exemple appeler des polices de récupération comme celle-ci et cela irait de l'avant et
récupérer nos polices, mais le
problème est que nous continuerions à afficher et nous finirions par rendre notre contenu et si n'importe où dans le contenu, nous utilisons
du texte qui essaie d'utiliser une telle police, si la police n'a pas encore
été chargée et comme je l'ai dit, cela ne prendra que quelques millisecondes mais toujours pour le premier cycle de rendu,
la police n'a peut-être pas été chargée, puis nous obtiendrions une erreur. Il n'est donc pas recommandé de charger
nos polices de cette manière, cela ne fonctionnera probablement pas.
Au lieu de cela, il existe un composant spécial que vous pouvez utiliser, il vous aide à charger vos polices. Vous importez ce composant
depuis expo et le nom de ce composant est AppLoading.
Maintenant, c'est un composant qui prolongera essentiellement l'écran de chargement par défaut, les utilisateurs de l'écran de démarrage voient de
toute façon lorsque l'application se lance, il prolongera cet écran pour rester actif jusqu'à ce qu'une certaine tâche de votre choix soit
effectuée, comme par
exemple jusqu'à ce que la récupération des polices soit terminé.
Donc AppLoading c'est, dans le composant app, nous devons juste nous assurer maintenant
que nous rendons ce composant au lieu de notre contenu réel tant que nous n'avons pas encore
chargé nos polices ou tant
que nous n'avons pas fini de charger quoi que ce soit nous voulions charger.
Maintenant, ce qui est cool, c'est que nous pouvons utiliser state pour cela et commencer avec une valeur
initiale de false parce que l'état que je veux gérer ici est les données chargées ou tout ce que vous voulez appeler et définir les données chargées.
Maintenant, ici, je veux vérifier si les données chargées ne sont pas vraies, d'où le point d'exclamation, alors je sais que les données n'ont pas encore
été chargées et c'est le cas au départ et dans ce cas, je ne vais même pas
continuer avec
mon autre logique , à la place pour ce composant fonctionnel, je retournerai immédiatement le composant AppLoading en tant que contenu de l'application, car je ne
veux
pas rendre d'autre contenu si nous continuons à charger nos données. Maintenant, AppLoading est un composant provenant
d'Expo qui prend un accessoire de démarrage asynchrone où nous pointons l'opération que nous voulons démarrer lors de son
premier rendu et c'est bien sûr notre fonction de récupération de polices.
Alors ici, je pointe sur les polices de récupération, sur cette fonction.
Maintenant important, a) cela doit
être une fonction que vous passez ici et b) ce doit être une fonction qui renvoie
une promesse car expo écoutera automatiquement cette promesse pour vous et lorsque
la promesse se résoudra, elle saura que le chargement est fait et il appellera alors tout ce que vous passez
ici à onFinish.
Donc, ici, vous devez passer une fonction qui définit ensuite les données chargées sur true.
Donc, cette fonction ici sera exécutée pour vous lorsque cette opération sera terminée et pour expo
de savoir
quand cela sera fait, cela devrait retourner une promesse.
Alors maintenant, ces deux accessoires fonctionneront ensemble et nous mettons à jour les données chargées, cet état pour être vrai et
donc pour ne pas rendre ce contenu mais pour continuer à exécuter ce code et éventuellement à rendre
le contenu là-bas
lorsque la récupération de nos polices est terminée et vous pourrait effectuer n'importe quelle opération asynchrone ici, mais généralement, vous utilisez AppLoading
pour charger certains actifs, comme des polices ou quelque
chose comme ça, donc des actifs qui devraient être là au démarrage de l'application dont vous avez
besoin immédiatement et généralement des polices.
À présent, vous pouvez également ajouter un gestionnaire onError ici et ici, je vais simplement consigner l'objet d'erreur que
nous obtenons
également ici dans les cas où le chargement échoue. Bien sûr, vous ne voudrez peut-être pas simplement vous connecter, mais à la place,
faites autre chose, montrez du contenu alternatif dans
votre application, quelque chose comme ça. Ici, je vais simplement l'enregistrer car
cela ne devrait pas échouer, les polices sont disponibles localement ici, ce qui devrait être chargeable sans problème.
Maintenant, si nous enregistrons cela, notre application redémarre bien sûr et nous ne voyons aucune différence ici, notre écran de
chargement ne prend pas vraiment plus de temps qu'avant car ce chargement est super rapide, il ne se
produit tout simplement pas instantanément,
c'est pourquoi nous avions besoin cette approche.
Mais maintenant que nous avons
chargé les polices, comment pouvons-nous les utiliser maintenant?
Disons que nous voulons changer le début d'un nouveau titre de jeu ici pour utiliser notre police. Maintenant, pour cela, nous devons aller à
l'écran de démarrage du jeu, où se trouve ce titre à la fin, ici, démarrer un nouveau jeu, il a le style de titre
et donc dans la feuille de style ici sur le titre, nous pouvons maintenant définir famille de
polices pour changer la famille de polices et définir ceci sur open-sans-bold
par exemple et
bien sûr l'identifiant que vous utilisez ici doit être un identifiant que vous avez chargé ici.
Donc ici, j'ai open-sans-bold et open sans, je
peux utiliser ces deux identifiants dans mon code n'importe où dans l'application lorsque je veux attribuer une police personnalisée et c'est exactement
ce que je fais ici.
Maintenant, vous voyez, qui a une police différente qui est en gras et au fait, si vous utilisez des polices personnalisées et que
vous voulez une police en gras, vous devez la charger avec la famille
de polices, vous ne pouvez pas définir le poids de la police. React Native le prend en charge, mais pour les polices personnalisées, expo pour le
moment ne le
prend pas en charge, vous devez simplement utiliser une famille de polices distincte, ce qui n'est pas vraiment un problème comme vous pouvez le voir.