Liabooks Home|PRISM News
48小时的调试:追踪React Native触摸事件Bug
洞察Digest

48小时的调试:追踪React Native触摸事件Bug

5分钟阅读

追踪间歇性iOS触摸Bug的48小时记录。四个假设、系统性验证,以及发现React Native New Architecture陷阱的过程。

48小时的调试:追踪React Native触摸事件Bug

间歇性Bug、四个假设、以及架构的陷阱


应用卡死了

"按钮点不动。"

我正在测试PRISM应用。在文章详情页面点击目录按钮,毫无反应。返回按钮也不行。语言切换、点赞、评论输入,全都失灵。奇怪的是滚动还能用。手指上下滑动页面没问题,但点击按钮完全没反应。

强制退出再重启就恢复了。但浏览几篇文章后又会卡死。看不出规律,像是随机发生的。

我做了多年测试自动化,深知看似随机的Bug只要反复测试就能找到规律。


用AI开发应用

PRISM应用的代码几乎都是用Claude Code写的。不是因为我精通React Native,而是有AI才做得到。说一句"帮我实现这个功能",代码就出来了,而且大部分都能正常运行。四语言支持、推送通知、广告集成、订阅系统——放在以前,这些我连尝试都不敢。

但这个触摸Bug让我卡住了。我问AI:"触摸没反应,你知道为什么吗?"AI给出了几个假设,建议逐一验证。问题是,AI自己也不知道真正的原因。


第一次尝试:手势处理器冲突

AI的第一个假设是手势冲突。"目录功能用了@gorhom/bottom-sheet,可能是GestureHandlerRootView嵌套导致手势冲突。"

听起来有道理。之前确实因为手势冲突临时禁用过目录功能。我把Bottom Sheet换成了React Native原生的Modal。结果还是不行,问题依旧。


第二次尝试:广告遮罩层

第二个假设是广告。"插屏广告关闭后,可能有透明遮罩层残留,拦截了触摸事件?"

我们用的是Google AdMob,iOS原生广告会创建独立的UIWindow。广告显示后问题似乎更容易出现。我完全禁用广告后测试,发生频率降低了,但问题仍然存在。广告可能是加重因素,但不是根本原因。


找到规律:14-15次页面跳转

看似随机的Bug也有规律。我跑了几十次重复测试,每次只改变一个变量。应用刚启动时没问题。看几篇文章也没问题。但页面跳转14-15次后,问题就会出现。页面跳转次数和Bug发生之间存在明显的相关性。

基于这个发现,我问AI:"会不会是之前页面的触摸处理器没有正确释放?"我设置detachInactiveScreens: true来分离非活动页面。发生频率降低了,但问题仍在。这只是缓解症状,不是解决根本原因。不过可以确定"页面跳转"是关键变量。


转折点:换个问题问

第二天,我突然转变了思路。"如果不是代码的问题呢?"

之前我一直假设是我的代码或者用的库有问题。但如果是React Native本身的Bug呢?我重新检查了项目配置。

// ios/Podfile.properties.json
{
  "newArchEnabled": "true"
}

New Architecture,也就是Fabric——React Native的新渲染系统,在Expo SDK 54中默认启用。

我让AI去GitHub Issues搜索类似案例。找到了。

  • #37755 - "Touch events stop working intermittently on iOS with Fabric"
  • #38511 - "RCTSurfaceTouchHandler sometimes fails to register touches"

症状完全吻合。间歇性发生,仅限iOS,页面跳转后多发,滚动正常但点击无效。

虽然是AI找到的,但"去GitHub搜一下"这个方向是我定的。AI不会主动去社区里翻找,除非你让它去。


解决:回滚架构

关掉New Architecture。

{
  "newArchEnabled": "false"
}

同时移除可能有冲突的库。

npm uninstall react-native-reanimated react-native-worklets @gorhom/bottom-sheet

用原生Animated API替代Reanimated,用原生Modal替代Bottom Sheet。重新构建iOS版本并测试。页面跳转50次以上,触摸问题零发生。


我学到的

1. 间歇性Bug要怀疑架构

难以复现、随机发生的Bug,往往不是代码层面的问题。可能是竞态条件、内存问题,或者框架本身的Bug。如果卡了两天以上,该往上看一层了。

2. 依赖是有代价的

react-native-reanimated@gorhom/bottom-sheet是优秀的库。但它们包含原生代码,架构变化时容易出问题。如果原生API够用,添加外部依赖要谨慎。

3. 系统性记录能找到答案

假设→验证→记录→下一个假设,不断循环。错误的假设也记录下来。正是这些记录让我能问出"那还剩什么?"

4. AI是助手

AI提出假设、写代码、建议验证方法。但"换个角度问问题"这个决定是我做的。AI是强大的工具,但终究是工具。


结语

这48小时的调试同时展示了AI编程的可能性和局限性。没有深厚的专业背景也能做出应用。但藏在框架深处的Bug,最终还是得自己挖出来。

即使AI能代写代码,开发者也不会变得多余。恰恰相反。AI解决"怎么实现",但"问题是什么"、"该看哪里"、"什么时候该换方向",这些仍然是人的判断。写代码的时间少了,但判断力变得更重要了。

这次调试中,AI提出了四个假设,全错了。找到正确答案的那一刻,是我决定"换个问题问"的时候。这个决定,AI做不了。

给遇到类似情况的人:换个问题问。往上看一层。去社区里找。然后,记录下来。


2026年1月

观点

記者

黃珉

「在現場17年,現在講述技術的故事」

相关文章