Expo应用Android实体设备部分onPress不触发及TouchableOpacity异常问题

问题根因 #

你的问题是Android平台原生MapView的层级优先级、样式配置错误共同导致的触摸事件被拦截：
你给MapView配置flex: 1的同时，又手动指定了宽高为整个窗口的尺寸，这会让MapView直接撑满整个屏幕，而MapView的渲染顺序在detailsPanel之后，Android原生组件的默认层级高于普通RN View组件，所以MapView直接覆盖了上层的detailsPanel和导航栏区域，拦截了几乎所有触摸事件，只有部分漏过的区域（比如删除图标）可以响应点击。iOS和模拟器对层级和触摸事件分发的处理更宽松，所以不会触发问题。

修复方案 #

1. 修正MapView样式
   删掉styles.map中手动设置的宽高属性，保留flex:1即可，MapView会自动占满detailsPanel之外的剩余空间，不会再向上覆盖上层组件：

map: {
  flex: 1,
  // 删除下面两行配置
  // width: Dimensions.get("window").width,
  // height: Dimensions.get("window").height,
  borderRadius: STYLES.borderRadius,
}

2. 主动提升detailsPanel层级
   给detailsPanel的样式添加zIndex: 10，强制让信息面板层级高于MapView，避免Android原生组件层级优先级导致的覆盖问题：

detailsPanel: {
  flexDirection: "column",
  width: "100%",
  margin: 0,
  backgroundColor: STYLES.white,
  borderRadius: STYLES.borderRadius,
  padding: STYLES.borderRadius,
  zIndex: 10, // 新增此行配置
}

3. 简化TouchableOpacity结构
   删除TouchableOpacity内部包裹图标的冗余View，直接将图标作为TouchableOpacity的直接子元素，避免多余的View拦截触摸事件，Android对嵌套View的触摸事件分发规则比iOS更严格，多余的无样式View很容易吃掉点击事件：

<TouchableOpacity
  style={{
    flex: 2,
    backgroundColor: STYLES.danger,
    alignItems: "center",
    justifyContent: "center",
  }}
  onPress={() => {
    showAlert(
      route.params.item.id,
      route.params.item.date,
      route.params.item.route
    );
  }}
>
  {/* 删除外层冗余的<View>标签 */}
  <MaterialCommunityIcons
    name={"delete"}
    size={30}
    color={STYLES.white}
  />
</TouchableOpacity>

4. 可选验证
   如果修改完成后还有问题，可以临时给MapView添加pointerEvents="none"属性测试，如果加了之后所有点击都恢复正常，就可以确认是MapView拦截了触摸事件，再针对性调整层级即可。

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