Expo React Native项目移动浏览器onClick事件失效，寻求解决方案

针对你遇到的「Expo Go运行正常、移动浏览器localhost环境下事件大多失效，仅刷新后首次点击有效」问题，给出具体排查和解决步骤：

1. 调整 Expo Web 被动事件监听配置 #

移动Web环境下，Expo默认启用的被动事件监听可能引发触摸/点击事件冲突。修改app.json中的Web配置：

{
  "expo": {
    "web": {
      "passiveListeners": false,
      // 保留原有Web配置内容
    }
  }
}

修改后重启Expo开发服务器，测试事件是否恢复正常。

2. 检查元素层级遮挡问题 #

不可见的上层元素可能拦截点击事件。给可点击元素临时添加调试样式，验证是否被遮挡：

<TouchableOpacity 
  onPress={handlePress}
  style={{ zIndex: 9999, backgroundColor: 'rgba(255,0,0,0.1)' }}
>
  {/* 组件内容 */}
</TouchableOpacity>

如果添加后点击有效，说明存在层级冲突，需要调整相关元素的z-index属性。

3. 修正事件绑定方式 #

• 对于React Native组件（如TouchableOpacity、Button），继续使用onPress而非onClick；
• 对于原生HTML元素（如div、input），必须使用onClick，Expo Web对原生元素的onPress支持有限：

// React Native组件正确用法
<Button onPress={() => navigate('/next-page')} title="跳转" />

// 原生HTML元素正确用法
<div onClick={() => setValue('test')}>填充字段</div>

4. 排查状态更新导致的事件异常 #

刷新后首次点击有效、后续失效，大概率和状态更新后的组件渲染有关：

• 使用useCallback缓存事件处理函数，避免每次渲染重新创建导致的绑定异常：

import { useCallback } from 'react';

const handlePress = useCallback(() => {
  // 你的业务逻辑，比如导航、字段填充
}, [/* 依赖项：如navigation、setValue等 */]);

• 检查是否有条件渲染逻辑导致可点击组件被意外卸载/重新挂载，确保事件绑定始终存在。

5. 移除全局事件阻止逻辑 #

排查项目中是否存在全局拦截点击/触摸事件的代码，比如：

document.addEventListener('click', (e) => e.preventDefault());
document.addEventListener('touchstart', (e) => e.stopPropagation());

这类代码会阻止事件传递，导致后续点击失效。如果存在，移除或调整其作用范围。

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