Au 03 - Mobile - React Native - Implementando funcionalidade de navegação - Mestres BEGIN

Neste início de projeto, vamos explorar os fundamentos da navegação em React Native utilizando o React Navigation, a biblioteca recomendada pelo Expo para gerenciamento de rotas em aplicativos móveis.

Por que usar React Navigation?

Embora nosso aplicativo seja simples e teoricamente não exigiria um sistema de navegação complexo, a implementação do React Navigation serve como:

Base de aprendizado para conceitos essenciais
Preparação para escalabilidade futura do projeto
Padronização das melhores práticas do ecossistema React Native

Começaremos com o Stack Navigator, a solução mais simples para navegação entre telas.

Configuração Inicial

Para iniciar, precisamos instalar os pacotes essenciais:

1npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context

Estas dependências fornecem:

Gerenciamento eficiente de telas
Adaptação segura para diferentes formatos de tela (notch, etc.)

Estrutura Básica do Projeto

O coração da navegação é o NavigationContainer, que deve envolver toda a aplicação:

Importado de @react-navigation/native
Fornece o contexto de navegação para todos os componentes filhos
Permite acesso às funções de navegação em qualquer ponto do app

Reorganizamos a estrutura criando uma pasta src para o código fonte, com:

Arquivo routes.tsx para configuração das rotas
Componentes separados por funcionalidade

Conceito de Componentes

No React/React Native:

Componentes são funções que retornam elementos visuais (JSX/TSX)
Seguem convenção de nomes em PascalCase
O App.tsx é o componente raiz da aplicação

A View (similar a uma div no HTML) é o container básico para estruturar a interface.

Continuando nossa implementação, vamos configurar o Stack Navigator para criar o fluxo básico de navegação entre telas.

Estrutura de Componentes

Organizamos nosso projeto com:

src/routes.tsx: Configuração principal das rotas
src/screens/: Pasta contendo todas as telas
App.tsx: Ponto de entrada envolvido pelo NavigationContainer

Os componentes seguem a convenção React de:

Nomes em PascalCase
Exportação padrão (default export)
Retorno de elementos visuais (JSX/TSX)

Configurando o Native Stack Navigator

Instalamos o pacote específico para navegação nativa:

1npm install @react-navigation/native-stack

Diferenças importantes:

Native Stack: Utiliza componentes nativos (melhor performance)
Regular Stack: Implementação em JavaScript (mais customizável)

Criando Telas Básicas

Implementamos duas telas de exemplo:

1// Tela Products 
2 const Products = () => { 
3 return ( 
4 <View> 
5 <Text>Hello from products</Text> 
6 <Button  
7 title="Navigate"  
8onPress={() => navigation.navigate("Products2")}  
9 /> 
10 </View> 
11 ); 
12 };

E uma segunda tela criada inline (apenas para demonstração):

1<Stack.Screen name="Products2" component={() => <Text>Hello from products 2</Text>} />

Observação: A criação inline de componentes não é recomendada em produção devido a problemas de performance.

Propriedades de Navegação

Toda tela registrada no navigator recebe automaticamente:

navigation: Objeto com métodos para navegação
route: Informações sobre a rota atual

O método principal para navegação é:

1navigation.navigate("NomeDaRota")

Personalizando o Header

O Stack Navigator oferece diversas opções de customização:

1options={{title: "Custom Title", headerShown: false, headerStyle: { 
2 backgroundColor: "#f4511e", 
3}, 
4 headerTintColor: "#fff", 
5}}

Podemos esconder o header completamente ou ajustar seu estilo conforme o design do aplicativo.

Tipagem das Rotas

Para garantir segurança e autocompletar inteligente, definimos um tipo que descreve todas as rotas:

1type RootStackParamList = { 
2 Products: undefined; 
3 Details: undefined; 
4};

Este tipo:

Mapeia cada rota disponível
Define os parâmetros que cada rota pode receber
É usado para tipar nosso navigator e todas as telas

Configuração Completa do Navigator

Com a tipagem implementada, nosso arquivo de rotas fica robusto:

1const Stack = createNativeStackNavigator<RootStackParamList>(); 
2 function Routes() { 
3 return ( 
4 <Stack.Navigator> 
5 <Stack.Screen name="Products" component={Products} /> 
6 <Stack.Screen name="Details" component={Details} /> 
7</Stack.Navigator> 
8); 
9}

Benefícios desta abordagem:

Erros são detectados em tempo de desenvolvimento
Autocompletar funciona para nomes de rotas
Parâmetros são validados automaticamente

Tipagem das Telas

Cada tela recebe props tipadas que incluem:

1type ProductsScreenProps = NativeStackScreenProps<RootStackParamList, "Products">;
2 function Products({ navigation }: ProductsScreenProps) { 
3 // ... 
4 }

Isso nos dá acesso a:

navigation: Objeto com métodos como navigate, goBack, etc.
route: Informações sobre a rota atual e parâmetros recebidos

Fluxo de Navegação

Implementamos um fluxo simples entre Products e Details:

1// Navegação de Products para Details 
2 navigation.navigate("Details"); 
3// Navegação de Details de volta para Products 
4 navigation.navigate("Products");

Observações importantes:

O Stack Navigator mantém um histórico de navegação
O botão de voltar é fornecido automaticamente
Podemos customizar completamente este comportamento

Próximos Passos: Implementação Visual

Na próxima aula focaremos em:

Criação do cabeçalho customizado
Implementação do bottom navigation
Trabalho com ícones
Estilização completa baseada no design do XD

Considerações Finais

Esta implementação inicial nos proporcionou:

Base sólida: Estrutura pronta para escalar com novas telas
Segurança: Tipagem que previne erros comuns
Flexibilidade: Facilidade para adicionar complexidade posterior

Boas práticas para evolução do projeto:

Manter tipos em arquivos separados quando o projeto crescer
Evitar componentes inline para melhor performance
Documentar todas as rotas disponíveis e seus parâmetros
Considerar agrupamento lógico de telas relacionadas

Embora tenhamos usado um exemplo simples (Products/Details), estes mesmos conceitos se aplicam a aplicações complexas com dezenas de telas e fluxos de navegação sofisticados. A combinação de React Navigation com TypeScript proporciona uma experiência de desenvolvimento mais produtiva e segura.