Header/Cabeçalho Personalizado com Expo Router e React Navigation!
Neste vídeo, aprendemos a criar um cabeçalho personalizado para nossa aplicação React Native usando o Expo e React Navigation.
Implementação Básica
Criamos um componente Header que:
- Recebe as props padrão do Native Stack Navigator
- Exibe um título 'Mestres'
- Calcula automaticamente a altura da StatusBar
- Possui estilos básicos para posicionamento
Botão de Voltar Inteligente
Implementamos um botão de voltar que:
- Aparece apenas quando há navegação possível para trás (canGoBack)
- Utiliza ícones do Material Icons
- Chama a função goBack() do navigation quando pressionado
Personalização Avançada
Demonstramos como estender o header para incluir:
- Campos de busca
- Ícones adicionais
- Estilização customizada
Considerações Finais
Criar um header customizado oferece total controle sobre a experiência do usuário. A abordagem mostrada permite:
- Consistência visual em toda a aplicação
- Comportamento adaptável (como o botão de voltar inteligente)
- Flexibilidade para adicionar novos elementos conforme necessário
Lembre-se que esta é uma base - você pode (e deve) estilizar e adicionar funcionalidades conforme as necessidades específicas do seu projeto.
