Criando uma Tela de Detalhes de Produto com Carrossel de Imagens Nativo e Seletor de Quantidade no React Native
Oferecer uma experiência visual fluida e intuitiva na jornada de compra é essencial no comércio eletrônico. No ecossistema mobile, a página Tela de Detalhes de Produto com Carrossel de Imagens de produto é o ponto crucial onde o usuário decide pela conversão.
Este artigo analisa a implementação do componente TelaDetalheProduto, construído em React Native, focado na exibição rica de dados recebidos por navegação, manipulação dinâmica de quantidades e criação de um carrossel de fotos responsivo sem depender de bibliotecas externas complexas.
Se você acompanhou nosso artigo anterior sobre a construção de um painel de inventário, verá como esta interface consome as informações enviadas pelo banco. Caso queira garantir o controle de acesso de clientes ou lojistas a esta área, recomendo dar uma olhada no guia de autenticação com Firebase no React Native Expo.
1. Captura de Dados via Rotas (React Navigation)
O componente não realiza requisições diretas ao banco de dados ao ser montado; em vez disso, ele herda as propriedades enviadas da listagem anterior por meio do parâmetro route.
JavaScript
const { produto } = route.params;
Essa abordagem otimiza o consumo de dados da aplicação, pois aproveita o estado já carregado em memória. Caso queira entender melhor como organizar esses fluxos de navegação e exibição em listas fluidas e de alto desempenho, consulte nosso artigo sobre trabalhando com listas e o poder da FlatList no React Native.
2. Construindo um Carrossel de Fotos com ScrollView Nativo
Muitos desenvolvedores recorrem a bibliotecas de terceiros para criar carrosséis de imagens, o que pode inflar o tamanho do pacote do aplicativo. Este código soluciona o problema utilizando apenas propriedades nativas do componente ScrollView:
JavaScript
<ScrollView
horizontal
pagingEnabled
showsHorizontalScrollIndicator={false}
onScroll={aoMudarSlide}
scrollEventThrottle={16}
>
{/* Renderização das imagens com .map */}
</ScrollView>
Atributos Chave para o Funcionamento:
horizontal: Altera a orientação de rolagem de vertical para horizontal.pagingEnabled: Força o componente a travar o scroll em múltiplos da largura da tela, criando o efeito de “páginas” ou slides individuais.scrollEventThrottle={16}: Define a frequência com que o evento de rolagem é disparado (16ms garante uma captura suave a 60fps).
Cálculo Dinâmico do Slide Ativo (Dots)
Para atualizar as pequenas bolinhas indicadoras abaixo da foto, a função aoMudarSlide captura o deslocamento horizontal do toque do usuário (contentOffset.x) e o divide pela largura física do dispositivo (width), arredondando o resultado:
JavaScript
const aoMudarSlide = (event) => {
const scrollOffset = event.nativeEvent.contentOffset.x;
const slide = Math.round(scrollOffset / width);
setImagemAtiva(slide);
};
3. Lógica de Negócio Local: Quantidade e Subtotal
A tela gerencia o estado da compra atual por meio de seletores de incremento e decremento simples, aplicando validações básicas diretamente no estado do componente:
- Controle de Limites: A função
decrementarpossui uma estrutura de controle que impede que o usuário selecione valores menores que 1 (if (quantidade > 1)). O botão de subtração recebe uma estilização visual opaca (botaoContadorDesativado) e a propriedadedisabledpara indicar que a ação está bloqueada. - Cálculo de Subtotal Dinâmico: Em vez de armazenar o valor total em um estado dedicado (o que geraria renderizações redundantes), o código calcula o subtotal diretamente em tempo de execução:JavaScript
const total = isNaN(precoNumerico) ? 0 : precoNumerico * quantidade;Isso garante que toda vez que o estadoquantidadefor alterado, o valor final refletido no rodapé da tela mude em sincronia imediata.
4. Tratamento de Fallbacks e Dados Opcionais
O código foi arquitetado com foco em resiliência (evitando quebras ou telas em branco por falta de dados). Duas lógicas se destacam:
Mecanismo de Fallback para Fotos
O componente espera até 3 fotos diferentes. Se o administrador que cadastrou o produto forneceu apenas a imagem principal, o array de fotos faz uma cópia inteligente dela para as posições seguintes:
JavaScript
const fotos = [
produto.Foto,
produto.Foto2 || produto.Foto,
produto.Foto3 || produto.Foto,
];
Isso garante que o carrossel continue navegável e visualmente idêntico, mesmo sem fotos adicionais.
Cálculo Dinâmico de Desconto
Assim como visto em telas de administração avançadas, se o campo Desconto por porcentagem estiver ausente do banco, o componente calcula a taxa de economia na hora, comparando o ValorNormal ao Preço final e injetando a badge correspondente na imagem do produto.
Se o seu objetivo futuro for expandir este fluxo e anexar fotos tiradas diretamente pela câmera do cliente (por exemplo, em uma aba de avaliações do produto), vale ler o tutorial sobre como criar uma tela de perfil completa no React Native com Firebase, AsyncStorage e upload de foto para aprender a lidar com manipulação binária de arquivos de imagem.
5. 📚 Glossário de Comandos Utilizados
⚛️ React & React Native
Dimensions.get('window'): Fornece as dimensões físicas da tela do dispositivo (largura e altura). Essencial para calcular o tamanho exato de elementos responsivos que ocupam a tela toda.SafeAreaView: Componente que protege o conteúdo de ser cortado por interferências físicas da tela do celular, como o notch (câmera frontal) ou a barra de navegação inferior do iOS.pagingEnabled: Uma propriedade exclusiva de componentes de rolagem que faz o scroll avançar de página em página em vez de rolar livremente.scrollEventThrottle: Define a taxa de amostragem dos eventos de scroll. Controla o quão frequentemente o aplicativo escuta o movimento do dedo na tela.Alert.alert: Dispara uma caixa de diálogo padrão do sistema operacional, utilizada aqui com ações personalizadas no encerramento da compra.
Código Base da Tela Detalhe do Produto
Painel de Administração em Tempo Real CRUD com React Native e Firebase Firestore
Conclusão
O componente TelaDetalheProduto demonstra como recursos nativos bem aproveitados geram ótimas experiências visuais e reduzem o peso de dependências no projeto. Através de cálculos baseados no deslocamento do scroll e formatações matemáticas robustas, a tela atua como uma interface estável e profissional na ponta final do seu e-commerce.
Compartilhe:
Publicar comentário