点击子组件TouchableOpacity时如何避免触发父级Animated.View的onTouchStart事件

要实现点击子TouchableOpacity时不触发父级Animated.View的onTouchStart事件，核心思路是截断触摸事件的冒泡传递，下面是最简单可行的实现方案：

方案说明 #

触摸事件在React Native中默认会从触发的子组件向上冒泡传递给父组件，我们只需要在子组件的onTouchStart事件中调用事件对象的stopPropagation()方法，就能阻止事件继续向上传递到父组件。

修改后的代码如下：

<Animated.View onTouchStart={()=> console.log("ontouchstart")}>
  <View></View>
  <TouchableOpacity 
    // 新增这行阻止触摸事件冒泡到父组件
    onTouchStart={e => e.stopPropagation()}
    onPress={()=> console.log("hi pressed")}
  >
    <Text>hi</Text>
  </TouchableOpacity>
</Animated.View>

补充说明 #

• 如果你还需要拦截onTouchEnd、onTouchMove等其他触摸事件的冒泡，只需要在TouchableOpacity上绑定对应的事件，同样调用e.stopPropagation()即可。
• 不要误用pointerEvents属性控制事件响应，该属性会直接禁用组件整个区域的触摸交互，不符合只屏蔽子组件区域父事件触发的需求。

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