为何子View触摸区域超出父View仍可响应？官方文档理解存疑

官方文档原文 #

触摸区域绝不会超出父视图边界，若触摸点命中两个重叠视图，同级视图的Z-index始终优先。

你的误解与代码现象 #

你将上述文档内容理解为："下层视图的触摸区域不能大于上层视图的尺寸"，但运行测试代码时，黄色View通过hitSlop设置的触摸区域超出绿色父视图尺寸后，触摸绿色视图边界外的区域仍能触发响应，这说明你确实误解了官方文档的表述。

测试代码 #

import React, { useState, PanResponder } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  const [txt, setTxt] = useState(false);
  const PR = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderStart: () => {
      setTxt((prev) => !prev);
    },
  });

  return (
    <View style={styles.container1}>
      <View style={styles.container2}>
        <View
          style={styles.container3}
          {...PR.panHandlers}
          hitSlop={{ top: 80, bottom: 80 }}
        >
          <Text style={styles.Text}>{txt ? "true" : "false"}</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container1: {
    flex: 1,
    backgroundColor: "red",
    alignItems: "center",
    justifyContent: "center",
  },
  container2: {
    backgroundColor: "green",
    height: 140,
    width: 240,
    alignItems: "center",
    justifyContent: "center",
  },
  container3: {
    backgroundColor: "yellow",
    height: 60,
    width: 160,
  },
  Text: {
    fontSize: 36,
  },
});

官方文档的正确解读 #

官方文档的规则需要结合父视图是否具备触摸响应能力来理解：

• "触摸区域绝不会超出父视图边界"：这个限制仅针对**父视图本身绑定了触摸交互逻辑（比如PanResponder、Touchable系列组件）**的场景。此时父视图会优先拦截触摸事件，子视图的触摸区域（包括hitSlop扩展的部分）无法突破父视图的边界——超出父视图的触摸会被父视图或更外层的元素处理，不会传递给子视图。
• "若触摸点命中两个重叠视图，同级视图的Z-index始终优先"：针对同一层级的视图，Z-index更高的视图会优先响应触摸事件，这和父-子层级的触摸传递逻辑无关。

你的代码为何不符合预期 #

你代码中的绿色container2只是普通的容器View，没有绑定任何触摸响应逻辑，因此它不会拦截触摸事件。黄色View的hitSlop扩展区域即使超出绿色父视图的边界，只要该区域没有被其他可触摸视图覆盖，触摸事件就会被黄色View捕获，从而触发响应。

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