如何让双层ScrollView嵌套内的指定View仅支持竖向滚动禁用横向滚动

方案1：触摸事件方向判定拦截 #

给View1绑定触摸事件，通过滑动方向判定拦截事件冒泡到外层横向ScrollView：

// 先定义变量记录触摸起始点
const touchStart = { x: 0, y: 0 }

// View1绑定的事件
<View
  onTouchStart={(e) => {
    touchStart.x = e.nativeEvent.pageX
    touchStart.y = e.nativeEvent.pageY
  }}
  onTouchMove={(e) => {
    const offsetX = Math.abs(e.nativeEvent.pageX - touchStart.x)
    const offsetY = Math.abs(e.nativeEvent.pageY - touchStart.y)
    // 纵向偏移大于横向偏移的2倍（可调整阈值避免误触）时，阻止事件冒泡
    if (offsetY > offsetX * 2) {
      e.stopPropagation()
    }
  }}
>
  {/* View1内容 */}
</View>

方案2：动态控制外层ScrollView可滚动状态 #

提前获取View1的布局坐标，根据触摸区域动态切换外层横向ScrollView的scrollEnabled属性：

const [outerScrollEnabled, setOuterScrollEnabled] = useState(true)
const [view1Layout, setView1Layout] = useState({x:0, y:0, width:0, height:0})

// 外层ScrollView绑定scrollEnabled
<ScrollView horizontal={true} scrollEnabled={outerScrollEnabled}>
  <ScrollView
    onScrollBeginDrag={(e) => {
      const { pageX, pageY } = e.nativeEvent
      // 判断触摸点是否在View1范围内
      const isInView1 = pageX >= view1Layout.x 
        && pageX <= view1Layout.x + view1Layout.width
        && pageY >= view1Layout.y
        && pageY <= view1Layout.y + view1Layout.height
      setOuterScrollEnabled(!isInView1)
    }}
    onScrollEndDrag={() => setOuterScrollEnabled(true)}
  >
    <View onLayout={(e) => setView1Layout(e.nativeEvent.layout)}>
      {/* View1内容 */}
    </View>
    <View>{/* View2内容 */}</View>
  </ScrollView>
</ScrollView>

方案3：手势库优先级控制（适用于接入了手势库的场景） #

如果使用React Native Gesture Handler这类专业手势库，可直接配置手势优先级，将View1区域绑定的纵向滚动手势优先级设置为高于外层横向滚动手势，系统会自动判定手势响应对象，不需要手动处理事件拦截。

注意事项 #

• 方向判定的偏移阈值可根据业务场景调整，避免用户斜向滑动时出现误判
• 若需要更流畅的交互体验，优先选择原生层手势拦截或者专业手势库方案，比JS层事件拦截的响应延迟更低

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