在React Native中使用PanResponder实现拖放和页面滚动（长按）

Question

我正在开发 React Native 应用程序中的一项功能，需要实现拖放功能。当前的实现工作完美，但不支持页面滚动。用户应该能够通过简单地向上或向下滑动视图来滚动页面，而不会意外拖动它。

期望的行为是当用户长按视图（2秒）时，他们可以将组件拖动到所需的位置。用户确实需要抬起手指。按住 2 秒的时间应启用移动并拖动项目，然后一旦手指抬起移动即可释放。

我为此使用 PanResponder。

这是我当前代码的简化版本：

    //separate PanResponder for dragging the entire item
  const dragResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        enableScrolling(false); // Disable scrolling when dragging is activated
      },
      onPanResponderMove: (_, gestureState) => {

        // if (isDraggingEnabled) {
        const newLocation = Math.round(startY.current + gestureState.dy);
        translateY.setValue(newLocation);
      },
      onPanResponderRelease: (_, gestureState) => {
        const newLocation = Math.round(startY.current + gestureState.dy);
        // Animated.spring(translateY, {
        //   toValue: newLocation,
        //   useNativeDriver: false,
        // }).start();

        startY.current = newLocation;
        setStartPosition(newLocation);
        //setDividerColor('blue'); // Revert color back on release
        enableScrolling(true);
        clearTimeout(dragActivationTimeout.current);
        setIsDraggingEnabled(false);
      },
      onPanResponderTerminate: () => {
        //setDividerColor('blue'); // Revert color back on termination
        enableScrolling(true);
        clearTimeout(dragActivationTimeout.current);
        setIsDraggingEnabled(false);
      },
      onPanResponderTerminationRequest: () => false,
      onShouldBlockNativeResponder: () => false,
    })
  ).current;

<Animated.View className='relative h-full'
        style={{
          flex: 1,
          transform: [{ translateY }],
          // ...borderStyle
        }}>
        <Animated.View className='z-50 bg-gray-500/30 rounded-t-md shadow-2xl'
          style={{
            height: animatedHeight,
          }}
          {...dragResponder.panHandlers}
        >
        </Animated.View>
    </Animated.View>

我尝试使用 onPanResponderGrant 设置超时，然后检查该值以移动到 onPanResponderMove 上的新位置，但它似乎不起作用。

有人可以提供一些关于如何实现此功能的指导吗？任何帮助将不胜感激。

Answer 1

我使用‘react-native-gesture-handler’代替PanHandler，并使用activateAfterLongPress(500)在长按500毫秒后激活它