Resumo do Transcript

Então, o e-mail e a caixa de text não estão lado a lado. Por quê? Por causa daquela view aqui, essa view tem puxido padrão a flex direction column, tá bom? Deixa eu botar comentário aqui. Flex direction column é o padrão. Isso significa que os itens vão aparecer em cada linha, por exemplo, e-mail vai ser um item e depois na outra linha vai aparecer o outro item e assim por diante. Se a gente quiser que esses caras apareçam lado a lado na mesma linha, tem que mudar flex direction para row, tá bom? É isso que a gente vai fazer para esse view aqui. Então vamos lá, vou recortar esse negócio. Se você quiser, podemos definir o style aqui mesmo ou fazer um estilo para view, tá bom? Então vamos lá, style, sei lá, vou botar styles, ponto o que? View style, por exemplo, container style, qualquer coisa. Vamos definir esse cara. Container style, vamos aqui, container style. Lembra que recortei flex direction? É aqui que a gente vai por. Salvar e vamos ver o que acontece. E agora, cadê? Eles apareceu a caixa de texta. Então a gente tem que usar o flex. Se você não sabe do flexbox, então esse cara aqui está ocupando tudo. A gente tem que fazer com que o label ocupe, por exemplo, um terço do espaço de toda a linha e para caixa de texta, a gente ocupa dois textos. Então se você somar tudo, tem três partes, né? Dividem três partes, um, dois, três. Então adicione flex um para o email e flex dois para a caixa de texta. Significa que se na linha tiver três partes, o flex dois vai dizer que ocupe dois textos de todo o total, né? Então flex dois para a caixa de texta. Aqui no input style, que é a caixa de texta, vou adicionar flex dois e para o container style vou adicionar, desculpa, e para o label style vou adicionar flex um. No dois, mais um é três, então vai ser três partes. O input caixa de texta vai ocupar dois textos e o label vai ocupar um terço. Tá bom? É isso que apareceu.