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 title do 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.