滑動會丟失觸摸的元素

Question

對於我正在構建的應用程序，我在 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, swipePast, 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;