Flex

Nesta aula iremos continuar a parte de dimensões, mas agora introduzindo o conceito de Flex.

Conhecendo o Flex

O flex é utilizado para permitir a melhor adaptação do aplicativo a cada dispositivo, ficando consistente em todas as resoluções.

Ainda que utilizar as dimensões de forma proporcional funcione, o flex traz muitas possibilidades a mais.

Utilizando o Flex

Para utilizar o flex nos componentes internos, o componente principal precisa ter sua dimensão bem definida. Isso pode ser feito utilizando o modo absoluto, percentual ou o flex.

Nos componentes internos, iremos substituir os parâmetros de width e height por flex. Esse parâmetro vai receber um número inteiro que representa a proporção do elemento frente aos demais.

Acompanhe a aula e faça as alterações no código. Ao final, seu objeto styles deve ficar como se observa abaixo:

const styles = StyleSheet.create({

  container: {
    backgroundColor: '#0F0',
    flex: 1
  },
  red: {
    backgroundColor: '#F00'
  },
  pequeno: {
    flex: 1
  },
  medio: {
    flex: 2
  },
  grande: {
    flex: 3
  },
  blue: {
    backgroundColor: 'powderblue'
  }

})

Observe que cada componente interno utilizou uma propriedade de tamanho. A propriedade "pequena" utiliza flex: 1, a "média" utiliza flex: 2 e a "grande" usa o flex: 3, isto é, 1+2+3 = 6.

Isso significa que a área, ao utilizar a propriedade "pequena", obterá 1/6 do espaço, a média 2/6 e a grande 3/6.