Direções e Alinhamentos

As propriedades abaixo afetam como os nós internos de um componente são ajustados ao seu conteúdo. São muito parecidas com as propriedades flex do CSS. Veja abaixo quais são:

Direções

Esta propriedade determina um eixo de alinhamento dos componentes filhos. Valores em linha formam um eixo horizontal, valores em coluna formam um eixo vertical.

Valores aceitos

• Em linha: row
• Em coluna: column
• Em linha reversa: row-r
• Em coluna reversa: column-r

Modo de uso

<View direction="column">
    ...objetos dentro esta view ficam na vertical, de cima para baixo.
</View>

Alinhamento

Valores de alinhamento fazem os objetos se comportarem perpendicularmente ao eixo descrito acima.

Valores aceitos

• Objetos no centro do eixo: center
• Objetos alinhados ao início do sentido de leitura: start
• Objetos alinhados ao final do sentido de leitura: end

Modo de uso

<View direction="column" align="ai-center">
    ...objetos aqui ficaram alinhados ao centro do eixo vertical
</View>

Justificação

Valores aceitos

• Todos os objetos centralizados: center
• Todos os objetos ajustados ao sentido da leitura: start
• Todos os objetos ajustados ao sentido inverso da leitura: end
• Objetos justificados no espaçamento total: between

Modo de uso

<View direction="row" justify="between">
...objetos aqui ficaram ajustados a largura do pai, justificados
</View>