Alors maintenant, avec ces premières étapes de base, si je remplis maintenant un nombre ici et que nous continuons,
tout cela me semble bien ici,
tout cela fonctionne, si nous commençons maintenant un
jeu, alors je veux également réduire cet espacement que nous avons ici et je veux aussi m'assurer que ma boîte est
là-bas,
donc ce journal des suppositions que nous avons, que cela
semble aussi mieux.
Maintenant, c'est quelque chose que nous pouvons faire sur l'écran de jeu, bien sûr, car c'est
l'écran que nous regardons actuellement.
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
le nombre ici et le conteneur et je veux changer cela. Maintenant, pour changer cela, nous
pouvons à
nouveau utiliser l'API dimensions.
Donc ici, j'importe à nouveau les dimensions de React Native et maintenant
là-bas, nous pouvons calculer cette marge dynamiquement. Ce que nous pouvons faire ici, c'est que nous pouvons à nouveau obtenir les
dimensions de notre fenêtre, puis ici, la largeur ou dans ce cas, probablement la hauteur, puis diviser cela par
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
c'est vraiment un jeu de devinettes alors, peut-être pas ce que nous voulons vraiment.
Au lieu de cela, nous pourrions vérifier la hauteur dont nous disposons, puis utiliser
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,
nous voulons avoir un espacement de 20, sinon nous en avons un de 10. Nous pouvons donc également utiliser les dimensions que nous
calculons dans une condition if, dans ce cas dans une expression ternaire ici, mais vous pouvez
également l'utiliser dans une vérification if normale.
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
énorme écart ici sur le petit écran, sur l'iPhone qui est un plus grand écran cependant, nous avons définitivement un
un plus grand écart et pour voir plus clair, vous pouvez bien sûr jouer avec
cela et par exemple utiliser 30 pour des écrans plus petits et 30 pour des écrans plus grands et 5 pour des écrans plus
petits et maintenant vous devriez certainement le voir.
Ici, nous avons un petit écart
et ici, nous avons un plus grand écart.
Nous pouvons donc également l'utiliser dans des conditions if.
Maintenant, avec cela, je vais remettre cela à 20 et 5 ici, mais cela maintenant, espérons-le, montre également une autre
façon d'utiliser cela.
Vous pouvez l'utiliser dans des conditions qui, bien sûr, vous offrent beaucoup de flexibilité dans les cas
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
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
avez également des requêtes multimédias et ensuite vous pouvez rendre différentes choses en fonction de différentes
requêtes multimédias.
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
partout où vous pouvez utiliser Javascript, donc partout dans vos composants. Vous pouvez également attacher des styles totalement différents en fonction
de la largeur ou de la hauteur disponible. Nous pourrions également utiliser la fenêtre
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 à
600 et si c'est le cas, utiliser le conteneur de boutons de styles et sinon, utiliser le conteneur de
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
autre façon d'utiliser cela, vous pouvez l'utiliser partout où Javascript fonctionne. Vous pouvez bien sûr également l'utiliser ici, vous
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
c'est le cas, disons, vous retournez un code jsx totalement différent et donc
ce code par la suite ne fonctionnera jamais si vous revenez ici et seulement si vous n'y entrez pas
si check, donc
si vous avez un appareil qui n'est pas aussi grand que celui-ci, alors vous le faites là-bas.
Vous êtes donc vraiment flexible ici et utilisez cette flexibilité pour créer les mises en page que vous voulez, car c'est de
cela qu'il s'agit et ce qui vous donne beaucoup de flexibilité pour vos applications.
Voilà donc l'espacement ici,
maintenant je voulais aussi changer mes éléments de journal là-bas, c'est aussi quelque
chose que nous pouvons facilement faire bien sûr.
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
de liste ici avec le conteneur de liste et qui est défini sur 60%.
Maintenant, 60% semble assez bien sur des appareils plus gros, je pense, mais sur
des appareils plus petits, nous pourrions aller plus gros que cela.
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
une largeur minimale et peut-être aussi utiliser l'API dimensions pour le calculer dynamiquement ou nous utilisons à nouveau une vérification if.
Ici, nous pourrions encore dire que les dimensions obtiennent une fenêtre, obtiennent la largeur disponible dans ce cas
et si c'est disons supérieur à 500, alors
je veux utiliser 60%, sinon je veux utiliser 80%. Alors maintenant, nous rendons simplement un conteneur de liste plus large, plus large
en fonction de la largeur disponible sur le périphérique
sur lequel nous
fonctionnons et utilisons en fait 350 ici peut-être au lieu de 500 parce que nous parlons de
la largeur, pas de la hauteur.
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,
nous avons des objets plus gros.
C'est aussi quelque chose que nous pouvons faire et vous pouvez bien sûr jouer avec le point
d'arrêt que vous définissez effectivement ici.
vous pouvez essayer différentes tailles de point d'arrêt ici.
Bien sûr, vous pouvez également avoir plusieurs
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
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
pourrions avoir un conteneur de liste grand ici et là, nous avons défini un flex et nous
avons défini notre largeur de disons 80% parce que c'est le grand
et ici nous avons le normal avec 60% .
Maintenant, je n'ai pas de condition if là-bas, mais j'ai deux objets de style
différents et maintenant nous devons simplement attacher des objets de
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
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
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
appareil, alors nous voulons avoir le conteneur de grande liste, donc nous pouvons définir le style de conteneur de
liste, cette variable égale à
styles conteneur de liste grand pour pointer vers
cet objet de style et maintenant nous pouvons utiliser cet objet de style ici sur la vue où nous avons besoin du
style de conteneur de liste, nous utilisons maintenant la variable qui contient un objet de style de conteneur de
liste différent en fonction de la largeur de notre appareil. Et si nous enregistrons maintenant cela et que nous l'exécutons à
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
sur le téléphone Android avec le plus petit appareil, avec moins de largeur, nous obtenons le plus grand récipient.
C'est donc le même résultat qu'avant mais un
peu plus lisible et maintenant nous pourrions en avoir plusieurs si vérifie ici où nous stockons différents
styles ici dans le style de conteneur de liste
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.
Voilà donc comment vous pouvez jouer avec cela et être conscient de la flexibilité de l'API des dimensions est
vraiment crucial ici.