Au 05 - Mobile - React Native - Criando estrutura do subheader - Mestres BEGIN
Neste vídeo, vamos preparar a estrutura base da tela de produtos, seguindo o mock criado no XD. Após estilizar a navegação e cabeçalho na aula anterior, agora focaremos no esqueleto da interface antes de aplicar os estilos.
Componente SubHeader
Criamos um componente SubHeader que funcionará como um sub-cabeçalho abaixo do cabeçalho principal. Sua função principal é permitir a navegação entre:
- Todos os produtos
- Produtos excluídos
Esta não será uma navegação tradicional, mas sim uma renderização condicional do conteúdo.
Estrutura de Componentes
Organizamos os componentes da seguinte forma:
- SubHeader: Contendo os textos e botões de navegação
- CustomButton: Componente reutilizável para os botões
Optamos por criar o CustomButton usando TouchableOpacity ao invés do Button nativo do React Native, pois oferece maior flexibilidade para estilização.
Tipagem com TypeScript
Implementamos interfaces para definir as props dos componentes:
- O CustomButton recebe uma prop
titledo tipo string - Futuramente poderá receber também uma função
onPress
Isso garante type safety e melhor autocompletar no VS Code.
Organização Visual
Dividimos o SubHeader em dois containers principais:
- Container de textos (título e descrição)
- Container de botões (navegação)
Utilizamos React Fragments para agrupar múltiplos elementos sem adicionar nós extras ao DOM.
Próximos Passos
Na próxima aula focaremos em:
- Estilização completa dos componentes
- Efeitos de estado ativo/inativo nos botões
- Implementação da lógica de renderização condicional
- Adição dos espaçamentos conforme o mock do XD
Considerações Finais
Esta estrutura inicial proporciona uma base sólida para nossa tela de produtos. Algumas observações importantes:
- Componentes bem separados facilitam a manutenção e reuso
- A tipagem com TypeScript previne muitos erros comuns
- A estrutura modular permite evoluir cada parte independentemente
- O uso de Fragments mantém o DOM limpo sem sacrificar a organização do código
Embora simples nesta fase, esta estrutura permitirá implementarmos funcionalidades mais complexas nas próximas aulas, como a listagem de produtos e a exclusão/recuperação de itens.
