Atividade 11: Expo Router e Telas
Seu aplicativo finalmente vai ter mais de uma página. Mas como viajamos entre elas?
🎯 Objetivos desta aula
- ✓ Entender a diferença entre Roteamento Web e Roteamento Mobile.
- ✓ Aprender o moderno padrão 'File-based Routing' do Expo Router.
- ✓ Sair do arquivo App.js único.
🗺️ 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: Ao usar o Expo Router, nós literalmente jogamos fora aquele
arquivo App.js que usávamos no Módulo 1 e 2.
🔗 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.
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' }
});No SnackBar Expo online (o site), muitos templates antigos não aceitam multiplas pastas ou o Expo Router diretamente de forma simples como faríamos no seu PC via VSCode, por isso focaremos na teoria e nos formatos clássicos quando estivermos codando puramente online no futuro.