Módulo 3 INTERMEDIÁRIO

Atividade 11: Expo Router e Telas

Seu aplicativo finalmente vai ter mais de uma página. Mas como viajamos entre elas?

Dica importante: o projeto Expo que você vai criar nesta atividade será o mesmo que você vai continuar usando nas Atividades 12, 13, 14 e 15. Portanto, organize tudo com cuidado, porque este app vai evoluir ao longo das próximas aulas.

Objetivos desta aula

  • Entender a diferença entre Roteamento Web e Roteamento Mobile.
  • Aprender o moderno padrão 'File-based Routing' do Expo Router.
  • Organizar telas reais dentro da pasta app/.

React Navigation vs Expo Router

A principal biblioteca do mundo mobile se chama React Navigation. Historicamente, nós criávamos um arquivo monstruoso chamado routes.js onde precisávamos importar todas as telas e registrá-las manualmente em pilhas gigantescas de código complexo.

Porém, a equipe do Expo criou o Expo Router (que usa o React Navigation por baixo dos panos na verdade), trazendo a magia do Roteamento de Arquivos da Web Moderna para os celulares:

Como funciona o Expo Router?

Com o Expo Router ativado, toda a navegação acontece através de uma pasta especial chamada app/. Todo arquivo javascript que você cria lá dentro se torna automaticamente uma tela do seu celular!

  • O arquivo app/index.js é a sua Tela Inicial (Primeira coisa a abrir).
  • Se você criar o arquivo app/perfil.js, já existe magicamente uma tela chamada "perfil".
  • Se você criar o arquivo app/configuracoes/conta.js, você acaba de criar a tela "conta" dentro do menu de configurações.

Importante: Em projetos locais com Expo Router, a navegação principal deixa de morar em um único App.js e passa a ser organizada pela pasta app/.

Preparando o Projeto Blank para Expo Router

Nos testes desta aula, o projeto foi criado com o comando abaixo e com o template blank:

Terminal 
npx create-expo-app@latest atividade11 --template

Como o template blank vem preparado para começar com App.js, precisamos adaptar o projeto para a metodologia desta apostila, que usa Expo Router e a pasta app/.

1. Instale o Expo Router

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

2. Crie a pasta app/

Dentro dela ficarão as telas do projeto. Para começar, crie pelo menos: 

atividade11/
├── app/
│   ├── _layout.js
│   └── index.js
├── app.json
├── package.json
└── index.js

3. Apague o arquivo App.js

Quando usamos Expo Router, a entrada principal deixa de ser o App.js. As telas passam a nascer dentro da pasta app/.

4. Ajuste o package.json

O ponto principal é trocar a entrada do projeto para o Expo Router: 

{
  "main": "expo-router/entry"
}

5. Ajuste o app.json

Aqui, o ajuste importante é conferir o scheme do app: 

{
  "expo": {
    "name": "atividade11",
    "slug": "atividade11",
    "scheme": "atividade11"
  }
}

6. Crie sua primeira tela

Depois disso, sua tela inicial já pode morar em app/index.js. É exatamente esse modelo que vamos usar no restante da atividade.

Dica prática: se o aluno criou o projeto com template blank e esqueceu de fazer essas adaptações, o erro mais comum é tentar usar expo-router enquanto o projeto ainda está preso ao App.js.

O Componente <Link>

Uma vez que suas páginas existam como arquivos, como viajamos da Index para o Perfil? Simples, usamos o componente <Link> do expo-router. Note no exemplo que a propriedade se chama href.

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

export default function Home() {
  return (
    <View style={styles.container}>
      <Text style={styles.titulo}>Tela Principal</Text>
      
      {/* Botão de Viagem usando Link */}
      <Link href="/perfil" style={styles.botao}>
        <Text style={styles.botaoTexto}>Ir para Meu Perfil -></Text>
      </Link>
      
      <Link href="/configuracoes" style={styles.botao}>
        <Text style={styles.botaoTexto}>Configurações -></Text>
      </Link>

    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  titulo: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
  botao: { backgroundColor: '#3b82f6', padding: 15, borderRadius: 10, margin: 10 },
  botaoTexto: { color: 'white', fontWeight: 'bold' }
});

Em um projeto local criado no seu PC com Expo, essa estrutura funciona normalmente. A comparação com ambientes online serve apenas para reforçar por que, a partir daqui, nosso fluxo principal será o desenvolvimento local.

QUIZ Quiz - Roteamento Básico

Anterior ← Atividade 10.5 Próxima Atividade 12 →