Expo React Native安装主题库后按钮点击无响应求助

问题描述 #

Expo React Native应用中，基于自定义Modal实现的登录/注册界面原本功能正常，在安装主题及导航相关库后，出现以下异常：

• 退出登录后再次尝试登录时，所有按钮（TouchableOpacity）点击无响应，甚至点击事件内的console.log都不执行
• 无任何错误日志输出
• 表单输入功能正常，可正常输入邮箱和密码，但登录、忘记密码、切换登录/注册标签等操作均无反应

安装的库 #

问题出现前已安装的库 #

yarn add styled-components

yarn add react-native-paper
yarn add react-native-safe-area-context
yarn add react-native-vector-icons

yarn add @react-navigation/stack  
npx expo install react-native-gesture-handler

npx expo install firebase                             
npx expo install @react-native-async-storage/async-storage

npx expo install expo-image

问题出现后新增安装的库 #

yarn add @react-navigation/native 
yarn add @react-navigation/material-bottom-tabs 
yarn add react-native-vector-icons 
npx expo install react-native-screens 
npx expo install react-native-safe-area-context 
npx expo install expo-system-ui

复现情况 #

曾回退到安装新库前的代码提交，按相同顺序重新安装依赖后应用恢复正常，但次日问题再次出现。

环境版本 #

"expo": "~49.0.15",
"expo-status-bar": "~1.6.0",
"react": "18.2.0",
"react-native": "0.72.6"

排查方向与解决方案 #

1. 检查Modal层级与触摸事件拦截 #

• 排查是否有上层元素（如导航容器、全局遮罩）覆盖在Modal上方，导致点击事件被拦截：
  • 使用React DevTools查看组件树，确认Modal的z-index是否足够高，没有被其他绝对定位元素遮挡
  • 临时给Modal最外层View添加onPress={() => console.log("Modal clicked")}，测试是否能触发，判断是Modal层级问题还是按钮自身问题
• 检查react-native-gesture-handler的影响：确保Modal组件没有被嵌套在GestureHandlerRootView内部，或者尝试给Modal添加pointerEvents="auto"属性

2. 检查组件状态与事件绑定 #

• 确认退出登录后，Modal相关的状态（如visible、表单状态）是否被正确重置，避免因状态异常导致事件处理函数失效
• 检查按钮的点击事件是否使用了useCallback，且依赖项配置正确，避免因依赖项变化导致事件绑定丢失
• 排查Modal是否存在重复渲染或意外卸载/挂载的情况，导致事件监听失效

3. 解决库版本冲突 #

• 检查重复安装的库版本一致性：执行yarn list react-native-safe-area-context和yarn list react-native-vector-icons，确保所有依赖使用同一版本，避免版本冲突
• 验证依赖与Expo 49的兼容性：
  • react-native-screens需使用~3.20.0版本（适配Expo 49）
  • @react-navigation系列库需使用6.x稳定版

4. 临时移除主题配置测试 #

• 临时注释react-native-paper或styled-components的全局主题配置，测试是否是主题样式导致的触摸事件拦截

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