Maintenant, nous avons déjà ajouté des polices plusieurs fois dans ce cours, donc ce n'est
pas trop nouveau comment cela fonctionne. Dans le dossier des ressources, je vais ajouter un dossier de polices, mais encore une fois, vous pouvez les stocker où vous le souhaitez. Vous trouverez ci-joint les deux polices que nous
avons utilisées tout au long du cours, ouvertes sans gras
et régulières et maintenant nous devons les charger
lorsque l'application démarre dans l'application. fichier js. Là, vous pouvez
maintenant importer quelque chose depuis expo et que quelque chose est le composant de chargement d'application et vous devez également importer star en
tant que police depuis expo-font et pour vous assurer que cela est disponible, exécutez npm
install --save expo-font pour installer ceci dans votre projet et assurez-vous que vous pouvez l'utiliser.
Maintenant, ce sont les deux choses que vous devez installer là-bas et
avec cela installé, nous pouvons ajouter une nouvelle fonction ici, peut-être la nommer chercher les polices.
C'est une fonction qui au final ne prend aucun argument mais là-dedans, je peux maintenant appeler font load async et retourner
cela parce que cela retourne une promesse et récupérer les polices
devrait retourner une promesse et là passer un objet Javascript où nous
mappons les polices que nous Je veux charger, puis j'aurai open-sans que je mapperai à
mon exigence d'importation ici où je pointe vers le dossier des actifs, le dossier des polices et cet open-sans régulier et également ajouter open-sans-bold ici comme clé et
carte que d'exiger / assets / fonts / open-sans-bold pour que les deux polices soient importées ici.
Maintenant, la récupération des polices doit bien sûr être appelée et cela devrait être appelé par notre composant
de chargement d'application, donc nous devons également importer l'état d'utilisation de React, afin que nous puissions contrôler
si les données
ont encore été chargées ou non de sorte que dans le composant fonctionnel ici, nous pouvons avoir notre état de police chargé et définir la police
chargée et initialement avec l'état d'utilisation, c'est faux.
Si cela doit être vrai, je veux rendre cette sortie, donc tant
qu'elle est fausse, d'où le point d'exclamation ici, je veux plutôt retourner le composant de chargement de l'application qui
prolonge notre chargement, notre écran de démarrage et là, nous devons fournir ces prop start async qui pointe vers la fonction
fetch fonts qui est la fonction qui est exécutée lorsque ce composant est rendu pour la
première fois, puis à la fin qui exécute une fonction une fois ce chargement terminé et dans cette fonction qui doit être
exécutée, je ' ll
mettra ma police chargée sur true pour que nous ne rendions plus le chargement de l'application mais à la place, nous rendions ce contenu.
Maintenant, nos polices sont chargées et maintenant nous pouvons les utiliser et je veux les utiliser à deux endroits - mon article
de produit qui est le composant que nous rendons sur l'aperçu des produits. Là, bien sûr, nous avons
du texte, nous avons notre titre et nous avons notre prix ici et c'est là où
sur le titre, je veux également définir une famille de polices open-sans-bold et
sur le prix, je veux aussi définir une famille de polices open-sans et sur
l'écran de détail du produit, c'est la même chose. Le prix devrait peut-être obtenir une famille de polices open-sans-bold pour avoir ce
style gras et la description obtiendra simplement la police open sans.
Maintenant, ce n'est pas tout en fait, dans le navigateur de la boutique dans mon navigateur principal ici, dans
les options
de navigation par défaut, je veux également utiliser cette police dans l'en-tête, donc le style de titre de l'en-tête ici devrait en fait être un
objet dans lequel j'ai défini la famille de polices to open-sans-bold pour utiliser la police bold open sans là-bas et le style de titre arrière
de l'en-tête définit comment le texte arrière que nous voyons sur iOS est stylé ainsi et qui devrait également utiliser
une famille de polices open-sans, pas le gras version. Avec cela, si nous enregistrons maintenant ceci et ces rechargements, nous pouvons
voir que notre propre police est utilisée. Maintenant, nous voyons également qu'ici sur iOS, notre titre est donc coupé, c'est
quelque chose que nous devrons corriger mais en général, cela ressemble maintenant à ce qu'il devrait ressembler. Maintenant, assurons-nous que le titre coupé
est fixe et pour cela dans l'article de produit ici, qui est l'endroit où nous avons ce titre,
ici ce titre devrait peut-être avoir une marge verticale réduite de seulement 2 parce que j'aime toujours cette distance et maintenant le 15% de
hauteur que nous donnons au titre et le prix suffisent à partager cela et donc
maintenant cela ressemble à ce qu'il devrait ressembler.
Maintenant, nous utilisons la police personnalisée, nous pouvons aller à la page de détails, je
dirais qu'il est maintenant vraiment temps de s'assurer également que nous pouvons ajouter des articles au panier et nous faisons
donc fonctionner le bouton du panier.