无需传递scrollEnabled：如何让Graph组件阻止父ScrollView滚动

为什么e.stopPropagation()不生效 #

React Native的触摸事件分为JS层的事件冒泡和原生侧的手势识别系统两层，你仅在JS层阻止事件冒泡，并不会影响原生ScrollView的滚动手势识别逻辑，所以不会生效。

方案1：内置手势响应系统（无侵入、无需修改父组件） #

你可以直接用React Native内置的手势响应系统（Gesture Responder System），在Graph组件内部主动抢夺触摸响应权，父ScrollView会自动取消滚动行为，所有逻辑完全内聚在Graph组件内，不需要跨层级传递任何prop：

function Graph() {
  // 触摸开始时，声明当前组件需要响应手势
  const onStartShouldSetResponder = () => true;
  // 成功获得手势响应权时触发，此时ScrollView已自动停止滚动
  const onResponderGrant = () => {
    // 可在此处初始化tooltip展示逻辑
  };
  // 处理滑动事件，更新tooltip
  const onResponderMove = (e) => {
    const touchX = e.nativeEvent.locationX;
    // 你的滑动更新tooltip逻辑写在这里
  };
  return (
    <View 
      onStartShouldSetResponder={onStartShouldSetResponder}
      onResponderGrant={onResponderGrant}
      onResponderMove={onResponderMove}
    >
      {/* 你的图表渲染内容 */}
    </View>
  )
}

方案2：Context跨层级控制滚动状态（适合多组件共享控制） #

如果你后续有多个子组件需要控制ScrollView的滚动，可以用Context实现跨层级状态传递，避免prop drilling问题：

1. 首先创建滚动状态上下文：

// ScrollContext.js
import { createContext, useContext, useState } from 'react';
const ScrollContext = createContext();
export function ScrollProvider({ children }) {
  const [scrollEnabled, setScrollEnabled] = useState(true);
  return (
    <ScrollContext.Provider value={{ scrollEnabled, setScrollEnabled }}>
      {children}
    </ScrollContext.Provider>
  )
}
export const useScroll = () => useContext(ScrollContext);

2. 在父组件包裹ScrollView：

import { ScrollProvider, useScroll } from './ScrollContext';
function ParentComponent() {
  const { scrollEnabled } = useScroll();
  return (
    <ScrollProvider>
      <ScrollView scrollEnabled={scrollEnabled}>
        {/* 其他页面内容 */}
        <Graph />
        {/* 其他页面内容 */}
      </ScrollView>
    </ScrollProvider>
  )
}

3. 在Graph组件内直接控制滚动状态：

function Graph() {
  const { setScrollEnabled } = useScroll();
  return (
    <View
      onTouchStart={() => setScrollEnabled(false)}
      onTouchEnd={() => setScrollEnabled(true)}
      onTouchCancel={() => setScrollEnabled(true)}
    >
      {/* 你的图表渲染内容 */}
    </View>
  )
}

注意事项 #

如果你使用的是第三方图表库，只需要将上述的手势事件绑定在包裹图表的最外层View上即可生效。

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