1
00:00:02,220 --> 00:00:08,250
Alors maintenant, avec ces premières étapes de base, si je remplis maintenant un nombre ici et que nous continuons,

2
00:00:08,250 --> 00:00:10,330
tout cela me semble bien ici,

3
00:00:10,420 --> 00:00:12,980
tout cela fonctionne, si nous commençons maintenant un

4
00:00:12,990 --> 00:00:19,560
jeu, alors je veux également réduire cet espacement que nous avons ici et je veux aussi m'assurer que ma boîte est

5
00:00:19,560 --> 00:00:20,020
là-bas,

6
00:00:20,040 --> 00:00:23,240
donc ce journal des suppositions que nous avons, que cela

7
00:00:23,250 --> 00:00:24,490
semble aussi mieux.

8
00:00:25,050 --> 00:00:29,820
Maintenant, c'est quelque chose que nous pouvons faire sur l'écran de jeu, bien sûr, car c'est

9
00:00:29,820 --> 00:00:31,350
l'écran que nous regardons actuellement.

10
00:00:31,410 --> 00:00:37,410
Maintenant, bien sûr, c'est l'espacement, cette marge en haut de notre conteneur inférieur qui est ce conteneur, la marge en haut est cette distance entre

11
00:00:37,590 --> 00:00:43,370
le nombre ici et le conteneur et je veux changer cela. Maintenant, pour changer cela, nous

12
00:00:43,510 --> 00:00:44,720
pouvons à

13
00:00:44,760 --> 00:00:47,120
nouveau utiliser l'API dimensions.

14
00:00:47,280 --> 00:00:54,300
Donc ici, j'importe à nouveau les dimensions de React Native et maintenant

15
00:00:54,510 --> 00:01:03,630
là-bas, nous pouvons calculer cette marge dynamiquement. Ce que nous pouvons faire ici, c'est que nous pouvons à nouveau obtenir les

16
00:01:03,870 --> 00:01:09,630
dimensions de notre fenêtre, puis ici, la largeur ou dans ce cas, probablement la hauteur, puis diviser cela par

17
00:01:09,630 --> 00:01:17,430
quelque chose mais ce serait très lourd, nous pourrions diviser cela par 20 par exemple , par 20 et voir si cela semble bon, mais

18
00:01:17,430 --> 00:01:21,990
c'est vraiment un jeu de devinettes alors, peut-être pas ce que nous voulons vraiment.

19
00:01:22,230 --> 00:01:28,320
Au lieu de cela, nous pourrions vérifier la hauteur dont nous disposons, puis utiliser

20
00:01:28,320 --> 00:01:34,920
un espacement différent en fonction de cela. Nous pourrions vérifier si notre hauteur est, disons, supérieure à 600, si tel est le cas,

21
00:01:35,310 --> 00:01:41,490
nous voulons avoir un espacement de 20, sinon nous en avons un de 10. Nous pouvons donc également utiliser les dimensions que nous

22
00:01:41,490 --> 00:01:46,920
calculons dans une condition if, dans ce cas dans une expression ternaire ici, mais vous pouvez

23
00:01:46,920 --> 00:01:49,890
également l'utiliser dans une vérification if normale.

24
00:01:49,970 --> 00:01:56,300
Alors maintenant, nous pouvons revenir ici et ce que nous voyons maintenant, c'est que lorsque nous commençons le jeu, nous n'avons pas cet

25
00:01:56,300 --> 00:02:01,580
énorme écart ici sur le petit écran, sur l'iPhone qui est un plus grand écran cependant, nous avons définitivement un

26
00:02:01,670 --> 00:02:05,960
un plus grand écart et pour voir plus clair, vous pouvez bien sûr jouer avec

27
00:02:06,050 --> 00:02:12,690
cela et par exemple utiliser 30 pour des écrans plus petits et 30 pour des écrans plus grands et 5 pour des écrans plus

28
00:02:12,800 --> 00:02:15,170
petits et maintenant vous devriez certainement le voir.

29
00:02:15,350 --> 00:02:17,680
Ici, nous avons un petit écart

30
00:02:17,840 --> 00:02:20,450
et ici, nous avons un plus grand écart.

31
00:02:20,750 --> 00:02:23,540
Nous pouvons donc également l'utiliser dans des conditions if.

32
00:02:23,540 --> 00:02:29,060
Maintenant, avec cela, je vais remettre cela à 20 et 5 ici, mais cela maintenant, espérons-le, montre également une autre

33
00:02:29,060 --> 00:02:30,110
façon d'utiliser cela.

34
00:02:30,110 --> 00:02:34,700
Vous pouvez l'utiliser dans des conditions qui, bien sûr, vous offrent beaucoup de flexibilité dans les cas

35
00:02:34,700 --> 00:02:40,670
où vous ne voulez pas utiliser la largeur dans un calcul dynamique, mais vous avez différentes valeurs codées en dur que vous souhaitez

36
00:02:40,670 --> 00:02:46,730
utiliser en fonction des différents points d'arrêt que vous souhaitez définir, un peu comme vous le savez à partir de CSS où vous

37
00:02:46,730 --> 00:02:51,080
avez également des requêtes multimédias et ensuite vous pouvez rendre différentes choses en fonction de différentes

38
00:02:51,080 --> 00:02:51,830
requêtes multimédias.

39
00:02:52,070 --> 00:02:57,740
Vous n'êtes pas non plus limité à utiliser l'API de dimensions là-bas dans votre feuille de style, bien sûr, vous pouvez l'utiliser

40
00:02:57,740 --> 00:03:04,100
partout où vous pouvez utiliser Javascript, donc partout dans vos composants. Vous pouvez également attacher des styles totalement différents en fonction

41
00:03:04,130 --> 00:03:10,070
de la largeur ou de la hauteur disponible. Nous pourrions également utiliser la fenêtre

42
00:03:10,100 --> 00:03:18,050
d'obtention des dimensions ici où j'attribue mon style et, par exemple, vérifier ma hauteur ici, vérifier si elle est supérieure à

43
00:03:18,050 --> 00:03:25,400
600 et si c'est le cas, utiliser le conteneur de boutons de styles et sinon, utiliser le conteneur de

44
00:03:25,520 --> 00:03:31,520
boutons de styles petit si nous l'avions classe. Je ne l'ai pas ici, donc je vais m'en débarrasser, mais c'est une

45
00:03:31,670 --> 00:03:37,280
autre façon d'utiliser cela, vous pouvez l'utiliser partout où Javascript fonctionne. Vous pouvez bien sûr également l'utiliser ici, vous

46
00:03:37,280 --> 00:03:45,690
pouvez avoir un if ici avant de renvoyer votre code jsx et vérifier obtenir la hauteur de la fenêtre, si c'est supérieur à 600 et si

47
00:03:45,690 --> 00:03:49,830
c'est le cas, disons, vous retournez un code jsx totalement différent et donc

48
00:03:49,830 --> 00:03:55,910
ce code par la suite ne fonctionnera jamais si vous revenez ici et seulement si vous n'y entrez pas

49
00:03:55,910 --> 00:03:57,230
si check, donc

50
00:03:57,230 --> 00:04:02,560
si vous avez un appareil qui n'est pas aussi grand que celui-ci, alors vous le faites là-bas.

51
00:04:02,600 --> 00:04:09,260
Vous êtes donc vraiment flexible ici et utilisez cette flexibilité pour créer les mises en page que vous voulez, car c'est de

52
00:04:09,410 --> 00:04:14,020
cela qu'il s'agit et ce qui vous donne beaucoup de flexibilité pour vos applications.

53
00:04:14,120 --> 00:04:15,440
Voilà donc l'espacement ici,

54
00:04:15,440 --> 00:04:19,210
maintenant je voulais aussi changer mes éléments de journal là-bas, c'est aussi quelque

55
00:04:19,340 --> 00:04:21,560
chose que nous pouvons facilement faire bien sûr.

56
00:04:21,740 --> 00:04:28,400
Nous avons nos éléments de liste là-bas et sur les éléments de liste, nous définissons une largeur de 100% parce que nous définissons notre largeur

57
00:04:28,400 --> 00:04:32,330
de liste ici avec le conteneur de liste et qui est défini sur 60%.

58
00:04:32,600 --> 00:04:36,750
Maintenant, 60% semble assez bien sur des appareils plus gros, je pense, mais sur

59
00:04:36,910 --> 00:04:40,280
des appareils plus petits, nous pourrions aller plus gros que cela.

60
00:04:40,280 --> 00:04:48,050
Maintenant, nous pouvons bien sûr essayer à nouveau de résoudre ce problème avec des règles différentes ici où nous définissons une largeur maximale et

61
00:04:48,050 --> 00:04:55,370
une largeur minimale et peut-être aussi utiliser l'API dimensions pour le calculer dynamiquement ou nous utilisons à nouveau une vérification if.

62
00:04:55,910 --> 00:05:03,500
Ici, nous pourrions encore dire que les dimensions obtiennent une fenêtre, obtiennent la largeur disponible dans ce cas

63
00:05:03,500 --> 00:05:07,340
et si c'est disons supérieur à 500, alors

64
00:05:07,340 --> 00:05:15,220
je veux utiliser 60%, sinon je veux utiliser 80%. Alors maintenant, nous rendons simplement un conteneur de liste plus large, plus large

65
00:05:15,220 --> 00:05:18,070
en fonction de la largeur disponible sur le périphérique

66
00:05:18,250 --> 00:05:19,340
sur lequel nous

67
00:05:19,420 --> 00:05:24,490
fonctionnons et utilisons en fait 350 ici peut-être au lieu de 500 parce que nous parlons de

68
00:05:24,490 --> 00:05:26,350
la largeur, pas de la hauteur.

69
00:05:26,380 --> 00:05:31,630
Alors maintenant, ici, si nous exécutons cela sur l'iPhone, nous devons avoir la même largeur qu'auparavant, mais sur un écran plus petit,

70
00:05:32,080 --> 00:05:33,820
nous avons des objets plus gros.

71
00:05:33,820 --> 00:05:37,650
C'est aussi quelque chose que nous pouvons faire et vous pouvez bien sûr jouer avec le point

72
00:05:37,690 --> 00:05:39,140
d'arrêt que vous définissez effectivement ici.

73
00:05:39,160 --> 00:05:41,290
vous pouvez essayer différentes tailles de point d'arrêt ici.

74
00:05:41,320 --> 00:05:43,420
Bien sûr, vous pouvez également avoir plusieurs

75
00:05:43,420 --> 00:05:48,940
points d'arrêt, vous pouvez avoir des expressions ternaires imbriquées ici ou avant d'écrire trop d'expressions imbriquées, configurez simplement différents objets de

76
00:05:48,940 --> 00:05:56,500
style ici que vous chargez ensuite avec différents si les contrôles que vous utilisez là-haut. Juste pour vous donner un exemple, nous

77
00:05:56,500 --> 00:06:03,820
pourrions avoir un conteneur de liste grand ici et là, nous avons défini un flex et nous

78
00:06:03,820 --> 00:06:09,320
avons défini notre largeur de disons 80% parce que c'est le grand

79
00:06:09,450 --> 00:06:13,380
et ici nous avons le normal avec 60% .

80
00:06:13,380 --> 00:06:18,400
Maintenant, je n'ai pas de condition if là-bas, mais j'ai deux objets de style

81
00:06:18,400 --> 00:06:22,320
différents et maintenant nous devons simplement attacher des objets de

82
00:06:22,680 --> 00:06:31,780
style différents là-haut, pas ici mais ici bien sûr, sur cette vue. Eh bien, pour ce faire, nous pouvons simplement configurer une variable de style de conteneur de

83
00:06:31,780 --> 00:06:38,740
liste ici par exemple et pointer sur le conteneur de liste de styles qui est notre valeur par défaut, puis ajouter un if si ici

84
00:06:38,830 --> 00:06:46,750
où nous vérifions si les dimensions obtiennent la largeur de la fenêtre et maintenant si la largeur ici est disons inférieur à 350, donc si nous avons un petit

85
00:06:46,750 --> 00:06:51,910
appareil, alors nous voulons avoir le conteneur de grande liste, donc nous pouvons définir le style de conteneur de

86
00:06:51,910 --> 00:06:53,470
liste, cette variable égale à

87
00:06:53,470 --> 00:06:55,960
styles conteneur de liste grand pour pointer vers

88
00:06:55,960 --> 00:07:01,960
cet objet de style et maintenant nous pouvons utiliser cet objet de style ici sur la vue où nous avons besoin du

89
00:07:01,960 --> 00:07:07,180
style de conteneur de liste, nous utilisons maintenant la variable qui contient un objet de style de conteneur de

90
00:07:07,330 --> 00:07:13,060
liste différent en fonction de la largeur de notre appareil. Et si nous enregistrons maintenant cela et que nous l'exécutons à

91
00:07:13,060 --> 00:07:19,270
nouveau, vous voyez que sur l'iPhone avec le plus gros appareil où nous avons plus de largeur, nous avons le plus petit conteneur et ici

92
00:07:19,270 --> 00:07:24,200
sur le téléphone Android avec le plus petit appareil, avec moins de largeur, nous obtenons le plus grand récipient.

93
00:07:24,280 --> 00:07:26,980
C'est donc le même résultat qu'avant mais un

94
00:07:27,070 --> 00:07:32,080
peu plus lisible et maintenant nous pourrions en avoir plusieurs si vérifie ici où nous stockons différents

95
00:07:32,080 --> 00:07:34,900
styles ici dans le style de conteneur de liste

96
00:07:34,900 --> 00:07:42,070
que nous utilisons ensuite là-bas, cela peut être plus lisible que d'avoir des expressions ternaires imbriquées là-bas dans votre objet de feuille de style.

97
00:07:42,070 --> 00:07:47,650
Voilà donc comment vous pouvez jouer avec cela et être conscient de la flexibilité de l'API des dimensions est

98
00:07:47,770 --> 00:07:48,970
vraiment crucial ici.