1. Diagnóstico de Problemas de Instalação e Dependências

A instalação do React Native Deck Swiper pode apresentar conflitos de dependências. Verifique primeiro os requisiots do ambiente:

• Versão do React Native ≥ 0.49.1
• Versão do React ≥ 16.0.0-beta.5
• react-native-view-overflow instalado

Se ocorrerem erros, examine as peerDependencies no package.json. Reinstale com:

npm install react-native-deck-swiper --save
# ou
yarn add react-native-deck-swiper

2. Resolução de Deslizamento Irresponsivo ou Truncado

Quando o deslizamento dos cartões não é fluido, verifique as configurações de gestos. Assegure que as propriedades estejam definidas corretamente:

<Swiper
  swipeHabilitado={true}
  swipeVertical={true}
  limiteHorizontal={larguraTela / 4}
  limiteVertical={alturaTela / 5}
  // outras configurações...
/>

Passos para diagnóstico:

1. Confirme a configuração do PanResponder
2. Valide os limites de gestos
3. Verifique os estilos do contêiner dos cartões
4. Identifique conflitos com outros gestos

3. Ajuste de Efeitos de Empilhamento Anormais

O empilhamento é uma característica central. Se o efeito estiver incorreto, ajuste estes parâmetros chave:

• quantidadePilha: controla quantos cartões são exibidos
• espacamentoPilha: espaço entre cartões
• escalaPilha: fator de escala dos cartões
• exibirSegundoCartao: visibilidade do segundo cartão

No arquivo principal do componente, o método de animação de empilhamento pode conter a origem do problema.

4. Tratamento de Renderização Personalizada de Cartões

A renderização customizada é uma funcionalidade avançada. Para resolver problemas de renderização:

Uso correto da propriedade de renderização:

renderizarCartao={(cartao, indice) => (
  <View estilo={estilos.cartaoCustomizado}>
    <Text>{cartao.titulo}</Text>
    <Image fonte={{uri: cartao.imagem}} />
  </View>
)}

Erros comuns:

• Omissão do parâmetro do cartão
• Estilos do cartão sem flex: 1
• Tratamento incorreto do índice do cartão

5. Adaptação de Layout Responsivo

Para garantir exibição correta em diferentes dispositivos:

1. Uso da API Dimensions: o componente lida automaticamente com tamanhos de tela
2. Ajuste de margens: através de margemHorizontalCartao e margemVerticalCartao
3. Tratamento de rotação: o componente inclui tratamento interno para mudanças de dimensão

6. Restrições de Direção de Deslizamento e Callbacks

O componente suporta deslizamento em quatro direções, cada uma controlável individualmente:

<Swiper
  desabilitarDeslizeEsquerda={false}
  desabilitarDeslizeDireita={false}
  desabilitarDeslizeCima={true}
  desabilitarDeslizeBaixo={true}
  aoDeslizarEsquerda={(indiceCartao) => registrar('Deslizou para esquerda')}
  aoDeslizarDireita={(indiceCartao) => registrar('Deslizou para direita')}
/>

7. Personalização de Estilos de Sobreposição

Os rótulos de sobreposição são essenciais para a experiência. Se não forem exibidos corretamente:

Verifique a configuração dos rótulos:

rotulosSobreposicao={{
  esquerda: {
    titulo: 'RECUSAR',
    estilo: {
      rotulo: {
        backgroundColor: 'vermelho',
        cor: 'branco',
        tamanhoFonte: 24
      }
    }
  },
  direita: {
    titulo: 'CURTIR',
    estilo: {
      rotulo: {
        backgroundColor: 'verde',
        cor: 'branco',
        tamanhoFonte: 24
      }
    }
  }
}}

8. Técnicas de Otimização de Desempenho

O componente tem bom desempenho, mas com muitos cartões, considere:

1. Uso de keyExtractor: forneça identificadores únicos para cada cartão
2. Ajuste da quantdiade de empilhamento: evite renderizar muitos cartões simultaneamente
3. Otimização do componente do cartão: utilize PureComponent ou React.memo
4. Controle da complexidade das animações: simplifique estilos e animações

9. Erros Comuns e Soluções

10. Funcionalidades Avançadas e Melhores Práticas

Modo de repetição infinita:

<Swiper
  repetirInfinitamente={true}
  cartoes={dados}
  // outras configurações...
/>

Funcionalidade de retorno por deslize:

<Swiper
  retornarCartaoPorDeslize={true}
  // outras configurações...
>
  <Button aoPressionar={() => esteComponenteSwiper.retornarCartao()} titulo="Voltar" />
</Swiper>

Parâmetros de animação personalizados:

• duracaoAnimacaoDeslize: duração da animação de deslize
• friccaoResetCartaoSuperior: fricção de reset do cartão superior
• tensaoAnimacaoEmpilhamento: tensão da animação de empilhamento