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.

Dica importante: nesta atividade, você vai continuar no mesmo projeto Expo iniciado na Atividade 11. Esse mesmo projeto também será reaproveitado nas Atividades 13, 14 e 15.

🎯 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 com Expo Router

Este exemplo é compatível com desenvolvimento local em Expo no PC. Aqui usamos Expo Router diretamente, porque é esse o fluxo que o aluno vai usar no projeto real. O React Navigation continua existindo por baixo, mas quem nós configuramos no dia a dia é o Expo Router.

Dica: você pode reutilizar a estrutura da Atividade 11. Não precisa criar outro projeto do zero; basta continuar no mesmo app e atualizar os arquivos.

app/_layout.js

// app/_layout.js
import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          title: 'Início',
          headerStyle: { backgroundColor: '#0f172a' },
          headerTintColor: '#ffffff'
        }}
      />
      <Stack.Screen
        name="detalhes"
        options={{ title: 'Mais informações' }}
      />
    </Stack>
  );
}

// app/index.js
import { View, Text, Button, StyleSheet } from 'react-native';
import { useRouter } from 'expo-router';

export default function Home() {
  const router = useRouter();

  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={() => router.push('/detalhes')}
      />
    </View>
  );
}

// app/detalhes.js
import { useRouter } from 'expo-router';

export default function Detalhes() {
  const router = useRouter();

  return (
    <View style={[styles.container, { backgroundColor: '#fed7aa' }]}>
      <Text style={styles.texto}>Detalhes (em cima da pilha!)</Text>
      <Button
        title="Voltar para baixo"
        onPress={() => router.back()}
      />
    </View>
  );
}

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

app/_layout.js

import { Stack } from 'expo-router';

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{
          title: 'Início',
          headerStyle: { backgroundColor: '#0f172a' },
          headerTintColor: '#ffffff'
        }}
      />
      <Stack.Screen
        name="detalhes"
        options={{ title: 'Mais informações' }}
      />
    </Stack>
  );
}

app/index.js

import { View, Text, Button, StyleSheet } from 'react-native';
import { useRouter } from 'expo-router';

export default function Home() {
  const router = useRouter();

  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={() => router.push('/detalhes')}
      />
    </View>
  );
}

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

app/detalhes.js

import { View, Text, Button, StyleSheet } from 'react-native';
import { useRouter } from 'expo-router';

export default function Detalhes() {
  const router = useRouter();

  return (
    <View style={[styles.container, { backgroundColor: '#fed7aa' }]}>
      <Text style={styles.texto}>Detalhes (em cima da pilha!)</Text>
      <Button
        title="Voltar para baixo"
        onPress={() => router.back()}
      />
    </View>
  );
}

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

🎮 Desafios Práticos

Teste o arquivo acima no projeto local e perceba como o Expo Router monta a pilha e o botão de voltar automaticamente quando a estrutura de arquivos está correta.

DESAFIO 1

Modificar 🛠️

No arquivo app/_layout.js, altere o título da tela detalhes de "Mais informações" para um texto bem 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 barra nativa do topo (Header).

No arquivo app/_layout.js, localize as options da tela index e injete propriedades para pintar as letras e o fundo do Header:
Nas opções da tela index, mude de: options={{ title: 'Início' }} PARA options={{ title: 'Início', headerStyle: { backgroundColor: '#f4511e' }, headerTintColor: '#fff' }}.

DESAFIO 3

Criar ✨

Empilhando uma terceira tela com Expo Router.

Crie um novo arquivo app/super-detalhes.js e faça ele retornar uma View verde (#bbf7d0).
No app/_layout.js, registre a tela com <Stack.Screen name="super-detalhes" />.
Depois volte em app/detalhes.js e adicione um botão com router.push('/super-detalhes') para empilhar a nova tela. Depois teste os botões de voltar.

📝 Quiz - Modificando a Pilha

Anterior ← Atividade 11 Próxima Atividade 13 →