如何用react-native-gesture-handler处理ScrollView内react-native-skia触摸事件

核心问题原因 #

ScrollView的垂直滚动手势会优先拦截触摸事件，导致react-native-skia Canvas的onTouch事件在滚动触发后失效，无法同时处理图表的X轴拖动交互。

解决方案：使用react-native-gesture-handler的同时手势识别 #

通过react-native-gesture-handler的手势系统，让图表的X轴拖动手势与ScrollView的垂直滚动手势同时生效，具体步骤如下：

1. 替换ScrollView组件 #

使用react-native-gesture-handler提供的ScrollView替代原生ScrollView，确保手势系统能正确接管事件：

import { ScrollView } from 'react-native-gesture-handler';

2. 移除Canvas的onTouch，改用GestureDetector #

用GestureDetector包裹Canvas，创建PanGesture处理触摸交互，关键配置simultaneousWithExternalGesture(true)允许和外部滚动手势同时触发：

import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { Canvas, Path, Circle } from '@shopify/react-native-skia';

// 在组件内部定义手势
const panGesture = Gesture.Pan()
  .onStart((evt) => {
    // 计算触摸点相对于Canvas的X坐标（需根据Canvas的布局位置调整）
    const canvasX = evt.x - canvasOffsetLeft; // 需自行获取Canvas的左侧偏移量
    // 更新指示器初始位置
    setIndicatorX(canvasX);
  })
  .onUpdate((evt) => {
    // 仅处理X轴偏移，Y轴偏移交给ScrollView处理
    const newX = indicatorX + evt.translationX;
    // 限制X轴范围在图表内部
    const clampedX = Math.max(0, Math.min(newX, chartWidth));
    setIndicatorX(clampedX);
    // 重置translationX，避免累积偏移
    evt.translationX = 0;
  })
  .simultaneousWithExternalGesture(true); // 允许与ScrollView滚动手势同时执行

3. 组件结构调整 #

将Canvas包裹在GestureDetector中，放入GestureHandler的ScrollView内：

// 假设已通过useRef获取Canvas的布局信息（用于计算触摸坐标）
const canvasRef = useRef(null);
const [canvasOffsetLeft, setCanvasOffsetLeft] = useState(0);

useEffect(() => {
  canvasRef.current?.measure((x) => setCanvasOffsetLeft(x));
}, []);

return (
  <ScrollView style={{ flex: 1 }}>
    {/* 其他内容 */}
    <GestureDetector gesture={panGesture}>
      <Canvas
        ref={canvasRef}
        style={{ width: '100%', height: 200 }}
      >
        {/* 绘制图表内容 */}
        <Path d={chartPath} strokeWidth={2} color="#2196F3" />
        {/* 指示器 */}
        <Circle cx={indicatorX} cy={100} r={6} color="#FF5722" />
      </Canvas>
    </GestureDetector>
    {/* 更多图表或内容 */}
  </ScrollView>
);

关键细节说明 #

• 坐标转换：触摸事件的evt.x是屏幕绝对坐标，需要通过measure获取Canvas的布局偏移，转换为Canvas内部的相对坐标，确保指示器位置准确。
• 偏移重置：在onUpdate中重置evt.translationX，避免每次拖动累积偏移量，导致指示器位置计算错误。
• 范围限制：通过Math.max和Math.min限制指示器的X轴范围，防止超出图表边界。

验证效果 #

现在按压图表并斜向拖动时，ScrollView会正常垂直滚动，同时图表的指示器会跟随手指的X轴移动；纯垂直拖动时，仅触发ScrollView滚动，指示器位置保持不变，完全符合预期交互。

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