Módulo 3 INTERMEDIÁRIO

Atividade 15: Passando Dados entre Telas

Como enviar o "ID" do Post selecionado para a Tela de "Detalhes do Post".

🎯 Objetivos desta aula

  • ✓ Usar a propriedade href={{ pathname, params }} no componente Tag <Link>.
  • ✓ Extrair valores carregados via URL (File-Based Routing) localmente com useLocalSearchParams().
  • ✓ Evitar o envio de Objetos pesados pela Rota (Boas práticas).

📦 O Carteiro do Expo Router

A maioria cega dos aplicativos no mundo funcionam com o padrão Master-Detail (Mestre-Detalhe). Uma tela exibe listas de algo (Contatos, Produtos, Músicas) e ao tocar na lista viajamos para a tela de visualização focado naquele item.

Se você tem apenas uma Tela Detalhe no código... Como ela sabe qual contato você clicou para baixar a foto? Exato: passamos "Parâmetros" (Variáveis secretas) através da URL de viagem! Igual na Web!

1. Quem Envia: Colocando a Carta no Correio

Ao invés de passar uma string simples `/perfil` no link do Expo Router, passamos um Objeto completo indicando pra onde ir (pathname) e o que levar na mochila (params):

import { Link } from 'expo-router';

export default function ListaDeAlunos() {
  return (
    <View>
      {/* ⚠️ O href agora é um objeto {{ }} */}
      <Link 
         href={{
           pathname: "/detalhes_aluno", // O nome do arquivo .js alvo
           params: { idAluno: 742, nome: "Joãozinho" } // As variáveis na mochila
         }}
      >
        Ver Notas do Joãozinho
      </Link>
    </View>
  )
}

2. Quem Recebe: Resgatando a Carta

Do outro lado em app/detalhes_aluno.js, nós abrimos a mochila usando a ferramenta especial useLocalSearchParams() do Expo Router.

import { View, Text } from 'react-native';
import { useLocalSearchParams } from 'expo-router';

export default function DetalhesAluno() {
  // 🎒 Abrimos a mochila e desestruturamos as mesmas variáveis que vieram
  const { idAluno, nome } = useLocalSearchParams();

  return (
    <View>
      <Text>Bem-vindo à página de {nome}!</Text>
      <Text>Estamos buscando as notas do aluno ID {idAluno} no Banco de Dados...</Text>
    </View>
  )
}

🚨 Regra de Ouro (Aviso do React): NUNCA passe Objetos inteiros ou Arrays na mochila da rota (Exemplo: Enviar todo o JSON do João com notas, avatar, mãe, etc). O roteador mobile serializa os dados como URL (String). Objetos pesados deixam o app extremamente lento. Passe apenas IDs Simples ou Números, e mande a Tela Destinatária fazer um GET/Fetch novo no Banco de dados lá dentro para reconstruir o objeto.

🎮 Desafios Teóricos Práticos

Como o Snack não lida com Expo Router de arquivos diretamente, preste atenção na sintaxe teórica. O desafio será codificar de cabeça as estruturas!

DESAFIO 1

Modificar 🛠️

  • Olhando para "Quem Envia" acima. Modifique no seu caderno mental: Como seria o código para enviar, no `params`, uma variável chamada isAdmin com o valor booleano true, em vez do nome do João?
DESAFIO 2

Melhorar 🚀

  • Imagine que você esteja na Tela Destinatário. A importação import { useLocalSearchParams } from 'expo-router'; já foi feita.
  • Escreva para você mesmo como resgataríamos a variável `isAdmin` ali dentro e criariamos um Render Condicional: { isAdmin ? <Text>Bem-vindo Chefe</Text> : <Text>Fora daqui!</Text> }.
DESAFIO 3

Criar ✨

Rotas de Roteador programável (router.push).

  • A tag <Link /> é para cliques do usuário. Mas e se um `
  • A função router.push() é igual a tag Link. Ela também recebe string (ex: `router.push('/rota')`) ou objeto!
  • Sabendo disso, crie em seu editor de texto um simulacro de: router.push({ pathname: '/...', params: { ... } }).

📝 Quiz - Passagem de Dados

Anterior ← Atividade 14 Hora do Desafio Avaliação Módulo 3 →