1 00:00:02,230 --> 00:00:04,920 Parfois, cependant, vous ne pouvez pas obtenir la bonne 2 00:00:04,930 --> 00:00:10,720 mise en page avec un pourcentage de largeur et des pixels codés en dur comme celui-ci, parfois vous devez vraiment 3 00:00:10,720 --> 00:00:12,210 savoir combien de pixels 4 00:00:12,340 --> 00:00:18,130 vous avez disponibles, par exemple ici sur les boutons où nous définissons une largeur de 100, nous définissons 100 quelle 5 00:00:18,130 --> 00:00:19,990 que soit la taille de l'appareil. 6 00:00:19,990 --> 00:00:24,460 Maintenant, en fait, nous savons que nous voulons avoir deux boutons côte à côte. 7 00:00:24,550 --> 00:00:31,960 Donc, ce que nous pouvons faire, c'est que nous pouvons simplement nous assurer que nous prenons une largeur de bouton qui tient toujours sur 8 00:00:31,960 --> 00:00:33,830 l'écran, peu importe sa taille 9 00:00:33,850 --> 00:00:39,460 et pour cela, nous devons savoir combien de pixels nous avons en largeur et c'est quelque chose que 10 00:00:39,460 --> 00:00:44,170 nous pouvons découvrez-le avec l'aide de React Native. À partir de React Native, 11 00:00:44,170 --> 00:00:48,880 vous pouvez importer l'objet dimensions ici, dimensions est le nom. 12 00:00:48,940 --> 00:00:55,720 Maintenant, ce n'est plus un composant que vous utilisez, mais un objet qui vous permet de 13 00:00:55,810 --> 00:00:58,380 connaître la largeur dont vous disposez. 14 00:00:58,420 --> 00:01:04,270 Maintenant, nous pouvons utiliser cela par exemple là-bas où nous définissons la largeur de notre bouton, au lieu de le 15 00:01:04,780 --> 00:01:07,080 définir comme ceci, nous pouvons définir notre 16 00:01:07,210 --> 00:01:12,850 largeur en dimensions et puis il y a une méthode get où vous pouvez obtenir les dimensions de la fenêtre. 17 00:01:12,850 --> 00:01:14,440 Vous pouvez également l'obtenir 18 00:01:14,440 --> 00:01:21,700 de l'écran, la différence entre la fenêtre et l'écran n'a d'importance que sur Android où avec la fenêtre, la hauteur de la barre 19 00:01:21,700 --> 00:01:23,640 d'état sera exclue du calcul et 20 00:01:23,740 --> 00:01:26,110 donc ce sera vraiment, bien la partie 21 00:01:26,260 --> 00:01:28,720 de l'écran où votre contenu sera vivre dans. 22 00:01:28,780 --> 00:01:32,130 Donc, vous devez généralement utiliser la fenêtre ici, car sur iOS, 23 00:01:32,130 --> 00:01:38,800 cela n'a pas d'importance, sur Android, c'est la partie de l'écran dans laquelle votre interface utilisateur se trouve vraiment sans cette barre 24 00:01:38,800 --> 00:01:40,110 d'état en haut. 25 00:01:40,180 --> 00:01:46,390 Donc, généralement, vous voudrez peut-être utiliser la fenêtre ici pour obtenir la vraie pièce dont vous disposez pour votre disposition, 26 00:01:46,390 --> 00:01:52,600 les vraies dimensions que vous pouvez utiliser pour votre disposition. Maintenant, ce que cela vous donne est un objet où 27 00:01:52,750 --> 00:01:56,470 vous pouvez obtenir quelques propriétés, quatre pour être précis - l'échelle de police 28 00:01:56,470 --> 00:02:01,540 configurée par l'utilisateur, donc par exemple si les utilisateurs veulent avoir des polices plus grandes, alors vous 29 00:02:01,540 --> 00:02:03,560 pouvez obtenir le multiplicateur ici avec échelle 30 00:02:03,670 --> 00:02:09,610 de police, mais surtout, vous obtenez la largeur et la hauteur et si nous obtenons la largeur ici, nous obtenons la 31 00:02:09,610 --> 00:02:11,050 largeur globale de l'appareil 32 00:02:11,050 --> 00:02:12,580 sur lequel cette application fonctionne. 33 00:02:12,580 --> 00:02:19,390 Maintenant, nous savons que nous voulons insérer au moins deux boutons dans cet appareil ici, nous pourrions donc 34 00:02:19,390 --> 00:02:25,730 simplement diviser cela par deux, maintenant que chaque bouton est moitié moins large que l'appareil. 35 00:02:25,730 --> 00:02:30,190 Maintenant, si nous enregistrons cela, nous n'obtenons pas vraiment l'apparence que nous voulons parce que, 36 00:02:30,190 --> 00:02:35,620 bien sûr, c'est trop grand, mais si nous divisons cela par trois par exemple, cela semble déjà mieux 37 00:02:35,620 --> 00:02:37,060 sur le petit écran, 38 00:02:37,060 --> 00:02:42,520 mais pas sur le grand, mais que diriez-vous quatre? Si nous en prenons quatre, alors nous avons beaucoup d'espace 39 00:02:42,520 --> 00:02:49,690 pour tous les autres espaces dont nous avons besoin, comme l'espacement autour de notre conteneur et nous nous assurons que nos boutons respectent toujours la taille de l'appareil. 40 00:02:49,720 --> 00:02:55,510 Maintenant, bien sûr ici, vous auriez pu obtenir quelque chose de similaire en définissant la largeur à un 41 00:02:55,510 --> 00:03:00,760 pourcentage, comme 40% ici, mais je voulais également introduire ici l'API des dimensions que nous utiliserons 42 00:03:00,760 --> 00:03:01,550 plus tard. 43 00:03:01,570 --> 00:03:07,480 C'est une excellente API pour savoir combien de pixels vous avez disponibles sur la largeur et la hauteur sur 44 00:03:07,870 --> 00:03:09,140 l'appareil ou sur 45 00:03:09,190 --> 00:03:15,670 et c'est important, où le pourcentage ici fait toujours référence à la vue parent directe et pas toujours à la largeur 46 00:03:15,670 --> 00:03:17,560 disponible de l'appareil , c'est 47 00:03:17,650 --> 00:03:20,880 uniquement le cas sur le parent le plus haut pour 48 00:03:20,890 --> 00:03:28,330 ainsi dire, donc sur la vue la plus haute que vous rendez. La fenêtre d'obtention des dimensions vous donne toujours les dimensions de l'ensemble 49 00:03:28,330 --> 00:03:30,750 de l'appareil, peu importe où vous l'utilisez. 50 00:03:30,760 --> 00:03:38,480 Donc la largeur ici est toujours la largeur de notre écran sur l'appareil et jamais celle du parent ou quoi que ce soit d'autre. 51 00:03:38,560 --> 00:03:43,390 Cela peut donc être très utile si vous souhaitez styliser quelque chose d'une certaine manière ou 52 00:03:43,390 --> 00:03:48,100 dimensionner quelque chose d'une certaine manière, car cela vous indique la largeur dont vous disposez.