Maintenant, nous avons eu un autre problème dans cette application, car une fois que tout est résolu
ici, si nous y allons rapidement, assurez-vous de résoudre
ce problème, nous avons cet écran et cet écran est également cassé.
En fait, nous avons
eu deux problèmes, l'un est que l'écran n'est pas défilable, ce qui n'était pas un problème sur
les gros appareils où nous avons plus de hauteur, mais ici, nous ne pouvons pas presser tout le
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
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
nos hauteurs ici dynamiquement, en particulier la hauteur de l'image ici que nous codons actuellement en dur à 300 pixels, ce qui
est beaucoup trop grand sur le petit appareil.
Maintenant, vous avez déjà appris la solution pour cela,
nous pouvons à nouveau utiliser l'API de dimensions en l'important depuis React Native et avec les dimensions importées, nous pouvons
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
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
même valeur qu'une hauteur, donc je vais juste la
copier là.
Important ici, nous n'utilisons pas la hauteur car l'image ne doit pas être à 70% de notre hauteur disponible, au lieu
de
cela, elle doit simplement avoir la même hauteur qu'elle a la largeur et qui est calculée sur la
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
cela, nous pouvons donc l'utiliser ici aussi, puis le diviser par deux et nous aurons le rayon de bordure parfait
pour cette largeur calculée dynamiquement. C'est donc une chose importante.
Maintenant, nous avons également quelques autres tailles que nous mettons en place, comme la marge verticale ici que nous codons en
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
la fenêtre, dans ce cas, la hauteur et
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
car il était 15, c'était 30, donc divisons cela par 40, si nous
divisons cela par 20 pour avoir à nouveau la même relation entre
ces deux verticales de marge.
Alors résolvons cela
à nouveau et voyons quel est le résultat, mieux, maintenant au moins nous
pouvons voir le bouton mais toujours pas parfait.
Cette marge ici est certainement encore trop grande et aussi la taille de la police, nous pourrions également la réduire.
Donc, une image plus ronde, nous pouvons certainement diviser la hauteur par 30 ici pour cette
marge que nous mettons en place, puis aller à 60 pour cette marge verticale du conteneur de résultat et pour
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
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
que parfois avec tous les ajustements, nous ne pourrons toujours pas l'adapter à
l'écran, du moins pas sans que tout soit super
petit, nous pourrions vouloir importer ce défilement voir ici et envelopper notre vue avec cela, alors
ajoutez une vue de défilement ici autour de notre vue pour la faire défiler et maintenant jetons
un coup d'œil à
cela,
résolvons cela, maintenant cela a l'air mieux. Il s'adapte à l'écran et si nous en avions besoin, nous pourrions
également le faire défiler, nous pouvons voir que sur l'iPhone au fait,
là si nous résolvons cela, sur l'iPhone, nous pouvons
toujours faire défiler un peu et il rebondit en arrière, nous avons activé le défilement et
donc maintenant cela semble bon sur l'iPhone mais aussi sur cet appareil où nous réduisons un peu la taille de la
police, travaillons un peu sur l'espacement ici et si cela dépassait
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
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 -
pour calculer dynamiquement des tailles, que ce soit pour la largeur ou la hauteur ou les marges et également bien sûr dans les
instructions if pour simplement rendre un contenu différent, attacher différents styles ou différents objets de style en fonction des conditions
de largeur ou de hauteur que vous configurez ici, mais ce n'est pas tout, car les
utilisateurs peuvent également changer l'orientation du périphérique pendant que l'application s'exécute et que signifie aussi parfois que
nous devons changer le style et / ou la mise en page.