O que é Stack navigator? | Jancer

O Stack Navigator funciona como um baralho de cartas, onde cada tela é uma carta que pode ser colocada no topo da pilha, permitindo navegação com histórico e a ação de voltar.

Configurações Principais

• initialRouteName: Define qual tela será carregada inicialmente
• screenOptions: Configurações globais para todas as telas do stack

Personalização do Header

Principais opções para customizar o cabeçalho:

1screenOptions: { headerStyle: { backgroundColor: 'black' }, headerTintColor: 'white', headerTitleStyle: { fontWeight: 'bold', fontSize: 20 } }

É possível substituir completamente o header:

1header: () => ( <View> <Text>Header Customizado</Text> </View> )

Configurações por Tela

Três formas de configurar telas individualmente:

1. Usando

   1<Stack.Screen options={{...}} />

2. Via

   1useNavigation

   1setOptions

3. Exportando options estático no arquivo da tela

1// Exemplo com setOptions 
2 useEffect(() => { navigation.setOptions({ headerShown: false }); }, [navigation]);

Considerações Finais

O Stack Navigator oferece uma forma poderosa de gerenciar navegação com histórico em apps React Native. Principais vantagens:

• Transições animadas entre telas
• Gerenciamento automático do histórico
• Alta customização de cabeçalhos
• Integração perfeita com o sistema de navegação do dispositivo

Para soluções mais complexas, consulte a documentação do React Navigation que serve como base para o Expo Router.