Navegação entre Telas com React Navigation

Até agora, construímos componentes e telas isoladas. Mas um aplicativo de verdade é um conjunto de telas conectadas. Diferente da web, onde temos a tag <a>, no mundo mobile precisamos de um sistema mais robusto para gerenciar essas transições, animações e o histórico de navegação. Para isso, usamos a biblioteca React Navigation.

Instalação e Configuração

A React Navigation não vem instalada por padrão. Precisamos adicioná-la e suas dependências ao nosso projeto. Em um projeto com Expo, o processo é bem simples:

1. Instale a biblioteca principal:

npm install @react-navigation/native

2. Instale as dependências nativas (usando npx expo install para garantir a versão correta):

npx expo install react-native-screens react-native-safe-area-context

Para que a navegação funcione, todo o nosso aplicativo precisa estar "envolvido" por um componente chamado <NavigationContainer>. Pense nele como o cérebro da navegação. Geralmente, você vai colocá-lo no seu arquivo App.js.

Stack Navigator (Navegação em Pilha)

Este é o tipo de navegação mais comum. Pense nele como uma pilha de cartas. Cada vez que você navega para uma nova tela, você "empurra" uma nova carta para cima da pilha. É ideal para fluxos como: Lista → Detalhes.

Instale o navegador de Stack:

npm install @react-navigation/native-stack

Exemplo de uso:

Tab Navigator (Navegação por Abas)

É a famosa barra de abas que vemos na parte inferior de muitos aplicativos (como Instagram). É usada para a navegação principal do app, permitindo que o usuário alterne entre as seções mais importantes.

Instale o navegador de Abas:

npm install @react-navigation/bottom-tabs

Exemplo de uso:

Drawer Navigator (Navegação por Gaveta)

É o menu lateral que desliza a partir da borda da tela. É uma boa alternativa às abas quando você tem muitas seções principais no seu aplicativo. A instalação e o uso são similares aos outros navegadores, e você pode encontrar mais detalhes na documentação oficial da React Navigation.