Você está aqui: React Native ::: React Native - Componentes de Layout ::: Flexbox

Como usar a propriedade flexDirection do React Native para controlar o alinhamento de componentes em uma View

Quantidade de visualizações: 3721 vezes
Em algumas situações nós precisamos controlar como os componentes que compõem as Views de nossas telas do React Native serão alinhados. Para isso nós podemos usar a propriedade flexDirection do Flexbox, ou seja, do algorítmo Flexbox do CSS3.

A propriedade flexDirection permite os seguintes valores:

column - Este é o valor padrão e alinha os elementos filhos de uma View começando da parte superior do container e indo em direção à parte inferior (from top to bottom).

row - Alinha os elementos filhos de um View da esquerda para a direita (from left to right). Se a quebra de linha estiver habilitada, então uma nova linha de componentes será criada logo abaixo da linha anterior, recomeçando da esquerda para a direita.

column-reverse - Faz o inverso do valor column, ou seja, os componentes filhos serão alinhados começando na parte inferior e indo em direção superior (from bottom to top).

row-reverse - Faz o inverso do valor row, ou seja, os componentes filhos da View serão alinhados da direita para a esquerda (from right to left). Se a quebra de linha estiver habilitada, então uma nova linha de componentes será criada logo abaixo da linha anterior, recomeçando da direita para a esquerda.

Veja uma aplicação React Native completa na qual temos um container View com três botões Button. Note o uso do valor row para a propriedade flexDirection da View:

Este trecho de código ou resolução de exercício faz parte do Super Pack 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos em Java, Python, VisuAlg, Portugol, Delphi, C#, C, C++, VB.NET, Golang, Pascal, Ruby, PHP, e várias outras linguagens.

Aprenda a programar resolvendo problemas do mundo real. Tudo em português, com comentários em português.

Quero Ser Apoiador(a)


Link para compartilhar na Internet ou com seus amigos:

Veja mais Dicas e truques de React Native

Dicas e truques de outras linguagens

E-Books em PDF

E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 36 usuários muito felizes estudando em nosso site.