Como usar o Flexbox no React Native

Flexbox é uma ferramenta CSS que permite criar layouts unidimensionais flexíveis. Ele permite controlar a posição dos elementos em um contêiner para que você tenha mais controle sobre a apresentação de seu conteúdo na tela.

Este tutorial demonstra como usar o flexbox no React Native para criar layouts flexíveis e responsivos. Você aprenderá como posicionar itens filhos de um elemento container usando as propriedades do flexbox.

Comparando o comportamento do Flexbox no desenvolvimento React Native e Web

Se você deseja organizar o conteúdo do elemento container usando flexbox em CSS simples, você precisa usar o Exibição: flexível propriedade.

recipiente { mostrar: flexível; }

Mas com o React Native, você não precisa definir o Exibição: flexível propriedade. Isso ocorre porque o React Native usa o flexbox por padrão para criar layouts.

Aqui estão algumas diferenças que você deve ter em mente sobre como o flexbox se comporta quando usado para alinhar elementos HTML

em aplicativos da web versus como ele se comporta em React Native:

• flexDirection padrão para linha em aplicativos da web, mas o padrão é coluna em React Native.
• alinharConteúdo padrão para esticar em aplicações web e início flexível em React Native.
• flexShrink o padrão é 1 na web e 0 no React Native.

Usando as propriedades do Flexbox no React Native

As propriedades do Flexbox permitem que você descreva como alinhar os elementos filho do elemento container. Você precisa entender essas propriedades para criar layouts complexos que atendam às necessidades do seu aplicativo.

1. Usando a propriedade flex em React Native

O flex propriedade determina como o Visualizar componente preenche a tela. Esta propriedade aceita um valor inteiro maior ou igual a 0. O valor especifica a fração da tela que Visualizar componente deve assumir.

Neste exemplo, você está criando uma tela com uma única visualização do Biblioteca de componentes React Native:

importar Reagir de"reagir"
importar { Folha de estilo, Exibir } de"react-native"
exportarpadrãofunçãoAplicativo() {
retornar (
 <>
cor de fundo: "#A020F0", flex: 1}} /> 
 </>
 )
}

Aqui está a saída:

Aqui você atribuiu 1 como o valor flexível do Visualizar componente. O Visualizar O componente ocupa toda a tela (100%) porque você dividiu o espaço em um grupo.

Vejamos outro exemplo:

importar Reagir de"reagir"
importar { Folha de estilo, Exibir } de"react-native"
exportarpadrãofunçãoAplicativo() {
retornar (

cor de fundo: "#A020F0", flex: 1}} />
cor de fundo: "#7cb48f", flex: 3 }} /> 
 </View>
 )
}

Aqui está o resultado:

Aqui você tem dois Visualizar elementos dentro de outro Visualizar elemento. O primeiro filho é definido para flexível: 1, e o segundo é definido como flexível: 3. Esses valores dividem o espaço entre os dois filhos. O primeiro ocupa 1/4 da tela enquanto o segundo ocupa 3/4 da tela (a tela é dividida em 4 blocos porque 1+3 = 4).

2. Usando a propriedade flexDirection no React Native

Se você observar a captura de tela acima, verá que os elementos filho estão um sobre o outro. Este é o comportamento padrão do flexbox no React Native (flexDirection padrão para o coluna valor).

Você também pode definir o flexDirection propriedade para linha, coluna reversa, e linha inversa. No exemplo a seguir, flexDirection está configurado para linha, portanto, os elementos filhos são colocados lado a lado:

importar Reagir de"reagir"
importar { Folha de estilo, Exibir } de"react-native"
const estilos = StyleSheet.create({
 recipiente: {
 cor de fundo: "#00FF00",
 flexível: 1,
 itens de alinhamento: "Centro",
 flexDirection: "linha",
 },
 quadrado: {
 cor de fundo: "#FF0000",
 largura: 98,
 altura: 98,
 margem: 4,
 },
});
exportarpadrãofunçãoAplicativo() {
retornar (




 </View>
 )
}

Aqui está o resultado:

Configurando o flexDirection para linha inversa coloca as crianças lado a lado, mas inverte a ordem. Da mesma forma, o coluna reversa coloca as crianças umas sobre as outras, mas na sequência oposta à definida pelo coluna.

3. Usando justificarConteúdo em React Native

O justificarConteúdo A propriedade alinha os elementos filho de um contêiner flexbox ao longo do eixo primário. Se o flexDirection está configurado para coluna, então o eixo primário é o eixo vertical. Se estiver definido para linha, então é horizontal.

Os possíveis valores de justificarConteúdosão início flexível, extremidade flexível, Centro, espaço entre, espaço ao redor, e espaço uniformemente.

No exemplo a seguir, flexDirection está definido para linha e justificarConteúdoestá configurado para início flexível:

importar Reagir de"reagir"
importar { Folha de estilo, Exibir } de"react-native"
const estilos = StyleSheet.create({
 recipiente: {
 cor de fundo: "#00FF00",
 flexível: 1,
 justificarConteúdo: "início flexível",
 flexDirection: "linha",
 },
 quadrado: {
 cor de fundo: "#FF0000",
 largura: 98,
 altura: 98,
 margem: 6,
 },
});
exportarpadrãofunçãoAplicativo() {
retornar (




 </View>
 )
}

Aqui está a saída:

Se você alterar o flexDirection para coluna, início flexível será aplicado ao eixo vertical. Assim, as caixas serão empilhadas umas sobre as outras.

Contexto justificarConteúdo para o centro (enquanto o eixo primário é um coluna) centraliza as três caixas filhas.

4. Usando o alignItems no React Native

O alinhar itens A propriedade determina a colocação de itens em um contêiner flexbox ao longo do eixo secundário. Isso é o oposto de justificarConteúdo. Assim como justificarConteúdo cuida do alinhamento vertical, alinhar itens controla o alinhamento horizontal. Os possíveis valores de alinhar itens são início flexível, extremidade flexível, Centro, e linha de base.

No exemplo a seguir, flexDirection está configurado para linha e alinhar itensestá configurado para início flexível:

importar Reagir de"reagir"
importar { Folha de estilo, Exibir } de"react-native"
const estilos = StyleSheet.create({
 recipiente: {
 cor de fundo: "#00FF00",
 flexível: 1,
 itens de alinhamento: "início flexível",
 flexDirection: "linha",
 },
 quadrado: {
 cor de fundo: "#FF0000",
 largura: 98,
 altura: 98,
 margem: 6,
 },
});
exportarpadrãofunçãoAplicativo() {
retornar (





 </View>
 )
}

Aqui está a saída:

Se você definir o flexDirection propriedade para coluna e alinhar itens para Centro, as caixas serão colocadas umas sobre as outras e os elementos filhos serão alinhados ao centro.

5. Usando o alignSelf no React Native

O alinharSelf A propriedade determina como um filho individual deve se alinhar no contêiner. Ele substitui alinhar itens, e os valores possíveis são início flexível, extremidade flexível, Centro, e linha de base.

No exemplo a seguir, definimos um padrão alinhar itens propriedade e substituí-lo usando alinharSelf:

importar Reagir de"reagir"
importar { Folha de estilo, Exibir } de"react-native"
const estilos = StyleSheet.create({
 recipiente: {
 cor de fundo: "#00FF00",
 flexível: 1,
 itens de alinhamento: "Centro", 
 justificarConteúdo: "Centro", 
 flexDirection: "linha",
 },
 quadrado: {
 cor de fundo: "#FF0000",
 largura: 98,
 altura: 98,
 margem: 6,
 },
});
exportarpadrãofunçãoAplicativo() {
retornar (


alinharSelf: "flex-end" }]} />
alinharSelf: "início flexível" }]} /> 
 )
}

Aqui está o resultado:

Outras Propriedades do Flexbox

Existem duas outras propriedades que você pode usar ao criar um layout flexbox no React Native:

• flexWrap: Caso os filhos de um contêiner transbordem para fora dele. Usar flexWrap para especificar se eles devem ser reduzidos em uma única linha ou agrupados em várias linhas. Valores possíveis para flexWrap são nowrap e enrolar.
• brecha: Você usa o brecha propriedade para adicionar lacunas entre os itens de grade no contêiner. Seu valor deve ser do tamanho da lacuna que você deseja entre os itens. Você pode especificar o brecha propriedade usando unidades CSS como px, em ou rem.

Saiba mais sobre o React Native

Agora que você entende o flexbox e sabe como usá-lo em seu aplicativo React Native para criar layouts flexíveis e responsivos, é hora de entrar no âmago da questão do React Native.