Então, começamos com a entrada de texto. No momento, não estamos fazendo nada com os valores inseridos pelo usuário,
mas antes de fazer isso, vamos garantir que o botão não esteja abaixo da entrada, mas ao
lado dela à direita
e por novamente, precisamos trabalhar no layout.
É por isso que tenho essa visão extra aqui em torno da entrada de texto no botão.
Nós não precisaríamos disso, mas agora com essa visualização aninhada, podemos controlar como esses dois
itens são alinhados entre si, adicionando novamente a propriedade style
aqui e agora para o layout, o posicionamento e as coisas, o React Native usa flexbox que você também pode Se
você não conhece, na Web, em anexo, você encontrará recursos para começar a usar o CSS flexbox.
Você não precisa entrar e sair do flexbox, mas isso ajuda a saber um pouco,
o trabalho do flexbox faz com que posicione os elementos dentro de uma vista próximos um do outro ou acima um do
outro, por padrão, acima um do outro em React Native e
você pode mudar isso definindo a direção flexível da coluna que é o padrão para a linha e apenas adicionando isso.
Nesta exibição, substituímos o padrão que é o padrão e é por isso que não precisamos desativá-lo da coluna
e agora já , veremos que o botão na entrada de texto fica ao lado do outro, ainda não
parece tão
bom, mas eles estão sentados um ao lado do outro. Agora, para melhorar a aparência, também podemos adicionar
mais, por exemplo,
você pode definir como as coisas são alinhadas e distribuídas em suas linhas ou colunas.
Por exemplo, com o conteúdo justificado, é possível controlar como os itens são distribuídos ao longo do eixo principal e,
com a linha, o eixo principal é da esquerda para
a direita, se for a coluna, o eixo principal será de cima para baixo.
Portanto, agora podemos especificar um valor e, aqui, meu IDE ainda me fornece preenchimento automático, o que é muito conveniente,
podemos especificar um valor de espaço entre, por exemplo. O que isso significa é que todo o espaço livre restante fica entre
os dois elementos, então eles não estão sentados
diretamente um ao lado do outro, mas, em vez disso, há algum espaço livre entre eles, como
você pode ver.
Agora também podemos alinhá-los em seus eixos transversais,
de modo que o eixo principal da linha de direção flexível foi da esquerda para a
direita, o eixo transversal é de cima para baixo. Para a coluna de direção flexível, o eixo principal seria de cima para baixo e o eixo transversal
seria da esquerda para a
direita, portanto o eixo transversal é simplesmente o oposto do eixo principal, por assim dizer. Justifique as posições do conteúdo ao longo do
eixo principal. Com os itens de alinhamento, você pode controlar como os elementos filhos dessa visualização são alinhados ao longo do eixo
transversal e aí você tem valores diferentes, como por exemplo, o centro.
Portanto, neste caso, como temos a linha de direção flexível, isso deve centralizar verticalmente todos os itens, o que significa que o botão
agora parece melhor e é simplesmente centralizado lá no meio desta entrada. Bem, e agora também podemos aumentar um
pouco a largura dessa entrada, indo para a entrada de texto e,
no estilo, também podemos adicionar uma largura, digamos 200, para obter uma largura de 200 pixels, o
que significa que isso agora é um pouco maior. Como alternativa, a propósito, você também pode ter
escolhido um valor percentual como 80%, o que significa que isso ocupa 80% da largura disponível disponibilizada
por seu componente pai, portanto, pela visualização que o cerca. E agora, com isso, vimos os primeiros fundamentos importantes, sobre
o layout do React Native e o estilo, mas agora estamos fazendo tudo isso com esse conceito
chamado estilos inline, o que significa que estamos configurando os estilos diretamente nos elementos e isso não é
o ideal.