Parfois, cependant, vous ne pouvez pas obtenir la bonne
mise en page avec un pourcentage de largeur et des pixels codés en dur comme celui-ci, parfois vous devez vraiment
savoir combien de pixels
vous avez disponibles, par exemple ici sur les boutons où nous définissons une largeur de 100, nous définissons 100 quelle
que soit la taille de l'appareil.
Maintenant, en fait, nous savons que nous voulons avoir deux boutons côte à côte.
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
l'écran, peu importe sa taille
et pour cela, nous devons savoir combien de pixels nous avons en largeur et c'est quelque chose que
nous pouvons découvrez-le avec l'aide de React Native. À partir de React Native,
vous pouvez importer l'objet dimensions ici, dimensions est le nom.
Maintenant, ce n'est plus un composant que vous utilisez, mais un objet qui vous permet de
connaître la largeur dont vous disposez.
Maintenant, nous pouvons utiliser cela par exemple là-bas où nous définissons la largeur de notre bouton, au lieu de le
définir comme ceci, nous pouvons définir notre
largeur en dimensions et puis il y a une méthode get où vous pouvez obtenir les dimensions de la fenêtre.
Vous pouvez également l'obtenir
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
d'état sera exclue du calcul et
donc ce sera vraiment, bien la partie
de l'écran où votre contenu sera vivre dans.
Donc, vous devez généralement utiliser la fenêtre ici, car sur iOS,
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
d'état en haut.
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,
les vraies dimensions que vous pouvez utiliser pour votre disposition. Maintenant, ce que cela vous donne est un objet où
vous pouvez obtenir quelques propriétés, quatre pour être précis - l'échelle de police
configurée par l'utilisateur, donc par exemple si les utilisateurs veulent avoir des polices plus grandes, alors vous
pouvez obtenir le multiplicateur ici avec échelle
de police, mais surtout, vous obtenez la largeur et la hauteur et si nous obtenons la largeur ici, nous obtenons la
largeur globale de l'appareil
sur lequel cette application fonctionne.
Maintenant, nous savons que nous voulons insérer au moins deux boutons dans cet appareil ici, nous pourrions donc
simplement diviser cela par deux, maintenant que chaque bouton est moitié moins large que l'appareil.
Maintenant, si nous enregistrons cela, nous n'obtenons pas vraiment l'apparence que nous voulons parce que,
bien sûr, c'est trop grand, mais si nous divisons cela par trois par exemple, cela semble déjà mieux
sur le petit écran,
mais pas sur le grand, mais que diriez-vous quatre? Si nous en prenons quatre, alors nous avons beaucoup d'espace
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.
Maintenant, bien sûr ici, vous auriez pu obtenir quelque chose de similaire en définissant la largeur à un
pourcentage, comme 40% ici, mais je voulais également introduire ici l'API des dimensions que nous utiliserons
plus tard.
C'est une excellente API pour savoir combien de pixels vous avez disponibles sur la largeur et la hauteur sur
l'appareil ou sur
et c'est important, où le pourcentage ici fait toujours référence à la vue parent directe et pas toujours à la largeur
disponible de l'appareil , c'est
uniquement le cas sur le parent le plus haut pour
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
de l'appareil, peu importe où vous l'utilisez.
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.
Cela peut donc être très utile si vous souhaitez styliser quelque chose d'une certaine manière ou
dimensionner quelque chose d'une certaine manière, car cela vous indique la largeur dont vous disposez.