滑动丢失触摸元素

问题描述

对于我正在构建的 app，我在 React Native 中使用 Animated 和 PanResponder，下面的代码有效，但是，在滑动时，需要非常稳定的手。

你知道我怎样才能让它更宽容吗？

这是一个截屏视频： https://giphy.com/gifs/2wGSCsPGJwYcsWsRc4

import React,{ useRef,useEffect } from 'react';
import PropTypes from 'prop-types';
import { useNavigation } from '@react-navigation/native';
import { Animated,PanResponder } from 'react-native';
import Emoji from './emoji';

const animStyle = {
  zIndex: 1,elevation: 1,};

const animConfig = {
  useNativeDriver: false,};

function Swipe({ emoji,swipePast,clubId }) {
  const { navigate } = useNavigation();
  const pan = useRef(new Animated.ValueXY()).current;
  const onPanResponderMove = useRef(Animated.event([null,{ dx: pan.x }],animConfig)).current;
  useEffect(() => {
    function onPan({ x }) {
      if (x > swipePast) {
        pan.resetAnimation();
        navigate('Done',{ clubId });
      }
    }
    pan.addListener(onPan);
    return () => pan.removeAllListeners();
  },[clubId,pan,navigate]);
  const { panHandlers } = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: () => true,onPanResponderMove,onPanResponderRelease: () => {
        Animated.spring(pan,{
          ...animConfig,toValue: { x: 0,y: 0 },}).start();
      },}),).current;
  return (
    <Animated.View
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...panHandlers}
      style={{ ...animStyle,transform: [{ translateX: pan.x }] }}
    >
      <Emoji emoji={emoji} />
    </Animated.View>
  );
}

Swipe.propTypes = {
  emoji: PropTypes.string.isRequired,swipePast: PropTypes.number.isRequired,clubId: PropTypes.string.isRequired,};

export default Swipe;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）