Nous avons donc commencé avec la saisie de texte, pour le moment, nous ne faisons rien avec les valeurs entrées par l'utilisateur, mais
avant de le faire, assurez-vous que le bouton n'est pas en dessous de cette entrée, mais à côté de lui à droite
et pour encore une fois,
nous devons travailler sur la mise en page.
C'est pourquoi j'ai cette vue supplémentaire ici autour de la saisie de texte dans le bouton.
Nous n'en aurions pas besoin, mais maintenant avec cette vue imbriquée, nous pouvons contrôler la façon dont ces deux éléments
sont alignés l'un par rapport à l'autre, en ajoutant à nouveau la propriété de
style ici et maintenant pour la mise en page, pour le positionnement des choses, React Native utilise une boîte flexible que vous pourriez également sachez sur le
Web, au cas où vous ne le feriez pas, vous trouverez ci-joint des ressources qui vous permettront de démarrer avec CSS flexbox.
Vous n'avez pas besoin de connaître Flexbox à l'intérieur et à l'extérieur, mais cela aide à en savoir
un peu, la flexbox fonctionne de telle sorte qu'elle positionne les éléments à l'intérieur d'une vue les uns à côté des autres ou les uns au-dessus
des autres, par défaut les uns au-dessus des autres dans React Native et
vous pouvez changer cela en définissant la direction flexible de la colonne qui est la valeur par défaut à la ligne et en ajoutant
simplement ceci, sur cette vue, nous remplaçons la valeur par défaut qui est la valeur par défaut, c'est pourquoi nous n'avons pas
à la désactiver sur la colonne et maintenant déjà , nous verrons que le bouton dans la saisie de texte est assis côte
à côte,
n'est pas encore très beau, mais ils sont assis côte à côte. Maintenant, pour que cela paraisse mieux, nous pouvons également
en ajouter d'autres, par
exemple, vous pouvez définir comment les choses sont alignées et réparties dans leur ligne ou colonne.
Par exemple, avec justifier le contenu, vous pouvez contrôler la façon dont les éléments sont distribués le long de leur axe
principal et avec la ligne, l'axe principal est de gauche
à droite, si ce serait la colonne, l'axe principal serait de haut en bas.
Alors maintenant, nous pourrions spécifier une valeur et ici mon IDE me donne même l'auto-complétion qui est très pratique,
nous pourrions spécifier une valeur d'espace entre par exemple. Cela signifie que tout l'espace libre restant est entre les deux éléments,
ils ne sont donc plus assis l'un à
côté de l'autre, mais à la place, il y a de l'espace libre entre eux comme vous
pouvez le voir.
Maintenant, nous pouvons également les aligner sur leur
axe transversal, donc l'axe principal de la ligne de direction de flexion était de gauche à
droite, l'axe transversal est alors de haut en bas. Pour la colonne de direction flexible, l'axe principal serait de haut en bas et l'axe
transversal serait de gauche
à droite, donc l'axe transversal est simplement l'opposé de l'axe principal pour ainsi dire. Justifiez les positions du contenu le long de
l'axe principal, avec les éléments d'alignement, vous pouvez contrôler la façon dont les éléments enfants de cette vue sont alignés le long de
l'axe transversal et là, vous avez différentes valeurs, comme par exemple le centre.
Donc, dans ce cas, puisque nous avons une ligne de direction flexible, cela devrait centrer verticalement tous les éléments, ce qui signifie que le bouton est
maintenant plus joli et qu'il est simplement centré là au milieu de cette entrée. Eh bien et maintenant, nous pouvons également augmenter un
peu la largeur de cette entrée en allant à la saisie de texte et
là sur le style, nous pouvons également ajouter une largeur de disons 200, pour lui donner une largeur de 200
pixels, ce qui signifie que c'est maintenant un peu plus grand. Par ailleurs, vous auriez également pu choisir une valeur
de pourcentage comme 80%, ce qui signifie que cela prend 80% de la largeur disponible mise à disposition
par son composant parent, donc par la vue qui l'entoure. Et maintenant, avec cela, nous avons jeté un coup d'œil aux premiers principes
fondamentaux importants, à propos de la mise en page dans React Native et du style, mais pour le moment, nous faisons tout
cela avec ce concept appelé styles en ligne, ce qui signifie que nous mettons en place les styles directement sur les éléments et
ce n'est pas idéal.