React Native Web 安卓h5 Touchable onPress 触发两次问题解决

最新推荐文章于 2023-05-16 14:19:24 发布

zwkkkk1

最新推荐文章于 2023-05-16 14:19:24 发布

阅读量1.2k

点赞数 1

分类专栏： React Native 文章标签： react native

本文链接：https://blog.csdn.net/zwkkkk1/article/details/103684964

版权

在部分安卓设备的React Native Web项目中，遇到了触摸事件Touchable组件onPress触发两次的问题。通过排查发现，问题源于React Native Web Touchable组件在mouse和touch事件上的绑定。解决方案包括升级react-native-web版本、利用postinstall钩子处理文件或在事件处理函数中使用preventDefault阻止默认行为。

摘要由CSDN通过智能技术生成

在维护基于 React Native Web 的 h5 项目时，遇到这样的一个 bug，在部分安卓 h5 页面一些点击事件会稳定触发两边，这样的问题在 iOS 和 pc 调试 h5 都是好的，甚至同一机型只要另外换一个浏览器可能也会有不同的效果。

在调试阶段，发现只要把 TouchableHighlight 等组件都干掉，换成 div，点击事件也从 onPress 改到 onClick，就全部是好的，不过由于是三端项目，需要 TouchableHighlight 这些 React Native 组件，当然不能这么改了了事，不过也给我定位到可能是 React Native Web Touchable 类组件的 bug

定位到是这个问题，很快可以找到对应问题 issue 以及 RNW 作者的回复和解决链接

管中窥豹

根据 issue 里大家的讨论结合后面作者 necolas 的修复改动，我们可以加一些 console 来看下引起问题的原因

首先在有问题的 onPress 函数里添加 console.log('触发 onPress 函数')

然后在 node_modules/react-native-web/dist/modules/ResponderEventPlugin/index.js 找到以下的代码（在备注的地方加入console）

ResponderEventPlugin.extractEvents = function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
   
  var hasActiveTouches = ResponderTouchHistoryStore.touchHistory.numberActiveTouches > 0;
  var eventType = nativeEvent.type;
  // 在这加 console
  c