React Native 0.64.4集成react-native-webview安卓崩溃问题求助

问题描述 #

开发React Native 0.64.4应用时，集成react-native-webview@11.18.1后，安卓端打开包含WebView的页面立即崩溃，错误日志如下：

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.xapp, PID: 21712
    java.lang.IncompatibleClassChangeError: Found interface com.facebook.react.uimanager.events.EventDispatcher, but class was expected (declaration of 'com.facebook.react.uimanager.events.EventDispatcher' appears in /data/app/~~qPom7HPfdYNLFEMUio836A==/com.verime-gQSY9JQLtB6GGgsqfvIrFg==/base.apk!classes3.dex)
        at com.reactnativecommunity.webview.RNCWebViewManager.dispatchEvent(RNCWebViewManager.java:168)
        at com.reactnativecommunity.webview.RNCWebViewManager$RNCWebChromeClient.onProgressChanged(RNCWebViewManager.java:1153)
        at la.handleMessage(chromium-TrichromeWebViewGoogle6432.aab-stable-530410534:278)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loopOnce(Looper.java:226)
        at android.os.Looper.loop(Looper.java:313)
        at android.app.ActivityThread.main(ActivityThread.java:8751)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1135)

项目核心依赖配置：

"react": "17.0.1",
"react-native": "0.64.4",
"react-native-webview": "11.18.1"

错误原因 #

react-native-webview@11.18.1的原生代码中，将EventDispatcher当作类进行调用，但React Native 0.64.x版本中EventDispatcher已改为接口，二者API不兼容导致崩溃。

解决方案 #

1. 降级react-native-webview到兼容版本 #

React Native 0.64.4对应的兼容react-native-webview版本为11.15.0，执行以下操作：

• 安装指定版本：

  npm install react-native-webview@11.15.0 --save
  # 或使用yarn
  yarn add react-native-webview@11.15.0
  

• 清理缓存并重建项目：

  # 清理node_modules和npm缓存
  rm -rf node_modules && npm cache clean --force
  # 清理安卓构建缓存
  cd android && ./gradlew clean && cd ..
  # 重新安装依赖
  npm install
  # 重新运行安卓项目
  react-native run-android
  

2. 锁定依赖版本避免冲突 #

若存在第三方依赖间接引入更高版本的react-native-webview，在package.json中添加resolutions字段锁定版本（yarn直接支持，npm需安装npm-force-resolutions后使用）：

"resolutions": {
  "react-native-webview": "11.15.0"
}

添加后重新执行依赖安装命令。

3. 额外排查步骤（若上述方法无效） #

• 运行npx jetify确保AndroidX兼容处理完成
• 检查安卓项目build.gradle文件，确认compileSdkVersion设置为30（React Native 0.64.4要求）
• 执行npm ls react-native-webview查看依赖树，确认无版本冲突

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