1 00:00:02,190 --> 00:00:06,450 Maintenant, nous avons déjà ajouté des polices plusieurs fois dans ce cours, donc ce n'est 2 00:00:06,450 --> 00:00:12,780 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 3 00:00:12,780 --> 00:00:15,470 avons utilisées tout au long du cours, ouvertes sans gras 4 00:00:15,480 --> 00:00:17,550 et régulières et maintenant nous devons les charger 5 00:00:17,550 --> 00:00:22,690 lorsque l'application démarre dans l'application. fichier js. Là, vous pouvez 6 00:00:23,100 --> 00:00:34,690 maintenant importer quelque chose depuis expo et que quelque chose est le composant de chargement d'application et vous devez également importer star en 7 00:00:34,690 --> 00:00:42,310 tant que police depuis expo-font et pour vous assurer que cela est disponible, exécutez npm 8 00:00:42,340 --> 00:00:49,870 install --save expo-font pour installer ceci dans votre projet et assurez-vous que vous pouvez l'utiliser. 9 00:00:49,890 --> 00:00:53,760 Maintenant, ce sont les deux choses que vous devez installer là-bas et 10 00:00:53,770 --> 00:00:58,620 avec cela installé, nous pouvons ajouter une nouvelle fonction ici, peut-être la nommer chercher les polices. 11 00:00:58,640 --> 00:01:07,690 C'est une fonction qui au final ne prend aucun argument mais là-dedans, je peux maintenant appeler font load async et retourner 12 00:01:08,200 --> 00:01:13,510 cela parce que cela retourne une promesse et récupérer les polices 13 00:01:13,510 --> 00:01:18,910 devrait retourner une promesse et là passer un objet Javascript où nous 14 00:01:18,940 --> 00:01:25,560 mappons les polices que nous Je veux charger, puis j'aurai open-sans que je mapperai à 15 00:01:25,560 --> 00:01:38,020 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 16 00:01:38,080 --> 00:01:45,560 carte que d'exiger / assets / fonts / open-sans-bold pour que les deux polices soient importées ici. 17 00:01:45,580 --> 00:01:51,230 Maintenant, la récupération des polices doit bien sûr être appelée et cela devrait être appelé par notre composant 18 00:01:51,370 --> 00:01:56,800 de chargement d'application, donc nous devons également importer l'état d'utilisation de React, afin que nous puissions contrôler 19 00:01:56,800 --> 00:01:57,990 si les données 20 00:01:58,240 --> 00:02:06,430 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 21 00:02:06,430 --> 00:02:09,080 chargée et initialement avec l'état d'utilisation, c'est faux. 22 00:02:09,250 --> 00:02:13,190 Si cela doit être vrai, je veux rendre cette sortie, donc tant 23 00:02:13,270 --> 00:02:18,970 qu'elle est fausse, d'où le point d'exclamation ici, je veux plutôt retourner le composant de chargement de l'application qui 24 00:02:18,970 --> 00:02:25,210 prolonge notre chargement, notre écran de démarrage et là, nous devons fournir ces prop start async qui pointe vers la fonction 25 00:02:25,930 --> 00:02:30,850 fetch fonts qui est la fonction qui est exécutée lorsque ce composant est rendu pour la 26 00:02:30,850 --> 00:02:37,350 première fois, puis à la fin qui exécute une fonction une fois ce chargement terminé et dans cette fonction qui doit être 27 00:02:37,350 --> 00:02:38,830 exécutée, je ' ll 28 00:02:38,830 --> 00:02:45,890 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. 29 00:02:46,000 --> 00:02:51,490 Maintenant, nos polices sont chargées et maintenant nous pouvons les utiliser et je veux les utiliser à deux endroits - mon article 30 00:02:51,520 --> 00:02:58,030 de produit qui est le composant que nous rendons sur l'aperçu des produits. Là, bien sûr, nous avons 31 00:02:58,030 --> 00:03:06,340 du texte, nous avons notre titre et nous avons notre prix ici et c'est là où 32 00:03:06,340 --> 00:03:12,760 sur le titre, je veux également définir une famille de polices open-sans-bold et 33 00:03:12,760 --> 00:03:20,020 sur le prix, je veux aussi définir une famille de polices open-sans et sur 34 00:03:20,020 --> 00:03:29,080 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 35 00:03:29,080 --> 00:03:33,310 style gras et la description obtiendra simplement la police open sans. 36 00:03:33,490 --> 00:03:40,880 Maintenant, ce n'est pas tout en fait, dans le navigateur de la boutique dans mon navigateur principal ici, dans 37 00:03:40,880 --> 00:03:41,880 les options 38 00:03:41,900 --> 00:03:51,520 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 39 00:03:51,520 --> 00:04:01,360 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 40 00:04:01,510 --> 00:04:09,600 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 41 00:04:09,600 --> 00:04:17,120 une famille de polices open-sans, pas le gras version. Avec cela, si nous enregistrons maintenant ceci et ces rechargements, nous pouvons 42 00:04:17,860 --> 00:04:23,060 voir que notre propre police est utilisée. Maintenant, nous voyons également qu'ici sur iOS, notre titre est donc coupé, c'est 43 00:04:23,110 --> 00:04:29,330 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é 44 00:04:29,350 --> 00:04:37,010 est fixe et pour cela dans l'article de produit ici, qui est l'endroit où nous avons ce titre, 45 00:04:37,010 --> 00:04:47,340 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 46 00:04:47,340 --> 00:04:53,800 hauteur que nous donnons au titre et le prix suffisent à partager cela et donc 47 00:04:53,880 --> 00:04:57,390 maintenant cela ressemble à ce qu'il devrait ressembler. 48 00:04:57,660 --> 00:05:01,540 Maintenant, nous utilisons la police personnalisée, nous pouvons aller à la page de détails, je 49 00:05:01,710 --> 00:05:06,750 dirais qu'il est maintenant vraiment temps de s'assurer également que nous pouvons ajouter des articles au panier et nous faisons 50 00:05:06,750 --> 00:05:08,340 donc fonctionner le bouton du panier.