React Native中Canvas绘图时如何临时禁用对应区域ScrollView滚动

实现思路 #

• 通过状态变量控制ScrollView的scrollEnabled属性，在用户触摸Canvas区域时禁用滚动，离开Canvas区域时恢复滚动
• 监听Canvas外层容器的触摸事件，动态更新状态值即可实现需求

完整代码示例 #

import React, { useState } from 'react';
import { ScrollView, View } from 'react-native';
// 此处引入你项目中使用的Canvas组件，例如@shopify/react-native-skia的Canvas或自定义Canvas
import { Canvas } from '@shopify/react-native-skia';

export default function Page() {
  // 控制ScrollView滚动权限的状态变量
  const [scrollEnabled, setScrollEnabled] = useState(true);

  return (
    <ScrollView scrollEnabled={scrollEnabled}>
      <View>
        {/* 其余允许滚动的区域内容 */}
      </View>
      {/* 包裹Canvas的容器，绑定触摸事件控制滚动权限 */}
      <View
        onTouchStart={() => setScrollEnabled(false)}
        onTouchEnd={() => setScrollEnabled(true)}
        onTouchCancel={() => setScrollEnabled(true)}
        {/* 安卓端可选添加，拦截触摸事件防止冒泡到ScrollView，避免偶发的滚动误触发 */}
        onMoveShouldSetResponderCapture={() => true}
      >
        <Canvas />
        {/* Canvas区域其余内容 */}
      </View>
      <View>
        {/* 其余允许滚动的区域内容 */}
      </View>
      <View>
        {/* 其余允许滚动的区域内容 */}
      </View>
    </ScrollView>
  );
}

注意事项 #

• 如果你使用的Canvas组件本身已经绑定了触摸事件，确保没有设置阻止事件冒泡，否则外层容器的触摸事件无法正常触发
• 部分第三方Canvas库会默认消费触摸事件，此时可以把状态更新逻辑直接写到Canvas自带的触摸开始/结束回调中即可

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