React Native WebView内点击按钮报错：Cannot read properties of null (reading 'RegExp')

背景 #

React Native应用运行在Android平板上，通过WebView组件加载外部React开发的地图应用，在地图内新增了一个“地图居中”功能按钮。

问题 #

点击按钮时触发以下异常：

Cannot read properties of null (reading 'RegExp')
TypeError: Cannot read properties of null (reading 'RegExp')
    at $o.i (http://192.168.0.15:3000/static/js/bundle.js:14554:132)

尝试定位错误但bundle.js已混淆无法排查，将按钮的onClick替换为onPress后仍报错。

相关代码 #

WebView核心代码 #

<WebView
    ref={webviewRef}
    onMessage={event => {
      if (
        event.nativeEvent.data &&
        event.nativeEvent.data === 'mapLoaded'
      ) {
        setmapLoaded(true);
      }
    }}
    source={{
      uri: 'http://192.168.0.15:3000/',
    }}
    onError={(error)=>{console.log(error)}}
/>

混淆代码关键片段 #

$o.prototype.i = function (a) {
    var b = a.type,
      c = vo(this.f);
    c = {
      x: a.pageX - c.x,
      y: a.pageY - c.y
    };
    var d;
    (d = this.a.a[0] || null) || (d = new xo(c.x, c.y, 1, "mouse"), this.a.push(d));
    this.b.push(d);
    yo(d, c.x, c.y);
    /^mouse(?:move|over|out)$/.test(b) ? Ko(this, "pointermove", a) : (/^mouse(down|up)$/.test(b) && (c = a.which - 1, "up" === wo.RegExp.$1 ? Bo(d, c) : zo(d, c)), Ko(this, b.replace("mouse", "pointer"), a));
    this.b.clear();
};

错误分析 #

从混淆代码能看出，报错点在wo.RegExp.$1——wo变量为null，导致无法访问RegExp属性。wo大概率对应浏览器环境的全局window对象，问题根源是React Native WebView的JS环境与标准浏览器存在差异，地图应用的事件处理逻辑（特别是鼠标/触摸事件模拟）依赖的全局对象属性无法正常访问。

解决方案 #

1. 修复地图应用的事件兼容 #

• Android平板以触摸交互为主，检查地图应用是否针对触摸事件做了适配，若仅依赖鼠标事件，可能在WebView环境下触发异常。强制地图库启用触摸模式（比如部分地图SDK支持设置preferTouchEvents: true）。
• 本地在浏览器中测试地图按钮功能，若浏览器中正常，说明问题出在WebView环境差异，需针对性兼容。

2. 优化WebView配置 #

给WebView添加以下属性，确保JS环境完整性：

<WebView
    // 原有属性保留
    javaScriptEnabled={true}
    domStorageEnabled={true}
    allowUniversalAccessFromFileURLs={true}
    useWebKit={true} // 启用WebKit内核，提升兼容性
/>

3. 生成SourceMap定位原代码 #

在地图应用的package.json中修改build命令，生成SourceMap以便定位混淆代码对应的原逻辑：

{
  "scripts": {
    "build": "GENERATE_SOURCEMAP=true react-scripts build"
  }
}

构建后会生成bundle.js.map，在Chrome开发者工具中加载该文件，即可将混淆代码映射到原代码，找到wo对应的真实变量，精准修复问题。

4. 跨层通信替代方案 #

放弃WebView内的按钮，改为在React Native层添加按钮，通过postMessage向WebView发送指令：

• React Native侧：

// 添加居中按钮
<TouchableOpacity onPress={() => {
  webviewRef.current?.postMessage('centerMap');
}}>
  <Text>地图居中</Text>
</TouchableOpacity>

• 地图应用侧监听消息：

window.addEventListener('message', (event) => {
  if (event.data === 'centerMap') {
    // 执行地图居中逻辑
  }
});

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