Flex e Flex Direction

Nesta aula, trabalharemos, com um exemplo prático, o uso do Flex, mais especificamente Flex Direction.

Alinhamento de elementos

O Flex Direction controla como serão dispostos na tela os elementos que possuem tal propriedade. Para essa propriedade podem ser atribuídos os seguintes valores:

• colunm: é o valor padrão e vai organizar os elementos de cima para baixo.
• row: alinha os elementos da esquerda para a direita
• colunm-reverse: é semelhante ao colunm, mas organiza os elementos de forma reversa. Ou seja, os elementos serão organizados de baixo para cima.
• row-reverse: semelhante ao row, porém, alinha os elementos da direita para a esquerda.

Prática de Flex Direction

Acompanhando a aula, teste essa funcionalidade implementando o código abaixo:

import React from 'react';
import { SafeAreaView, Text, StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={[styles.box, styles.cor1]}><Text style={{ color: 'white', fontSize: 30 }}>1</Text></View>
      <View style={[styles.box, styles.cor2]}><Text style={{ color: 'white', fontSize: 30 }}>2</Text></View>
      <View style={[styles.box, styles.cor3]}><Text style={{ color: 'white', fontSize: 30 }}>3</Text></View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    flexDirection: 'row-reverse'
  },
  box: {
    width: 100,
    height: 100
  },
  cor1: {
    backgroundColor: '#00F'
  },
  cor2: {
    backgroundColor: '#05F'
  },
  cor3: {
    backgroundColor: '#0AF'
  },

})