O Stack Navigator Permite Criar Uma Pilha De Telas

Como usar o Stack Navigator no React Native

O Stack Navigator é um dos componentes mais usados no ecossistema do React Navigation. Ele permite navegar entre telas empilhadas, onde cada nova tela sobe sobre a anterior. Se você já trabalhou com React Native, provavelmente já esbarrou nele. Vou explicar como funciona na prática, incluindo alguns problemas que eu encontrei e como resolvi. Para começar, você precisa instalar as dependências básicas. Se ainda não tem o React Navigation configurado no projeto, rode os comandos abaixo no terminal do seu projeto: npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context npm install @react-navigation/stack Depois da instalação, configure o navegador de pilha no seu arquivo principal de navegação. Crie uma função de navegação separada para manter o código organizado. Eu costumo colocar isso em um arquivo dedicado chamado Navigation.js.

o stack navigator permite criar uma pilha de telas

A configuração básica é simples. Você importa NavigationContainer, Stack.Navigator e Stack.Screen, define as rotas e pronto. Cada tela recebe um nome único e um componente correspondente. Mas aqui vai algo que ninguém sempre menciona: o comportamento padrão de empilhamento pode causar problemas sérios de performance se você tiver muitas telas na pilha. Cada tela permanece montada na memória até ser explicitamente desmontada. Em projetos reais, eu vi aplicações com mais de 15 telas empilhadas travando em dispositivos Android de entrada. Uma solução prática é usar a propriedade gestureEnabled e ajustar o cardStyleInterpolator. Mas o problema mais chato que eu enfrentei foi com a pilha de navegação persistindo dados de formulários quando o usuário voltava para uma tela anterior. O estado era mantido, sim, mas às vezes valores não desejados permaneciam nos campos. A solução que funcou foi usar um useFocusEffect do React Navigation para limpar o estado toda vez que a tela ganhava foco.

Aqui está um exemplo mínimo de configuração: import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack';

function App() { const Stack = createStackNavigator(); return (

<NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} />

<Stack.Screen name="Detalhes" component={DetalhesScreen} /> </Stack.Navigator> </NavigationContainer>

); } Para navegar entre as telas, use o hook useNavigation. Chame navigation.navigate('NomeDaTela') no evento de clique de um botão. Se precisar passar parâmetros, envie um objeto como segundo argumento e recupere-os via route.params na tela de destino.

Outro ponto importante: o Stack Navigator não é ideal para fluxos complexos de modal sobreposto. Se o seu app precisa de modais com comportamento diferente de empilhamento, considere combinar com o createDrawerNavigator ou usar screenOptions={{ presentation: 'modal' }} em telas específicas. Mas atenção, pois modais em Android podem ter comportamentos de hardware back button diferentes dos esperados. Se você precisa de controle fino sobre a pilha, como remover telas específicas do meio da navegação, use navigation.popToTop() ou navigation.reset() com um novo estado. O método reset é particularmente útil em fluxos de login, onde você quer limpar toda a pilha após o usuário autenticar e redirecionar para a tela principal. Limitações conhecidas incluem a ausência de animações customizadas avançadas sem configurações adicionais e a dificuldade de shared element transitions nativas. Para animações mais elaboradas, muitos desenvolvedores acabam recorrendo a bibliotecas como react-native-reanimated, mas isso aumenta significativamente a complexidade do projeto.

Em resumo, o Stack Navigator resolve o problema básico de navegação entre telas com eficiência razoável. Para apps pequenos e médios, ele basta. Para projetos maiores com requisitos específicos de performance e UX, avalie alternativas ou extensões antes de comprometer a arquitetura.