Maintenant que vous avez appris comment ajouter des polices à une application, vous trouverez ci-joint un fichier zip contenant les polices
que je souhaite ajouter. Pour cela, dans le dossier
des actifs, je vais ajouter un nouveau dossier de polices, puis c'est OpenSans-Bold et régulier. fichier ttf qui se trouve dans le fichier zip que vous
trouvez en pièce jointe que je veux ajouter ici.
Maintenant, l'ajout de fichiers seuls ne fera pas grand-chose comme vous le savez bien sûr, à la
place, nous devons charger ces polices et nous le faisons dans l'application. fichier js qui est notre fichier de démarrage
qui démarre l'application entière. Là-bas, nous devons tout
importer en tant que police depuis expo-font et cela peut ne pas
être encore disponible dans votre projet, donc vous voudrez peut-être exécuter npm install --save expo-font pour
être sûr qu'il
est disponible, pour l'installer package et avec celui installé, vous pouvez importer la police à partir de là,
comme ça et je veux
également importer le composant de chargement d'application depuis expo, c'est le composant qui prolongera l'écran de démarrage lorsque l'application
démarre jusqu'à ce que nos polices soient chargées afin que nous ne voir quelque
chose à l'écran lorsque tous nos actifs, et dans ce cas ce sont
les polices, sont vraiment disponibles et sont vraiment là. Maintenant, avec ces importations ajoutées, nous pouvons ajouter une fonction
ici en dehors
de notre fonction de composant que je nommerai récupérer les polices et
c'est une fonction qui utilisera finalement la police, donc ce que j'importe ici, charger async et ensuite nous passez un objet
où nous décrivons les données que nous voulons charger et c'est la police open sans que j'enregistrerai sous open
sans, nous ajoutons ceci en exigeant cela de. / assets / fonts / OpenSans, pas en gras mais régulier. ttf et puis en plus, nous avons
open-sans-bold, c'est l'autre police que je veux enregistrer, en l'exigeant depuis assets / fonts
/ OpenSans-Bold. ttf, comme ça.
Maintenant, nous devons le renvoyer car load async renvoie une promesse et je veux le retourner dans ma fonction de récupération
de polices car avec cela, nous pouvons l'utiliser avec le composant de chargement d'application et c'est un modèle que vous avez
appris plus tôt dans le cours.
Donc, si c'est nouveau
pour vous, assurez-vous d'abord de parcourir les autres sections de ce cours.
Alors maintenant, nous pouvons utiliser les polices de récupération avec le chargement de l'application et nous le faisons à l'intérieur
de notre composant d'application, là-bas, je vais gérer un état et je le fais à l'aide du crochet useState que nous
importons de React et je vais nommer cela indiquer la police chargée et définir la police chargée et appeler useState et initialement, c'est faux parce qu'au départ, la
police n'a pas été chargée, puis
ici, nous pouvons vérifier si la police n'a pas été chargée, ce qui est initialement le cas,
alors je veux revenir le composant de chargement d'application au lieu de mon contenu d'application normal, car dans le composant de chargement
d'application, nous pouvons ajouter la propriété start async et pointer sur les polices de récupération, ce qui déclenche cette fonction de
récupération de police et une fois cela fait, la fonction que nous transmettons à onFinish sera appelé et dans cette
fonction, je vais simplement définir la police chargée sur true, comme ceci. Donc, cela garantit que nous gardons simplement l'écran de démarrage ouvert
jusqu'à ce que nos polices soient chargées et cela sera rendu jusqu'à ce que nous rechargions nos polices
et par la suite, nous chargerons plutôt ce contenu. Maintenant, avec cela, nous nous assurons que nous importons nos polices et que nous pouvons commencer
à les utiliser et nous en aurons besoin tout au long de ce module.
Avec cela, il est maintenant temps de commencer à ajouter réellement ce pour quoi nous sommes tous venus, la navigation.