Layout Responsivo React Native Flexbox: Como estruturar telas profissionais

Você já se perguntou como os grandes aplicativos conseguem manter o cabeçalho no topo e o conteúdo organizado, independentemente do tamanho do celular? A resposta está no layout responsivo react native Flexbox.

Neste artigo, vamos aplicar a lógica de “caixas” para criar um layout dividido em três sessões (Topo, Meio e Inferior) utilizando Componentes, que são peças de código reutilizáveis.

“Antes de começarmos a desenhar nosso layout, certifique-se de que seu ambiente de desenvolvimento já está configurado. Com as ferramentas prontas, vamos ao código!”

🧱 O Conceito de Proporção com flex

No React Native, o atributo flex: 1 diz ao elemento para ocupar todo o espaço disponível. Se dividirmos o container em três e dermos flex: 1 para cada um, a tela será fatiada em três partes iguais.

🛠️ Mão na Massa: Estruturando o App

Para manter o projeto organizado (uma competência socioemocional importante de autogestão), dividimos nosso código em arquivos menores na pasta components.

1. Os Componentes de Imagem (Exemplo: banner.js)

Criamos componentes simples que retornam uma imagem. Note que corrigimos o atributo width (largura) para que a imagem apareça corretamente.

JavaScript

import React from 'react';
import { Image, StyleSheet } from 'react-native';

export default function Banner1() {
  return (
    <Image 
      source={require('../assets/parque-max-feffer.jpg')} 
      style={styles.imagem}
    />
  );
}

const styles = StyleSheet.create({
  imagem: {
    width: '100%', // Ocupa a largura total da seção
    height: '100%', // Ocupa a altura total definida pelo flex
    resizeMode: 'cover' // Ajusta a imagem sem distorcer
  }
});

2. O Arquivo Principal (App.js)

Aqui é onde a “mágica” do Flexbox acontece. Vamos importar nossos componentes e definir as regras de layout.

JavaScript

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

// Importando nossos componentes personalizados
import Titulo from './components/titulo';
import Banner1 from './components/banner';
import Banner2 from './components/banner2';

export default function App() {
  return (
    <View style={estilos.caixa}>
      {/* Seção Superior */}
      <View style={estilos.topo}><Titulo /></View>
      
      {/* Seção Central */}
      <View style={estilos.meio}><Banner1 /></View>
      
      {/* Seção Inferior */}
      <View style={estilos.inferior}><Banner2 /></View>
    </View>
  );
}

const estilos = StyleSheet.create({
  caixa: {
    flex: 1, // Container principal que abraça a tela toda
  },
  topo: {
    flex: 1,
    backgroundColor: '#000', // Fundo preto para o título
    justifyContent: 'center',
    alignItems: 'center'
  },
  meio: {
    flex: 1,
    backgroundColor: '#fff', // Destaque para o banner central
    justifyContent: 'center',
    alignItems: 'center'
  },
  inferior: {
    flex: 1,
    backgroundColor: '#ff0000', // Fundo vermelho para a base
    justifyContent: 'center',
    alignItems: 'center'
  },
});

📐 Por que usar essa estrutura?

1. Manutenção: Se precisar trocar a imagem do topo, você mexe apenas no arquivo titulo.js.
2. Organização Visual: O Flexbox garante que, mesmo que o celular seja um tablet ou um smartphone pequeno, as três divisões estarão lá, proporcionais.
3. Performance: Componentes menores são mais fáceis para o React processar.

⬅️ Artigo Anterior: Preparando o Terreno: Configurando seu Ambiente Mobile

➡️ Próximo Passo: Interatividade e Eventos: Fazendo seu App responder ao toque