Au 06 - Mobile - React Native - Estilizando o subheader - Mestres BEGIN
Nesta aula, exploramos como implementar botões customizados com estados interativos em React Native, focando na experiência do usuário e reutilização de componentes.
Componente CustomButton
Criamos um componente reutilizável com as seguintes características:
- Recebe texto via props para máxima flexibilidade
- Utiliza TouchableOpacity para feedback visual
- Implementa estado ativo/inativo com useState
- Centraliza a estilização com StyleSheet
Gestão de Estado
O controle do estado ativo é feito através de:
- Estado local isActive gerenciado por useState
- Alternância do estado no evento onPress
- Estilos condicionais baseados no estado
Feedback Visual
Principais elementos de interação implementados:
- Efeito de opacidade ao pressionar (TouchableOpacity)
- Mudança de cor quando ativado/desativado
- Transição suave entre estados
Boas Práticas
Lições importantes desta implementação:
- Organização de estilos em StyleSheet
- Componentização para reutilização
- Feedback visual claro para o usuário
- Gestão eficiente de estado
Considerações Finais
Esta abordagem proporciona:
- Melhor experiência do usuário
- Código mais limpo e organizado
- Fácil manutenção e extensão
- Consistência visual na aplicação
