Como Criar Tab Navigator?

Neste tutorial, vamos aprender a implementar um navegador por abas (Tab Navigator) usando o Expo Router, integrando-o com um Stack Navigator para criar uma estrutura de navegação robusta em aplicações React Native.

Estrutura Básica do Projeto

Começamos criando uma estrutura de diretórios especial:

• (tabs)/ - Diretório entre parênteses para agrupar rotas
• layout.tsx - Arquivo principal para configurar o Tab Navigator
• index.tsx - Tela inicial obrigatória (home)
• settings.tsx - Tela secundária de exemplo

Os diretórios entre parênteses são uma convenção do Expo Router para agrupar rotas sem incluir o nome do grupo na URL.

Configurando o Layout Principal

No arquivo layout.tsx raiz, definimos um Stack Navigator que renderizará nosso Tab Navigator:

1import { Stack } from "expo-router";
2export default function Layout() {
3 return ( <Stack>
4 <Stack.Screen name="(tabs)" options={{ headerShown: false }} /> 
5</Stack> );}

Esta configuração oculta o cabeçalho padrão do Stack Navigator para nossas telas de abas.

Criando o Tab Navigator

Dentro do diretório (tabs), criamos um novo layout.tsx específico para as abas:

1import { Tabs } from "expo-router";
2 import { FontAwesome } from "@expo/vector-icons";
3export default function TabsLayout() {
4 return ( <Tabs>
5 <Tabs.Screen
6 name="index"
7 options={{ title: "Início",
8 tabBarIcon: ({ color }) => ( <FontAwesome name="home"
9 size={24}
10 color={color}
11 /> ), }}
12 /> 
13<Tabs.Screen name="settings"
14 options={{ title: "Configurações",
15 tabBarIcon: ({ color }) => ( <FontAwesome
16 name="cog"
17 size={24}
18 color={color}
19 /> ), }} /> </Tabs> );}

Observações Importantes

Alguns pontos cruciais para o funcionamento correto:

• Arquivo index obrigatório: O Expo Router requer um arquivo index.tsx dentro do grupo de abas
• Ícones: Podem ser personalizados usando qualquer biblioteca de ícones
• Navegação: As abas são automaticamente sincronizadas com a URL (no caso do Expo Web)

A estrutura resultante cria uma barra de navegação inferior com ícones e títulos, permitindo alternar entre as telas principais do aplicativo.

Considerações Finais

O Tab Navigator do Expo Router oferece uma solução elegante para navegação por abas:

• Integração perfeita: Funciona bem com outros navegadores (Stack, Drawer)
• Personalização: Permite ajustar aparência e comportamento das abas
• Performance: As telas são mantidas em memória quando não ativas

Para projetos mais complexos, considere:

• Adicionar indicadores de estado (notificações) nos ícones
• Implementar lazy loading para telas menos acessadas
• Personalizar a animação de transição entre abas
• Adicionar tratamento especial para dispositivos com notch

Esta abordagem simplifica significativamente a criação de interfaces com múltiplas seções principais, mantendo uma experiência de usuário consistente e intuitiva. O Expo Router abstrai grande parte da complexidade, permitindo focar na experiência do usuário final.