Na prática: Navegadores aninhados

Neste tutorial, vamos aprender a alinhar um Stack Navigator dentro de um Tab Navigator em um aplicativo React Native com Expo Router.

Contexto do Projeto

No projeto atual, já temos um Tab Navigator com três telas registradas, incluindo uma tela de perfil oculta. Agora, queremos adicionar uma tela de edição de perfil que não apareça como uma aba no menu inferior.

Criando a Tela de Edição

Passos para implementar:

1. Criar um novo arquivo edit.tsx com um componente simples (ex: 'Hello from Edit Profile').
2. Mover as telas de perfil (profile.tsx e edit.tsx) para uma pasta chamada profile.
3. Renomear profile.tsx para index.tsx (tela inicial do perfil).

Configurando o Stack Navigator

Dentro da pasta profile, criar um arquivo _layout.tsx para definir um Stack Navigator:

1<Stack><Stack.Screen name='index'/><Stack.Screen name='edit' /></Stack>

Isso permite que a tela de edição seja acessível apenas via navegação interna, sem aparecer no Tab Navigator.

Navegação entre Telas

Na tela de perfil (index.tsx), adicionar um link para a edição:

1<Link href='/profile/edit'>Editar Perfil</Link>

Ao clicar, o Stack Navigator exibirá a tela de edição com um cabeçalho padrão (incluindo botão de voltar).

Considerações Finais

Alinhar Stack Navigator com Tab Navigator oferece vantagens como:

• Controle preciso de quais telas aparecem no menu inferior.
• Otimização de performance (telas são carregadas sob demanda).
• Flexibilidade para personalizar cabeçalhos e fluxos de navegação.

Experimente adaptar essa estrutura para outros fluxos, como configurações ou detalhes de itens, sempre mantendo a organização do projeto.