Maintenant, c'est aussi une bonne pratique pour
vous, vous pouvez mettre la vidéo en pause ici et essayer de positionner ces deux boutons côte à côte
par vous-même, seuls les deux boutons, pas l'entrée et les deux boutons mais ces deux boutons devraient être dans un nouvelle
ligne sous l'entrée mais asseyez-vous côte à côte.
Après la courte pause que vous pouvez utiliser pour mettre la vidéo en pause, nous le ferons bien sûr ensemble.
Avez-vous réussi?
Essayons ensemble.
La clé ici est d'utiliser Flexbox et une autre vue car, comme je l'ai mentionné précédemment et comme il est vraiment important de
comprendre, les composants de vue sont votre composant de base pour organiser d'autres composants ou pour être utilisés comme un conteneur
que vous pouvez également styliser
mais ici dans ce cas, pour organiser d'autres composants. Je vais donc déplacer les deux boutons à l'intérieur
de cette vue et maintenant nous pouvons attribuer un style à cette vue et ce style sera
bien sûr défini ici dans notre objet style et je nommerai ce
conteneur de boutons, cela dépend de vous, ce nom et là-dedans, je veux définir une direction flexible de la
ligne pour les faire s'asseoir côte à côte et ensuite, je vais définir justifier le contenu de l'espace entre pour
avoir l'espace libre entre les deux boutons.
Maintenant, ajoutons le style ici à cette vue, le conteneur de boutons de styles et enregistrons ceci et maintenant voici les
boutons, mais pour avoir l'espace libre avoir un effet ici, qui sera encore plus clair sur Android
d'ailleurs, qu'il n'a actuellement aucun
effet, de sorte que l'espace entre n'a
aucun effet, permettez-moi de le montrer rapidement sur Android.
Vous
voyez, il n'y a pas d'espace libre.
La raison en est simplement que nous n'avons pas de largeur affectée à notre conteneur de boutons
et
donc comme vous l'avez appris, cela ne prend
que la largeur des enfants et c'est simplement la largeur
des deux boutons additionnés,
donc il n'y a pas d'espace libre pour ajouter entre les deux.
Nous avons donc un peu d'espace libre entre les deux, nous avons simplement besoin d'attribuer un avec au conteneur de
boutons et maintenant cette largeur dépend de vous. Puisque l'entrée a 80%, nous pourrions
aller avec 80% ici aussi ou peut-être avec 60% pour l'avoir un peu plus étroit que l'entrée ci-dessus, de sorte que les boutons ne
soient pas assis sur les bords de l'entrée mais c'est de bien sûr à vous et
donc
maintenant avec cela si cela se recharge et nous y jetons un œil sur Android en
utilisant cette façon pratique de le fermer et de le redémarrer, maintenant nous devrions voir un peu d'espace
libre entre ces deux
boutons, oui cela semble bon.
Et bien sûr, vous pouvez jouer
avec cela, vous pouvez également ajouter des styles aux boutons, vous pouvez également
ajouter des accessoires de style ici et ajouter une marge à gauche et à droite de chaque bouton, cela aurait
également fonctionné.
Vous pouvez également jouer avec d'autres valeurs ici, comme l'espace autour pour avoir l'espace libre à gauche et à
droite des boutons et pas seulement entre eux.
Ce sont toutes des choses que vous pouvez faire, j'irai avec de l'espace ici et j'aurai un dernier regard sur cela,
mais en fin de compte, c'est bien sûr simplement quelque chose qui vous appartient.
Il est bien sûr important ici que vous compreniez comment vous pouvez réaliser quelque chose à l'aide d'une vue
que vous enroulez autour de vos boutons et de votre flexbox puis et
avec cela, je dirais que nous avons un look décent ici.
Maintenant, une dernière chose, vraiment la dernière chose que je veux encore faire maintenant est de redimensionner ces boutons car ils ne sont pas de taille
égale et je pense que ce serait un peu plus agréable s'ils avaient la même taille.
Maintenant, sur un bouton, vous ne pouvez pas ajouter un accessoire de style et définir une largeur, peu importe
si vous utilisez des styles en
ligne ou l'objet de feuille de style, et c'est quelque
chose que vous devez savoir, c'est pourquoi je le couvre ici, vous devez encapsuler votre bouton dans une vue séparée, comme je le
fais ici, puis donner à cette vue un bouton, par exemple ici, nous pourrions ajouter un bouton de styles, en se référant
à une propriété de bouton là-bas, à chaque vue et là-bas propriété de bouton que j'ajoute maintenant, vous pouvez ajouter
une largeur de disons 40% et ce sera
40% du parent de cette vue, donc 40% de cette vue de conteneur de bouton qui elle-même prend 60% de
toute la largeur disponible et nous pouvons également le faire sur l'autre bouton.
C'est donc quelque chose que vous devez savoir, si vous ajoutez vos vues environnantes ici, autour de vos boutons.
Maintenant, si nous redémarrons à nouveau Android, nous devrions avoir des boutons de taille égale, ce qui bien sûr est
souvent quelque chose que vous voulez.
Bien sûr, vous auriez pu également utiliser une valeur en pixels ici au lieu de valeurs en pourcentage, mais maintenant, je suis
vraiment heureux, je pense
que c'est maintenant vraiment une application qui a l'air bien, se comporte bien
et oui, c'est un bon début avec React Native.
Maintenant, évidemment, il y a tellement plus que nous pouvons apprendre et nous allons plonger, tellement plus que nous pouvons faire en ce
qui concerne le style, car comme déjà mentionné, ce n'est certainement pas la plus belle application que vous ayez jamais construite,
mais nous avons couvert beaucoup de principes fondamentaux importants ici.