React Native基于PanResponder实现带页面滚动的长按拖拽功能

核心思路 #

要实现普通滑动允许页面滚动，长按2秒后激活拖拽，关键是延迟激活拖拽逻辑，在拖拽未激活时不拦截滚动事件。之前的问题在于一开始就拦截了所有触摸事件，导致滚动被阻止，且超时逻辑未正确关联拖拽状态。

修改后的完整实现代码 #

import React, { useRef, useState } from 'react';
import { Animated, PanResponder, View, ScrollView, Text } from 'react-native';

const DraggableComponent = () => {
  const translateY = useRef(new Animated.Value(0)).current;
  const startY = useRef(0);
  const [isDragActive, setIsDragActive] = useState(false);
  const dragActivationTimeout = useRef(null);
  const [scrollEnabled, setScrollEnabled] = useState(true);

  const enableScrolling = (enabled) => {
    setScrollEnabled(enabled);
  };

  const dragResponder = useRef(
    PanResponder.create({
      // 仅拖拽激活时拦截触摸事件
      onStartShouldSetPanResponder: () => isDragActive,
      onMoveShouldSetPanResponder: () => isDragActive,

      onPanResponderGrant: () => {
        startY.current = translateY._value;
        // 2秒后激活拖拽
        dragActivationTimeout.current = setTimeout(() => {
          setIsDragActive(true);
          enableScrolling(false);
        }, 2000);
      },

      onPanResponderMove: (_, gestureState) => {
        if (isDragActive) {
          const newLocation = Math.round(startY.current + gestureState.dy);
          translateY.setValue(newLocation);
        }
      },

      onPanResponderRelease: () => {
        clearTimeout(dragActivationTimeout.current);
        if (isDragActive) {
          startY.current = translateY._value;
        }
        setIsDragActive(false);
        enableScrolling(true);
      },

      onPanResponderTerminate: () => {
        clearTimeout(dragActivationTimeout.current);
        setIsDragActive(false);
        enableScrolling(true);
      },

      // 拖拽激活时阻止原生滚动，否则允许
      onShouldBlockNativeResponder: () => isDragActive,
    })
  ).current;

  return (
    <ScrollView style={{ flex: 1 }} scrollEnabled={scrollEnabled}>
      <View style={{ height: 1000, backgroundColor: '#f0f0f0', padding: 20 }}>
        <Text style={{ fontSize: 18, marginBottom: 20 }}>页面滚动内容</Text>
        
        <Animated.View
          style={{
            flex: 1,
            transform: [{ translateY }],
          }}
        >
          <Animated.View
            style={{ 
              height: 100,
              backgroundColor: 'rgba(128,128,128,0.3)',
              borderRadius: 8,
              shadowColor: '#000',
              shadowOffset: { width: 0, height: 2 },
              shadowOpacity: 0.25,
              shadowRadius: 4,
              elevation: 5,
              justifyContent: 'center',
              alignItems: 'center'
            }}
            {...dragResponder.panHandlers}
          >
            <Text>长按2秒拖拽我</Text>
          </Animated.View>
        </Animated.View>
      </View>
    </ScrollView>
  );
};

export default DraggableComponent;

关键修改点说明 #

• 事件拦截逻辑：onStartShouldSetPanResponder和onMoveShouldSetPanResponder仅在isDragActive为true时返回true，确保普通滑动事件交给ScrollView处理。
• 长按激活机制：在onPanResponderGrant中设置2秒定时器，超时后才激活拖拽并禁用滚动，避免一开始阻止滚动。
• 状态清理：在触摸释放或事件终止时清除定时器，恢复拖拽状态和滚动权限，防止内存泄漏。
• 原生响应器控制：onShouldBlockNativeResponder根据拖拽状态决定是否阻止原生滚动，确保事件流转正确。

注意事项 #

• 确保滚动容器（如ScrollView）的scrollEnabled与enableScrolling函数关联，实现拖拽时禁用滚动。
• 若使用第三方滚动组件，需对应调整滚动禁用的属性。
• 测试时验证两种场景：快速滑动页面是否正常滚动，长按2秒后滑动是否触发拖拽。

内容的提问来源于stack exchange，提问作者Lakmal