1
00:00:02,190 --> 00:00:07,460
Maintenant que vous avez appris comment ajouter des polices à une application, vous trouverez ci-joint un fichier zip contenant les polices

2
00:00:07,470 --> 00:00:10,000
que je souhaite ajouter. Pour cela, dans le dossier

3
00:00:10,020 --> 00:00:16,290
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

4
00:00:16,290 --> 00:00:19,350
trouvez en pièce jointe que je veux ajouter ici.

5
00:00:19,470 --> 00:00:22,670
Maintenant, l'ajout de fichiers seuls ne fera pas grand-chose comme vous le savez bien sûr, à la

6
00:00:22,710 --> 00:00:27,690
place, nous devons charger ces polices et nous le faisons dans l'application. fichier js qui est notre fichier de démarrage

7
00:00:27,690 --> 00:00:31,070
qui démarre l'application entière. Là-bas, nous devons tout

8
00:00:31,170 --> 00:00:36,660
importer en tant que police depuis expo-font et cela peut ne pas

9
00:00:36,660 --> 00:00:43,320
être encore disponible dans votre projet, donc vous voudrez peut-être exécuter npm install --save expo-font pour

10
00:00:43,320 --> 00:00:45,010
être sûr qu'il

11
00:00:45,030 --> 00:00:52,530
est disponible, pour l'installer package et avec celui installé, vous pouvez importer la police à partir de là,

12
00:00:52,620 --> 00:00:54,750
comme ça et je veux

13
00:00:54,750 --> 00:01:02,910
également importer le composant de chargement d'application depuis expo, c'est le composant qui prolongera l'écran de démarrage lorsque l'application

14
00:01:02,910 --> 00:01:09,000
démarre jusqu'à ce que nos polices soient chargées afin que nous ne voir quelque

15
00:01:09,000 --> 00:01:14,670
chose à l'écran lorsque tous nos actifs, et dans ce cas ce sont

16
00:01:14,700 --> 00:01:22,950
les polices, sont vraiment disponibles et sont vraiment là. Maintenant, avec ces importations ajoutées, nous pouvons ajouter une fonction

17
00:01:23,250 --> 00:01:25,130
ici en dehors

18
00:01:25,310 --> 00:01:30,180
de notre fonction de composant que je nommerai récupérer les polices et

19
00:01:30,600 --> 00:01:39,190
c'est une fonction qui utilisera finalement la police, donc ce que j'importe ici, charger async et ensuite nous passez un objet

20
00:01:39,190 --> 00:01:47,110
où nous décrivons les données que nous voulons charger et c'est la police open sans que j'enregistrerai sous open

21
00:01:47,110 --> 00:01:57,890
sans, nous ajoutons ceci en exigeant cela de. / assets / fonts / OpenSans, pas en gras mais régulier. ttf et puis en plus, nous avons

22
00:01:57,890 --> 00:02:05,470
open-sans-bold, c'est l'autre police que je veux enregistrer, en l'exigeant depuis assets / fonts

23
00:02:05,470 --> 00:02:08,210
/ OpenSans-Bold. ttf, comme ça.

24
00:02:08,440 --> 00:02:14,320
Maintenant, nous devons le renvoyer car load async renvoie une promesse et je veux le retourner dans ma fonction de récupération

25
00:02:14,320 --> 00:02:20,410
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

26
00:02:20,410 --> 00:02:22,430
appris plus tôt dans le cours.

27
00:02:22,450 --> 00:02:23,970
Donc, si c'est nouveau

28
00:02:24,010 --> 00:02:28,040
pour vous, assurez-vous d'abord de parcourir les autres sections de ce cours.

29
00:02:28,060 --> 00:02:34,840
Alors maintenant, nous pouvons utiliser les polices de récupération avec le chargement de l'application et nous le faisons à l'intérieur

30
00:02:34,840 --> 00:02:41,680
de notre composant d'application, là-bas, je vais gérer un état et je le fais à l'aide du crochet useState que nous

31
00:02:42,610 --> 00:02:51,760
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

32
00:02:51,790 --> 00:02:54,260
police n'a pas été chargée, puis

33
00:02:54,400 --> 00:03:00,100
ici, nous pouvons vérifier si la police n'a pas été chargée, ce qui est initialement le cas,

34
00:03:00,100 --> 00:03:07,270
alors je veux revenir le composant de chargement d'application au lieu de mon contenu d'application normal, car dans le composant de chargement

35
00:03:07,600 --> 00:03:14,600
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

36
00:03:14,860 --> 00:03:21,430
récupération de police et une fois cela fait, la fonction que nous transmettons à onFinish sera appelé et dans cette

37
00:03:21,430 --> 00:03:29,240
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

38
00:03:29,240 --> 00:03:35,600
jusqu'à ce que nos polices soient chargées et cela sera rendu jusqu'à ce que nous rechargions nos polices

39
00:03:35,840 --> 00:03:42,590
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

40
00:03:42,590 --> 00:03:45,870
à les utiliser et nous en aurons besoin tout au long de ce module.

41
00:03:45,980 --> 00:03:52,280
Avec cela, il est maintenant temps de commencer à ajouter réellement ce pour quoi nous sommes tous venus, la navigation.