1
00:00:02,830 --> 00:00:08,740
Maintenant, nous avons eu un autre problème dans cette application, car une fois que tout est résolu

2
00:00:08,740 --> 00:00:12,200
ici, si nous y allons rapidement, assurez-vous de résoudre

3
00:00:12,220 --> 00:00:16,120
ce problème, nous avons cet écran et cet écran est également cassé.

4
00:00:16,120 --> 00:00:17,670
En fait, nous avons

5
00:00:17,680 --> 00:00:23,190
eu deux problèmes, l'un est que l'écran n'est pas défilable, ce qui n'était pas un problème sur

6
00:00:23,200 --> 00:00:29,050
les gros appareils où nous avons plus de hauteur, mais ici, nous ne pouvons pas presser tout le

7
00:00:29,050 --> 00:00:36,640
contenu sur l'écran, donc nous pourrions vouloir faites-le défiler juste pour être sûr et / ou alternativement, nous nous assurons que nous sommes garantis

8
00:00:36,640 --> 00:00:43,270
de tout faire sur l'écran et d'être sûr que c'est le cas, nous devons aller au jeu sur l'écran et calculer

9
00:00:43,270 --> 00:00:50,230
nos hauteurs ici dynamiquement, en particulier la hauteur de l'image ici que nous codons actuellement en dur à 300 pixels, ce qui

10
00:00:50,230 --> 00:00:52,810
est beaucoup trop grand sur le petit appareil.

11
00:00:52,810 --> 00:00:55,950
Maintenant, vous avez déjà appris la solution pour cela,

12
00:00:56,050 --> 00:01:02,880
nous pouvons à nouveau utiliser l'API de dimensions en l'important depuis React Native et avec les dimensions importées, nous pouvons

13
00:01:02,890 --> 00:01:11,430
descendre dans notre feuille de style et sur le conteneur d'image, nous pouvons maintenant dire que les dimensions obtiennent la largeur de la fenêtre et

14
00:01:12,150 --> 00:01:21,590
disons maintenant que pour le conteneur d'image, pour l'image ici, nous voulons avoir une largeur de peut-être 70% de la largeur disponible et nous voulons avoir la

15
00:01:21,590 --> 00:01:24,860
même valeur qu'une hauteur, donc je vais juste la

16
00:01:24,860 --> 00:01:25,920
copier là.

17
00:01:25,920 --> 00:01:32,180
Important ici, nous n'utilisons pas la hauteur car l'image ne doit pas être à 70% de notre hauteur disponible, au lieu

18
00:01:32,480 --> 00:01:32,960
de

19
00:01:33,200 --> 00:01:38,390
cela, elle doit simplement avoir la même hauteur qu'elle a la largeur et qui est calculée sur la

20
00:01:38,420 --> 00:01:45,260
largeur de l'appareil, donc nous utilisons la largeur là-bas ainsi que. Maintenant, ici, le rayon de la bordure devrait être la moitié de

21
00:01:45,380 --> 00:01:50,840
cela, nous pouvons donc l'utiliser ici aussi, puis le diviser par deux et nous aurons le rayon de bordure parfait

22
00:01:50,900 --> 00:01:54,170
pour cette largeur calculée dynamiquement. C'est donc une chose importante.

23
00:01:54,200 --> 00:01:59,030
Maintenant, nous avons également quelques autres tailles que nous mettons en place, comme la marge verticale ici que nous codons en

24
00:01:59,030 --> 00:02:07,600
dur à 30, la même chose pour le conteneur de résultat et nous pourrions aussi vouloir changer cela. Donc, ici, nous pouvons également dire que les dimensions obtiennent

25
00:02:07,600 --> 00:02:11,380
la fenêtre, dans ce cas, la hauteur et

26
00:02:11,380 --> 00:02:21,010
peut-être diviser cela par disons 20 et voir si cela semble bon et aussi là-bas la marge verticale, peut-être diviser cela par 40

27
00:02:21,040 --> 00:02:26,720
car il était 15, c'était 30, donc divisons cela par 40, si nous

28
00:02:26,740 --> 00:02:31,960
divisons cela par 20 pour avoir à nouveau la même relation entre

29
00:02:31,960 --> 00:02:34,370
ces deux verticales de marge.

30
00:02:34,510 --> 00:02:35,980
Alors résolvons cela

31
00:02:36,010 --> 00:02:41,150
à nouveau et voyons quel est le résultat, mieux, maintenant au moins nous

32
00:02:41,180 --> 00:02:44,100
pouvons voir le bouton mais toujours pas parfait.

33
00:02:44,240 --> 00:02:50,150
Cette marge ici est certainement encore trop grande et aussi la taille de la police, nous pourrions également la réduire.

34
00:02:50,330 --> 00:02:56,570
Donc, une image plus ronde, nous pouvons certainement diviser la hauteur par 30 ici pour cette

35
00:02:56,570 --> 00:03:03,970
marge que nous mettons en place, puis aller à 60 pour cette marge verticale du conteneur de résultat et pour

36
00:03:04,130 --> 00:03:13,860
la taille de la police ici, ici, nous pouvons utiliser un if si nous voulons et par exemple, vérifiez notre hauteur disponible ici et si c'est

37
00:03:13,860 --> 00:03:25,210
disons inférieure à 400, alors nous utilisons 16 ici et sinon, nous utilisons 20. Enfin et surtout pour nous assurer que nous pouvons faire défiler parce

38
00:03:25,210 --> 00:03:31,310
que parfois avec tous les ajustements, nous ne pourrons toujours pas l'adapter à

39
00:03:31,310 --> 00:03:35,400
l'écran, du moins pas sans que tout soit super

40
00:03:35,510 --> 00:03:42,990
petit, nous pourrions vouloir importer ce défilement voir ici et envelopper notre vue avec cela, alors

41
00:03:42,990 --> 00:03:50,730
ajoutez une vue de défilement ici autour de notre vue pour la faire défiler et maintenant jetons

42
00:03:50,850 --> 00:03:52,860
un coup d'œil à

43
00:03:52,880 --> 00:03:53,860
cela,

44
00:04:03,670 --> 00:04:10,700
résolvons cela, maintenant cela a l'air mieux. Il s'adapte à l'écran et si nous en avions besoin, nous pourrions

45
00:04:10,700 --> 00:04:14,090
également le faire défiler, nous pouvons voir que sur l'iPhone au fait,

46
00:04:19,360 --> 00:04:22,390
là si nous résolvons cela, sur l'iPhone, nous pouvons

47
00:04:22,390 --> 00:04:27,010
toujours faire défiler un peu et il rebondit en arrière, nous avons activé le défilement et

48
00:04:27,040 --> 00:04:32,920
donc maintenant cela semble bon sur l'iPhone mais aussi sur cet appareil où nous réduisons un peu la taille de la

49
00:04:33,070 --> 00:04:36,420
police, travaillons un peu sur l'espacement ici et si cela dépassait

50
00:04:36,520 --> 00:04:45,760
nos limites, alors nous pourrions faites-le défiler, afin que nous puissions toujours interagir avec notre jeu. Voilà donc l'API des dimensions ici et l'API des dimensions nous aide vraiment à créer

51
00:04:45,760 --> 00:04:52,250
des interfaces utilisateur qui conviennent à différentes tailles d'appareils et comme vous l'avez appris, il existe différentes façons de l'utiliser -

52
00:04:52,250 --> 00:04:59,230
pour calculer dynamiquement des tailles, que ce soit pour la largeur ou la hauteur ou les marges et également bien sûr dans les

53
00:04:59,440 --> 00:05:05,710
instructions if pour simplement rendre un contenu différent, attacher différents styles ou différents objets de style en fonction des conditions

54
00:05:05,710 --> 00:05:10,750
de largeur ou de hauteur que vous configurez ici, mais ce n'est pas tout, car les

55
00:05:10,750 --> 00:05:16,180
utilisateurs peuvent également changer l'orientation du périphérique pendant que l'application s'exécute et que signifie aussi parfois que

56
00:05:16,180 --> 00:05:20,440
nous devons changer le style et / ou la mise en page.