React Native Flexbox

Um componente pode especificar o layout de seus filhos usando o algoritmo flexbox. O Flexbox foi projetado para fornecer um layout consistente em diferentes tamanhos de tela.
Você normalmente usará uma combinação de flexDirection, alignItems e
justifyContent para alcançar o layout certo.

O Flexbox funciona da mesma maneira no React Native e no CSS na Web, com algumas exceções. Os padrões são diferentes, com o flexDirection padrão em column vez de row e o flex parâmetro suportando apenas um único número.

Flex

flex definirá como seus itens serão “preenchidos” sobre o espaço disponível ao longo do seu eixo principal. O espaço será dividido de acordo com a propriedade flex de cada elemento.

No exemplo a seguir, as visualizações vermelha, amarela e verde são todas crianças na visualização de contêiner flex: 1 configurada. A exibição em vermelho usa flex: 1, a exibição em amarelo flex: 2 e a exibição em verde flex: 3. 1 + 2 + 3 = 6, o que significa que a visualização em vermelho ficará 1/6 do espaço, o amarelo 2/6 do espaço e o verde 3/6 do espaço.

Direção Flex

flexDirection controla a direção na qual os filhos de um nó são dispostos. Isso também é chamado de eixo principal . O eixo transversal é o eixo perpendicular ao eixo principal ou o eixo no qual as linhas de disposição são dispostas.

• row Alinhe os filhos da esquerda para a direita. Se o agrupamento estiver ativado, a próxima linha começará sob o primeiro item à esquerda do contêiner.
• column( valor padrão ) Alinhar filhos de cima para baixo. Se o agrupamento estiver ativado, a próxima linha começará no primeiro item esquerdo na parte superior do contêiner.
• row-reverse Alinhe os filhos da direita para a esquerda. Se o empacotamento estiver ativado, a próxima linha começará sob o primeiro item à direita do contêiner.
• column-reverse Alinhe os filhos de baixo para cima. Se o agrupamento estiver ativado, a próxima linha começará no primeiro item esquerdo na parte inferior do contêiner.

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

Direção do layout

A direção do layout especifica a direção na qual filhos e texto em uma hierarquia devem ser dispostos. A direção do layout também afeta a que borda starte se end refere. Por padrão, o React Native estabelece com a direção do layout LTR. Neste modo, start refere-se à esquerda e end refere-se à direita.

• LTR( valor padrão ) Texto e filhos são dispostos da esquerda para a direita. Margem e preenchimento aplicados no início de um elemento são aplicados no lado esquerdo.

• RTL Texto e filhos são dispostos da direita para a esquerda. Margem e preenchimento aplicados no início de um elemento são aplicados no lado direito.

  Justificar conteúdo

  justifyContent descreve como alinhar os filhos no eixo principal do contêiner. Por exemplo, você pode usar essa propriedade para centralizar um filho horizontalmente em um contêiner com flexDirection definido como row ou verticalmente em um contêiner com flexDirection definido como column.

• flex-start( valor padrão ) Alinhe os filhos de um contêiner ao início do eixo principal do contêiner.

• flex-end Alinhe os filhos de um contêiner no final do eixo principal do contêiner.

• center Alinhe os filhos de um contêiner no centro do eixo principal do contêiner.

• space-between Espaço uniforme das crianças no eixo principal do contêiner, distribuindo o espaço restante entre as crianças.

• space-around Espaço uniforme das crianças no eixo principal do contêiner, distribuindo o espaço restante ao redor das crianças. Comparado ao space-betweenuso space-around, o espaço será distribuído para o início do primeiro filho e o fim do último filho.

• space-evenly Distribuído uniformemente dentro do contêiner de alinhamento ao longo do eixo principal. O espaçamento entre cada par de itens adjacentes, a borda inicial principal e o primeiro item, e a borda final principal e o último item, são exatamente iguais.
  

import React, { Component } from 'react';
import { View } from 'react-native';

export default class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

Alinhar itens

alignItems descreve como alinhar os filhos ao longo do eixo transversal de seu contêiner. Alinhar itens é muito semelhante, justifyContent mas, em vez de aplicar ao eixo principal, alignItems aplica-se ao eixo transversal.

• stretch( valor padrão ) Estique os filhos de um contêiner para corresponder ao height eixo transversal do contêiner.
• flex-start Alinhe os filhos de um contêiner ao início do eixo transversal do contêiner.
• flex-end Alinhe os filhos de um contêiner ao final do eixo transversal do contêiner.
• center Alinhe os filhos de um contêiner no centro do eixo transversal do contêiner.
• baseline Alinhe os filhos de um contêiner ao longo de uma linha de base comum. Os filhos individuais podem ser definidos como a linha de base de referência para seus pais.

Para o stretch ter efeito, os filhos não devem ter uma dimensão fixa ao longo do eixo secundário. No exemplo a seguir, a configuração alignItems: stretch não faz nada até que ela width: 50 seja removida dos filhos.

import React, { Component } from 'react';
import { View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'stretch',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{height: 50, backgroundColor: 'skyblue'}} />
        <View style={{height: 100, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

Alinhar a si próprio

alignSelftem as mesmas opções e efeitos, alignItems mas, em vez de afetar os filhos em um contêiner, você pode aplicar essa propriedade a um único filho para alterar seu alinhamento no pai. alignSelf substitui qualquer opção definida pelo pai com alignItems.

Alinhar conteúdo

alignContent define a distribuição de linhas ao longo do eixo transversal. Isso só tem efeito quando itens são agrupados em várias linhas usando flexWrap.

• flex-start( valor padrão ) Alinhe as linhas quebradas ao início do eixo transversal do contêiner.
• flex-end Alinhe as linhas quebradas no final do eixo transversal do contêiner.
• stretch linhas quebradas para coincidir com a altura do eixo transversal do contêiner.
• center Alinhe as linhas quebradas no centro do eixo transversal do contêiner.
• space-between Espace as linhas uniformemente ao longo do eixo principal do contêiner, distribuindo o espaço restante entre as linhas.
• space-around Espace as linhas uniformemente ao longo do eixo principal do contêiner, distribuindo o espaço restante ao redor das linhas. Comparado ao espaço entre o uso do espaço ao redor, o espaço será distribuído no início das primeiras linhas e no final da última linha.

Flex Wrap

A flexWrap propriedade é definida em contêineres e controla o que acontece quando os filhos excedem o tamanho do contêiner ao longo do eixo principal. Por padrão, os filhos são forçados a uma única linha (que pode reduzir elementos). Se o agrupamento for permitido, os itens serão agrupados em várias linhas ao longo do eixo principal, se necessário.

Quando as linhas de quebra automática alignContent podem ser usadas para especificar como as linhas são colocadas no contêiner.

Base flexível, crescer e encolher

• flexGrow descreve como qualquer espaço dentro de um contêiner deve ser distribuído entre seus filhos ao longo do eixo principal. Depois de organizar seus filhos, um contêiner distribuirá qualquer espaço restante de acordo com os valores de crescimento flex especificados por seus filhos.O flexGrow aceita qualquer valor de ponto flutuante> = 0, com 0 sendo o valor padrão. Um contêiner distribuirá qualquer espaço restante entre seus filhos, ponderado pelo valor de crescimento flexível da criança.
• flexShrink descreve como reduzir os filhos ao longo do eixo principal, caso o tamanho total dos filhos exceda o tamanho do contêiner no eixo principal. O encolhimento flexível é muito semelhante ao cultivo flexível e pode ser pensado da mesma maneira se qualquer tamanho excedente for considerado como espaço restante negativo. Essas duas propriedades também funcionam bem juntas, permitindo que as crianças cresçam e encolhem conforme necessário.A contração flexível aceita qualquer valor de ponto flutuante> = 0, sendo 1 o valor padrão. Um contêiner encolherá seus filhos ponderados pelo valor de encolhimento flexível da criança.
• flexBasis é uma maneira independente de eixo de fornecer o tamanho padrão de um item ao longo do eixo principal. Definir a base flexível de um filho é semelhante ao definir o widthfilho, se o pai for um contêiner flexDirection: rowou definir o heightfilho, se o pai for um contêiner flexDirection: column. A base flexível de um item é o tamanho padrão desse item, o tamanho do item antes de qualquer cálculo de aumento e redução de flexão.

Largura e altura

A width propriedade no Yoga especifica a largura da área de conteúdo do elemento. Da mesma forma, a propriedade height especifica a height área de conteúdo do elemento.
Ambos widthe height podem assumir os seguintes valores:

• auto É o Valor padrão , React Native, que calcula a largura / altura do elemento com base em seu conteúdo, sejam outros filhos, texto ou imagem.
• pixels Define a largura / altura em pixels absolutos. Dependendo de outros estilos definidos no componente, essa pode ou não ser a dimensão final do nó.
• percentage Define a largura ou a altura em porcentagem da largura ou altura do pai ou mãe, respectivamente.

Layout absoluto e relativo

O position tipo de um elemento define como ele é posicionado dentro de seu pai.

relative( valor padrão ) Por padrão, um elemento é posicionado relativamente. Isto significa que um elemento está posicionado de acordo com o fluxo normal do layout, e, em seguida, desviado em relação a essa posição com base nos valores de top, right, bottom, e left. O deslocamento não afeta a posição de nenhum elemento irmão ou pai.

absolute Quando posicionado absolutamente, um elemento não participa do fluxo normal do layout. Em vez disso, é apresentado independentemente de seus irmãos. A posição é determinada com base no top, right, bottom, e left valores.

(Texto traduzido da documentação original.)