1
00:00:02,150 --> 00:00:06,950
Maintenant, avec nos polices personnalisées ajoutées, nous sommes maintenant en mesure de les utiliser dans

2
00:00:06,950 --> 00:00:12,740
notre application et je veux les utiliser dans tous les endroits où nous affichons des textes, comme ici

3
00:00:13,130 --> 00:00:17,410
avec vous sélectionné, ici les adversaires devinent, puis aussi sur la page de résumé,

4
00:00:17,410 --> 00:00:24,010
ce sera également un objectif ici dans cette application et en plus de cela, quand un jeu est terminé, non seulement

5
00:00:24,020 --> 00:00:30,770
je veux utiliser notre police personnalisée ici sur cette page de jeu, mais je veux aussi montrer une image, un jeu sur

6
00:00:30,830 --> 00:00:32,460
l'image ici, c'est donc

7
00:00:32,510 --> 00:00:34,830
la prochaine chose que je veux travailler.

8
00:00:34,850 --> 00:00:42,770
La première étape consiste à remplacer ce texte ici par le corps du texte pour utiliser la police, donc j'importe le texte du corps à partir du

9
00:00:42,770 --> 00:00:49,970
dossier des composants et là, à partir du texte du corps, puis je remplace tous ces composants de texte ici par le corps du

10
00:00:49,970 --> 00:00:54,200
texte, simplement pour que lorsqu'un jeu est terminé, nous utilisons notre police personnalisée, c'est

11
00:00:54,200 --> 00:00:55,450
le but ici.

12
00:00:55,730 --> 00:00:57,950
Mais c'est comme je viens de dire

13
00:00:57,950 --> 00:01:03,200
une seule chose, la principale chose qui devrait arriver ici est que nous avons également une image ici.

14
00:01:03,260 --> 00:01:11,360
Alors disons que nous avons notre jeu est sur le titre en fait, alors utilisons le texte du titre ici peut-être maintenant que j'y pense, le

15
00:01:11,360 --> 00:01:12,350
texte du

16
00:01:12,530 --> 00:01:16,460
titre au lieu du corps du texte mais qu'en dessous de ce titre,

17
00:01:16,460 --> 00:01:19,830
donc en dessous du jeu est terminé, nous montrons un image.

18
00:01:19,880 --> 00:01:27,740
Donc ici, je veux utiliser un composant qui nous permet en fait d'afficher une image et React Native

19
00:01:27,800 --> 00:01:36,470
a un tel composant, il a un composant image. Nous pouvons utiliser l'image ici comme un composant normal dans notre code

20
00:01:36,470 --> 00:01:43,490
jsx comme ça, c'est un composant à fermeture automatique, une image a un accessoire important et c'est l'accessoire source et

21
00:01:43,490 --> 00:01:51,170
l'accessoire source comme son nom l'indique doit être réglé pour pointer sur une image et maintenant il y a deux types d'images que

22
00:01:51,170 --> 00:01:58,430
vous pouvez utiliser - des images locales que vous expédiez dans le cadre de votre application, de sorte que vous incluez dans

23
00:01:58,430 --> 00:02:05,600
votre code source, dans votre ensemble d'applications à la fin ou des images réseau et nous aurons un regardez les deux.

24
00:02:05,610 --> 00:02:14,280
Commençons maintenant par une image locale et pour cela, vous trouverez ci-joint ces succès. fichier png que vous pouvez faire glisser dans votre dossier d'actifs, donc

25
00:02:14,280 --> 00:02:17,000
pas dans le dossier des polices mais

26
00:02:17,370 --> 00:02:23,430
juste dans les actifs ou vous créez un sous-dossier d'images si vous le souhaitez, cela n'a pas

27
00:02:23,430 --> 00:02:24,240
vraiment

28
00:02:24,270 --> 00:02:25,150
d'importance, je l'aurai

29
00:02:25,170 --> 00:02:31,550
juste ici dans les actifs , c'est ce succès. fichier png et c'est le fichier que je

30
00:02:31,560 --> 00:02:39,480
veux utiliser ici, donc l'image que je veux rendre ici. Maintenant pour cela, pour rendre cette image ici, nous utilisons une syntaxe spéciale qui

31
00:02:39,660 --> 00:02:46,040
pourrait sembler étrange la première fois que vous la voyez. Vous avez utilisé cette fonction require qui est intégrée à Javascript

32
00:02:46,050 --> 00:02:52,440
ou qui est prise en charge par React Native en Javascript, disons, où vous passez une chaîne comme argument et ceci

33
00:02:53,010 --> 00:02:57,840
est la chaîne pointant vers l'image et cela devrait être un chemin relatif, donc ici depuis

34
00:02:57,840 --> 00:02:59,240
nous sommes dans

35
00:02:59,250 --> 00:03:04,530
le dossier screens, nous devons remonter d'un niveau, puis dans le dossier assets et puis ici, nous

36
00:03:04,530 --> 00:03:07,450
pouvons pointer vers le succès. png,

37
00:03:07,470 --> 00:03:09,090
juste comme ça.

38
00:03:09,150 --> 00:03:14,490
Maintenant, cela indique à React Native que nous voulons utiliser cette image ici et dans les

39
00:03:14,490 --> 00:03:20,190
coulisses, cela permet à React Native de la charger efficacement et également de regarder l'image et par exemple

40
00:03:20,430 --> 00:03:21,340
de déterminer

41
00:03:21,360 --> 00:03:28,830
sa largeur et sa hauteur, c'est pourquoi nous utilisons cette étrange nécessitent une syntaxe et nous devons charger des images locales comme celle-ci.

42
00:03:30,010 --> 00:03:32,280
Maintenant, pour voir

43
00:03:32,410 --> 00:03:39,400
le résultat, je vais modifier l'application. fichier js temporairement pour nous assurer que nous affichons toujours le jeu

44
00:03:39,400 --> 00:03:46,060
sur l'écran, simplement pour que je ne doive pas toujours parcourir tout l'écran juste pour vérifier qu'il a mis à jour, qu'il a changé.

45
00:03:46,660 --> 00:03:53,590
Donc, le jeu sur l'écran est ce que j'utiliserai temporairement comme contenu principal ici dès le début et je passerai simplement des numéros fictifs pour le numéro

46
00:03:53,590 --> 00:03:57,850
de tours et le numéro d'utilisateur, encore une fois je ne fais cela que pour commencer

47
00:03:57,880 --> 00:04:04,390
le jeu sur l'écran ici et voyez ce que cela nous donne. Et nous pouvons voir ce que cela

48
00:04:04,480 --> 00:04:10,730
nous donne, cela nous donne au final une image plein écran, une très grande image.

49
00:04:10,780 --> 00:04:14,140
La raison en est que l'image que je vous ai donnée

50
00:04:14,200 --> 00:04:17,590
est assez grande, ce succès. Le fichier png n'est pas

51
00:04:17,710 --> 00:04:22,040
un petit fichier, c'est une très grosse image concernant les pixels, sa largeur et sa hauteur.

52
00:04:22,210 --> 00:04:29,320
Et comme je l'ai dit lorsque vous utilisez require comme ceci, la bonne chose est que React Native a regardé le fichier image,

53
00:04:29,320 --> 00:04:34,020
a déterminé sa largeur et sa hauteur et utilise la même largeur et hauteur

54
00:04:34,020 --> 00:04:41,050
ici, ce qui signifie que nous rendons cette image énorme ici sur l'application et l'inconvénient est simplement que cela ne tient plus

55
00:04:41,050 --> 00:04:45,450
sur l'écran ou occupe tout l'écran parce que c'est un fichier trop volumineux.

56
00:04:45,550 --> 00:04:50,440
Si nous avions une image plus petite, ce ne serait pas un problème, alors elle occuperait juste une

57
00:04:50,440 --> 00:04:54,160
partie de l'écran mais comme c'est une grande image, elle occupe tout l'écran.