Módulo 3 INTERMEDIÁRIO

Atividade 12: Navegação em Pilha (Stack)

Como uma pilha de pratos! Colocamos uma tela por cima da outra, e o botão "Voltar" tira a tela de cima.

🎯 Objetivos desta aula

✓ Entender a metáfora real de "Stack" (Pilha).
✓ Uso da função router.push() para viagens programáticas via código.
✓ Entender o Header Nativado (O famigerado título com setinha no topo da tela).

📚 O que é o "Stack"?

A Navegação em Pilha é o padrão mais comum em aplicativos móveis. Quando você clica num post de Instagram, a tela "Detalhes do Post" desliza por cima do "Feed". Se você clica no perfil do autor, a tela "Perfil" desliza por cima do "Post". Você empilhou 3 telas (Feed > Post > Perfil). O botão nativo de "Voltar" do celular tira a tela "Perfil" e o usuário vê a tela de baixo de novo (Post).

Viajando sem componente <Link>

Na aula passada usamos a Tag Link. Mas e se quisermos viajar após o usuário fazer Login apertando um Button? Usamos lógica! O useRouter nos permite programar a viagem:

import { useRouter } from 'expo-router';

// Dentro do componente...
const router = useRouter();
const fazerLogin = () => {
    router.push('/painel');
}

Substituindo Histórico (Replace)

Ao fazer push('/...', ...) nós "Empilhamos" mantendo a tela anterior viva embaixo. Quando queremos MATAR a tela anterior (ex: Logou não pode apertar Voltar pra ver Login de novo) nós substituímos a pilha principal!

// Mata histórico e abre a painel
router.replace('/painel');

O arquivo mestre: `_layout.js`

O Expo Router procura por um arquivo especial chamado _layout.js dentro das pastas para saber "como empacotar e construir os Cabeçalhos" das telas daquela pasta. É lá que customizamos o títulozinho do topo (A barra cinza do celular).

💻 Exemplo do Roteador Virtual

O Web-Snack não é capaz de recriar Arquivos Virtuais do Expo Router. Abaixo é um código abstrato usando a velha e manual React Navigation apenas para sentirmos a navegação em um arquivo único online:

App.js (RN Clássico)

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// 1. Nossa Primeira Tela
function TelaHome({ navigation }) {
  return (
    <View style={[styles.container, {backgroundColor: '#e0f2fe'}]}>
      <Text style={styles.texto}>Você está na BASE DA PILHA</Text>
      
      <Button 
        title="Empilhar Tela Sobre Mim!" 
        onPress={() => navigation.navigate('Detalhes')} 
      />
    </View>
  );
}

// 2. Nossa Segunda Tela
function TelaDetalhes({ navigation }) {
  return (
    <View style={[styles.container, {backgroundColor: '#fed7aa'}]}>
      <Text style={styles.texto}>Detalhes (Em cima da pilha!)</Text>
      
      {/* Botões do celular já fazem isso, mas programar é legal */}
      <Button 
        title="Pop/Voltar para baixo" 
        onPress={() => navigation.goBack()} 
      />
    </View>
  );
}

const Stack = createNativeStackNavigator();

// 3. Montando a "Caçamba do Empilhador"
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        
        {/* Registrando as telas e seus Títulos lááá em cima no Header */}
        <Stack.Screen 
           name="Home" 
           component={TelaHome} 
           options={{ title: 'Início' }} 
        />
        
        <Stack.Screen 
           name="Detalhes" 
           component={TelaDetalhes} 
           options={{ title: 'Mais informações' }} 
        />

      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  texto: { fontSize: 18, marginBottom: 20, fontWeight: 'bold' }
});

🎮 Desafios Práticos

A arquitetura clássica é feia mas ensina muito. Teste o arquivo acima e note a "setinha para voltar" mágica que a Navigation gerou pra gente de graça no Header!

DESAFIO 1

Modificar 🛠️

O botão de cima da tela na barra cinza nativa (Header) possui textos. Altere o texto do Header da nossa tela Detalhes de "Mais informações" para um texto muito grande como "Super Configurações do Sistema Master Detalhe". O que acontece com a setinha de voltar se faltar espaço?

DESAFIO 2

Melhorar 🚀

Customizando a Navigation Bar (Header).

Lá embaixo nas configurações embutidas do `Options` da tela "Home", injete duas propriedades especiais para pintar as letras e o fundo do Menu:
Nas opções da tela Home, mude de: options={{ title: 'Início' }} PARA options={{ title: 'Início', headerStyle: { backgroundColor: '#f4511e' }, headerTintColor: '#fff' }}.

DESAFIO 3

Criar ✨

O Inception: A terceira tela.

Crie uma nova Função de Tela (Ex: `function TelaSuperDetalhes(...)`). Faça ela retornar uma View de cor verde (`#bbf7d0`).
Lá no final do código, registre ela no Navigator (<Stack.Screen />)
Volte na função TelaDetalhes que nós tínhamos e coloque um Button para viajar para essa nova tela criada, empilhando 3 andares! Depois teste os botões de voltar.

📝 Quiz - Modificando a Pilha

Anterior ← Atividade 11 Próxima Atividade 13 →