Agora esta também é uma boa prática
para você, você pode pausar o vídeo aqui e tentar posicionar esses dois botões um ao lado do outro,
apenas os dois botões, não a entrada e os dois botões, mas esses dois botões devem estar em um nova linha abaixo
da entrada, mas depois sentar ao lado do outro.
Após a breve pausa que você pode usar para pausar o vídeo, nós vamos fazer isso juntos.
Então você teve sucesso?
Vamos tentar juntos.
A chave aqui é usar flexbox e outra view porque novamente como eu mencionei anteriormente e como é realmente importante
entender, view components são seu componente principal para organizar outros componentes ou para ser usado como um container
que você também pode estilizar
mas aqui neste caso, para organizar outros componentes. Então, eu vou mover os dois botões dentro dessa
visão e agora podemos atribuir um estilo a essa visão e esse estilo de curso será definido
aqui em nosso objeto de estilo e eu vou nomear esse
contêiner de botão, isso é com você, este nome e lá, eu quero definir uma direção flexível da linha
para tê-los sentar ao lado do outro e, em seguida, vou definir justificar o conteúdo do espaço entre para ter
o espaço livre entre os dois botões.
Agora vamos adicionar o estilo aqui para aquela view, styles button container e salvar isso e agora aqui estão os botões mas para
ter o espaço livre tem um efeito aqui, que ficará ainda mais claro no Android pelo jeito, que
atualmente não está tendo nenhum efeito,
de modo que o espaço entre não
está tendo nenhum efeito, deixe-me mostrar rapidamente isso no Android.
Você
vê, não há espaço livre.
A razão para isso é simplesmente que não temos largura atribuída ao nosso contêiner de
botão
e, portanto, como você aprendeu, só é
preciso a largura dos filhos e isso é simplesmente
a largura dos dois
botões adicionados juntos, portanto, não há espaço livre para adicione entre.
Então nós temos algum espaço livre no meio, nós simplesmente precisamos atribuir um com ao container de botão
e agora essa largura é claro para você. Como a entrada tem 80%,
poderíamos ir com 80% aqui também ou talvez com 60% para ter um pouco mais estreito que a entrada acima, para
que os botões não fiquem nas bordas da entrada, mas sim claro até você
e,
portanto, agora com isso, se isso recarrega e nós temos um olhar para isso no
Android usando este modo conveniente de fechá-lo e reiniciá-lo, agora devemos ver algum espaço livre entre
esses dois botões, sim
que está parecendo bom.
E é claro que você pode
brincar com isso, você também pode, alternativamente, adicionar estilos aos botões, você
pode adicionar props de estilo aqui e adicionar uma margem à esquerda e à direita de cada botão, que
também funcionaria.
Você também pode brincar com outros valores aqui, como espaço ao redor para ter o espaço livre à esquerda e à
direita dos botões e não apenas entre eles.
Estas são todas as coisas que você pode fazer, eu irei com o espaço por aqui e dar uma olhada final
nisso, mas no final das contas isso é simplesmente algo que depende de você.
Importante aqui é claro que você entende como você pode conseguir algo com a ajuda de
uma visão que você envolve seus botões e flexbox então e com
isso, eu diria que temos um olhar decente aqui.
Agora, uma última coisa, realmente a última coisa que eu ainda quero fazer é redimensionar esses botões porque eles não são do mesmo tamanho
e eu acho que seria um pouco mais legal se eles tivessem o mesmo tamanho.
Agora, em um botão, você não pode adicionar um estilo prop e definir uma largura, não importa se você
está usando estilos embutidos ou o
objeto de folha de estilo, e isso é algo que
você precisa saber, e é por isso que estou cobrindo aqui. você tem que embrulhar seu botão em uma visão separada, como se
eu estivesse fazendo aqui e então dê a esse ponto um botão, por exemplo aqui nós poderíamos adicionar estilos botão, referindo-se a
uma propriedade de botão lá embaixo, para cada visão e lá neste propriedade de botão que eu estou adicionando agora,
você poderia adicionar uma largura de digamos 40%
e que será 40% do pai dessa visão, então 40% dessa visão de contêiner de botão que leva 60% de
toda a largura disponível e podemos fazer isso no outro botão, é claro.
Então, isso é apenas algo que você precisa saber, se você adicionar suas vistas ao redor aqui, em torno de seus botões.
Agora, com isso, se reiniciarmos o Android novamente, devemos ter botões com o mesmo tamanho, o que, com certeza,
é algo que você deseja.
É claro que você também poderia ter usado um valor de pixel aqui, em vez de valores percentuais, mas agora estou
muito feliz, acho que
agora é realmente um aplicativo que parece bom, se comportando bem e sim,
é um bom começo com o React Native.
Agora, obviamente, há muito mais que podemos aprender e mergulhar, muito mais podemos fazer em relação ao
estilo, porque, como já mencionado, esse certamente não é o aplicativo mais bonito que você
já criou, mas abordamos vários fundamentos importantes Aqui.