Expo React Native中onPress事件不触发求助（iOS模拟器环境）

我按照React Native教程编写代码，使用TouchableOpacity包裹Ionicons图标，但在iOS模拟器中点击时onPress事件完全没有反应，console.log也不输出内容。代码和教程完全一致，仅在iOS模拟器运行，已尝试AI咨询和Stack Overflow搜索，问题仍未解决。

代码如下：

import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { Image, TouchableOpacity, View } from "react-native";

export default function Introduction({ business }) {
  return (
    <View>
      <View
        style={{
          position: "absolute",
          zIndex: 10,
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          width: "100%",
          padding: 20,
        }}
      >
        <TouchableOpacity onPress={() => console.log("Pressed")}>
          <Ionicons name="arrow-back-circle" size={40} color="white" />
        </TouchableOpacity>
        <TouchableOpacity onPress={() => console.log("Pressed")}>
          <Ionicons name="heart-outline" size={40} color="white" />
        </TouchableOpacity>
      </View>
      <Image
        source={{ uri: business?.imageUrl }}
        style={{
          width: "100%",
          height: 340,
        }}
      />
    </View>
  );
}

解决方案尝试 #

1. 修复视图层级的点击穿透问题 #

在iOS中，即使设置了zIndex，下方的Image组件可能仍会拦截点击事件。给Image添加pointerEvents="none"，让它不响应触摸，确保上层的TouchableOpacity能接收到点击：

<Image
  source={{ uri: business?.imageUrl }}
  style={{ width: "100%", height: 340 }}
  pointerEvents="none"
/>

或者给最外层的View设置pointerEvents="box-none"，允许子视图响应触摸：

<View pointerEvents="box-none">
  {/* 你的绝对定位视图和Image */}
</View>

2. 验证模拟器交互状态 #

• 重启iOS模拟器，排除模拟器卡顿或状态异常的问题。
• 点击模拟器的状态栏、控制中心等原生区域，确认模拟器本身能响应触摸。
• 关闭模拟器中的“Touch ID”“Face ID”模拟功能，避免干扰。

3. 检查依赖兼容性 #

如果使用Expo，确保@expo/vector-icons与React Native版本匹配，尝试更新依赖：

expo install @expo/vector-icons react-native

4. 替换组件测试 #

用React Native的Pressable组件临时替换TouchableOpacity，测试事件是否能触发，排除组件本身的问题：

import { Pressable } from "react-native";

// ...

<Pressable onPress={() => console.log("Pressed")}>
  <Ionicons name="arrow-back-circle" size={40} color="white" />
</Pressable>

5. 确认点击区域 #

给绝对定位的内层View添加临时背景色，确认它的范围正确覆盖在Image上方，且TouchableOpacity的点击区域没有偏移：

<View
  style={{
    position: "absolute",
    zIndex: 10,
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    width: "100%",
    padding: 20,
    backgroundColor: "rgba(0,0,0,0.2)", // 临时背景色
  }}
>
  {/* ... */}
</View>

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