Nesta palestra, quero mergulhar um pouco mais no flexbox, especialmente em relação a como você o usa nos aplicativos React
Native.
Se você já sabe tudo sobre isso, é claro que você pode pular esta palestra.
Então, para isso, eu preparei um aplicativo fictício simples e, claro, você encontra isso
em anexo, é um aplicativo nativo React normal construído com a expo e no aplicativo. arquivo js aqui, o que eu tenho
no final é apenas uma visão com três views lá onde cada view então tem um texto com
text um, dois, três, isso simplesmente cria algumas
caixas com cores diferentes - vermelho, azul e verde e agora usaremos o flexbox para mover essas caixas
para que você possa ter uma ideia de como o flexbox funciona porque é muito importante.
Agora as
primeiras coisas, por padrão, todas as visualizações no React Native, mesmo se você não
atribuir estilos especiais, usa flexbox e isso é diferente da web, por exemplo, se você tiver um
div que seria o equivalente a um tipo de visualização, não use o flexbox por padrão.
Em React Native, toda visão, por padrão, organiza seus filhos com a ajuda desse flexbox, flexbox é
simplesmente um termo, é simplesmente um conceito de CSS que é tudo sobre organizar elementos filhos em um
espaço unidimensional, então aqui
por exemplo, em uma coluna. Esse também é outro padrão,
não só toda visualização usa o flexbox, mas também por padrão organiza os filhos em uma coluna,
de cima para baixo. Isso também é uma diferença para a
web e eu não quero enfatizar muito essas diferenças, porque é claro que você não precisa ser um
desenvolvedor web para construir aplicativos React Native, mas eu acho que muitas pessoas conhecem o desenvolvimento web, Conheço o flexbox do
CSS e, portanto, faz sentido também falar sobre as diferenças. Então, na web quando você usa o flexbox,
não apenas ele
não é ativado por padrão, além disso,
se você ativá-lo, o padrão é organizar todos os elementos filhos em uma linha e aqui, o
padrão é organizá-los em um coluna.
Você pode alterar esse padrão, portanto, neste caso, na visualização que contém minhas caixas, adicionando a direção flexível aqui
e configurando para a linha, por exemplo, agora você verá que essas três caixas estão organizadas em uma linha da
esquerda para a direita. Agora, além de linha e coluna,
você também tem reverso de linha e coluna reversa e
isso simplesmente também faz o que o nome implica.
Agora nós ainda temos uma linha, mas o primeiro elemento, a caixa vermelha, na verdade, está à direita e não à esquerda mais, então
isso também é algo que
você pode fazer, deixe-me voltar para a linha embora. Então essa é a primeira coisa que você pode fazer.
Outra coisa importante sobre o flexbox é como os elementos filhos são dimensionados, aqui eu dei a
cada elemento filho uma largura e uma altura de 100.
Agora, se removêssemos essa coisa de largura e altura em cada elemento filho, veríamos que agora temos uma linha muito
pequena aqui, porque agora cada caixa é tão grande quanto a criança exige que seja e tão alta quanto
seu filho. exige que seja, então cada caixa aqui
que contém um número é tão larga e alta quanto o número que contém.
Agora você também pode mudar isso com o contêiner flexbox circundante. Vamos dar uma largura de digamos 300 pixels
ou 80% da largura pai, então neste caso, já que
é o elemento raiz, da largura do dispositivo e vamos dar uma altura de
digamos 300.
Se fizermos isso e agora realmente importante, estou fazendo isso na visão que contém todas essas caixas,
não estou fazendo nas caixas em si.
Então, se nós atribuirmos essa largura e altura na caixa ao redor, você verá algo
interessante, a altura é assumida para todos os
elementos, agora todas as visualizações no flexbox assumem a altura do pai, a largura não tem impacto aqui.
Esse também é um comportamento padrão que você tem aqui, obviamente, já que não mudamos nada.
O comportamento padrão aqui, de fato, é que os elementos filhos em um flexbox, portanto, nesta
visão externa, estão organizados de tal forma que eles se alinham ao longo do eixo cruzado por meio do alongamento.
Ok, isso foi um monte de termos, o que isso significa? Agora, ao trabalhar
com o flexbox, temos dois eixos importantes. O eixo principal depende da sua direção de flexão, para uma linha que temos aqui,
linha de direção de flexão, o eixo principal é da esquerda para a direita. Para linha reversa, seria direita para a esquerda, para coluna, seria de cima para
baixo e para coluna reversa, seria de baixo para cima, então esse é o eixo principal
e então você também tem
um eixo transversal e isso é simplesmente o oposto do eixo principal.
Assim, para uma linha em que o eixo principal é da esquerda para a direita, o eixo transversal seria de cima para baixo. Se o eixo principal for da direita para a
esquerda, o que seria o caso da linha inversa, o eixo transversal seria de baixo
para cima.
Ok, então esse é o eixo principal e o conceito de eixo cruzado.
Agora você pode organizar seus elementos filhos, portanto, nessa visualização em que temos as três caixas como elementos filho,
você pode organizar esses elementos filho ao longo desse eixo. Você usa o conteúdo justificado para organizar os
elementos ao longo do eixo principal e alinha os itens para organizar os elementos ao redor do eixo transversal.
Agora você vê os valores que você obteve para justificar o conteúdo aqui, se você adicionar
essas citações ou se colocar o cursor nele e atingir o espaço de controle. Você vê que pode centralizar elementos, pode
posicioná-los no final ou no início desse contêiner ou pode adicionar algum espaço entre eles,
por exemplo,
se usarmos espaço entre aqui e usarmos alinhar o centro do item, as coisas serão alteradas.
Agora você verá a largura do contêiner ao redor, cada caixa ainda é
bem pequena, mas eles estão divididos ou são distribuídos pela largura do contêiner pai e não
estão mais ocupando a altura, porque ao longo da cruz eixo, estamos alinhando-os com itens de alinhamento
e lá, eu definir isso para o centro.
O padrão aqui é alongar e se eu configurá-lo de volta para esticar, então, sem surpresa, eles esticam para
toda a altura.
Agora, se você quiser garantir que eles ocupem a largura disponível, não é possível definir o alongamento aqui
para justificar o conteúdo, que é o principal veículo de posicionamento do eixo, portanto, não é possível definir o alongamento aqui.
Então, o que você pode fazer a respeito disso?
Bem, isso é algo que você configura agora em cada item filho.
Você pode dizer a um item filho quanto espaço ele deve tirar do espaço que ele está potencialmente recebendo. Esticar aqui é uma espécie de caso especial, lá você
configura isso no item pai, normalmente você configura
isso no item filho.
Então, por exemplo, se eu definir isso para o centro agora, para que o pai não
diga ao filho quanto espaço ele deve ocupar, então poderemos controlar totalmente o espaço que uma criança leva indo para o
estilo filho e aí você pode adicionar flex , a propriedade flex. A propriedade flex é aplicada a itens que estão dentro de um flexbox, de
modo que estão dentro de uma visão,
neste caso, aqui e que pode ser uma visão em si, mas que também poderia ser outro componente como
um texto, por exemplo.
Então agora, aqui, você pode adicionar flex e você pode definir isso para um valor de um
por exemplo, então flex precisa ser um número. Se você definir isso como um, o
que você verá é que agora o container vermelho onde eu defini o flex para 1 leva toda a largura disponível, ele pode ficar
tão grande que deixa espaço suficiente para o container azul e verde para que eles pode espremer seu
conteúdo no flexbox circundante.
Agora não podemos ver os limites do contêiner ao redor, mas os limites seriam essencialmente onde o item
vermelho começa e o item verde e assim no eixo horizontal aqui.
Então agora flex um garante que o item vermelho fica tão grande quanto possível, por
isso ocupa o máximo de espaço possível. Por padrão, as exibições ocupam apenas o espaço exigido pelos
elementos
filhos, portanto, como esse caractere é necessário, mas com um flexível, você altera isso e agora ocupa o espaço ao longo
do eixo principal,
portanto, ao longo da largura, pegue. Para o eixo cruzado, mais uma vez que
é um caso especial, você tem que fazer isso no pai. Para o eixo principal e como temos
linha aqui, o eixo principal é um eixo horizontal da esquerda para a direita, você
faz isso com a propriedade flex em um filho.
Agora, é claro, você também pode adicionar flex a outros elementos filhos, assim, em segundo lugar, para o container
azul com os dois,
você também pode adicionar um flex lá.
Então agora eu tenho um flex no container vermelho e flexo
um no container azul e o que acontece agora é que ambos pegam o espaço livre disponível e entre essas
duas caixas, o espaço é distribuído uniformemente e é isso que esse número aqui indica.
Esse número é um número
relativo, todos os itens no mesmo flexbox, com a propriedade flex distribuir o espaço disponível considerando o
número atribuído aqui e esses números são relativos um ao outro.
Então, se eu der ao flexionador azul dois aqui, então isso significa que, do espaço disponível que você
tem naquele contêiner vizinho, depois de deduzir o espaço que cada elemento precisa para espremer seu
conteúdo,
o contêiner azul ocupará o dobro do espaço disponível. este aqui porque temos flex
um, aqui temos
flex dois, se tivéssemos flex três aqui, então isso levaria três quintos do espaço livre disponível porque temos
três mais dois, então
temos 5 segmentos disponíveis por assim dizer e aqui o container vermelho levaria 3 segmentos, o
container azul levaria 2 segmentos.
Se temos 1 e 2, então temos três segmentos disponíveis e o azul leva dois
deles, vermelho leva um, então você sempre soma esses números flexíveis e então distribui ou isso é feito automaticamente,
claro, mas então o espaço disponível é distribuído adequadamente.
Então, agora, aqui, veremos que o contêiner azul é duas vezes maior que o vermelho ou que ocupa
o dobro do espaço livre que o vermelho.
Então, é assim que você
pode trabalhar com flex, você pode organizar como os itens são posicionados com a direção flexível, com justificar o conteúdo e
alinhar itens, e você também pode fazer seus itens crescerem e encolherem com a ajuda do flex.
Então agora é uma breve introdução ao flexbox no React Native, como eu disse
inspirado pelo Flexbox para CSS, então se você soubesse disso, tudo o que eu expliquei aqui provavelmente não é
novidade para você.
Trabalharemos com o flexbox ao longo deste curso,
para que as coisas também se tornem mais claras e trabalhemos muito com ele e
você verá como é possível criar interfaces de usuário bonitas com o flexbox, o flexbox no final é a ferramenta no React
Nativo para estruturar seu conteúdo em uma página, para organizar seu conteúdo e você normalmente trabalhará com muitas visualizações,
as quais você também aninhará umas nas outras, de modo que você possa posicionar os elementos da
maneira que quiser, claro,
e isso também é importante, você não basta ter uma visão em seu aplicativo que usa flexbox,
você poderia ter outra visão lá que também usa flexbox e, na verdade, como eu
mencionei, todas as visualizações por padrão usam flexbox e você pode aninhar essas visualizações umas nas outras para que você
posiciona tudo do jeito que você quiser e você também verá isso
neste módulo e, na verdade, eu já estou fazendo isso aqui. Em meus pontos de vista aqui que estão na vista
ao redor, então minhas caixas aqui, eu também uso justificar o conteúdo e alinhar itens para centralizar meus números nessas caixas,
de modo que 1, 2 e 3 estão centralizados lá na horizontal e vertical e isso funciona porque temos o flexbox
ativado por padrão e não podemos desativá-lo pelo caminho e, portanto, eu apenas uso essas duas propriedades aqui para alinhar meu conteúdo
dessa visão ao longo do eixo principal e transversal e aqui, já que não defini nenhum flex especial direção para essa vista, o eixo principal
é de cima para baixo, porque a direção de flexão padrão é coluna e o eixo cruzado é
da esquerda para a direita.
Isso é apenas uma nota lateral.