Navegando entre rotas - Dominando a Componente Link e o Hook useRouter!

Neste tutorial, exploramos como implementar navegação entre telas em um aplicativo React Native usando o Expo Router. O sistema de navegação é baseado em arquivos, onde cada arquivo dentro do diretório 'app' se torna uma rota automaticamente.

Criando Rotas

Para adicionar novas telas ao aplicativo:

• Crie arquivos no diretório 'app' (ex: about.tsx para a rota /about)
• Organize telas relacionadas em subdiretórios (ex: app/pedidos/carrinho.tsx)
• Cada arquivo deve exportar um componente React que renderiza o conteúdo da página

Componente Link

Para navegação declarativa entre telas:

1import { Link } from 'expo-router'; 
2<Link href='/about'><Text>Sobre</Text></Link>

O Link pode envolver qualquer componente interativo. Quando usado com componentes como Pressable, é necessário adicionar a propriedade asChild para propagar corretamente os eventos de toque.

Navegação Programática

Para navegar sem interação direta do usuário:

1import { useRouter } from 'expo-router'; 
2 const router = useRouter(); setTimeout(() => { router.push('/pedidos/carrinho'); }, 5000);

Métodos de Navegação

• push: Adiciona uma nova tela à pilha de navegação (permite voltar)
• replace: Substitui a tela atual (não permite voltar)
• back: Volta para a tela anterior
• setParams: Atualiza parâmetros da rota atual (útil para rotas dinâmicas)

Próximos Passos

Nas próximas aulas, exploraremos rotas dinâmicas e passagem de parâmetros entre telas, recursos essenciais para criar aplicativos mais complexos e interativos.