React Native安装WebView后触发Invariant Violation错误求助

1. 确认react-native-webview版本兼容性 #

• 先核对react-native-webview和你当前React Native版本的适配关系，比如RN 0.70及以上版本建议搭配webview 11.23.0及以上版本。在package.json里锁定对应版本后执行：

npm install react-native-webview@适配版本
cd ios && pod install

2. 修复NativeEventEmitter参数问题 #

• 找到项目中使用new NativeEventEmitter()的代码，必须确保传入的模块参数不为空。如果是webview相关的事件监听，正确写法参考：

import { NativeEventEmitter } from 'react-native';
import { WebView } from 'react-native-webview';

const webViewEventEmitter = new NativeEventEmitter(WebView);

• 要是自定义模块引发的问题，检查iOS端AppDelegate文件是否正确注册模块，Android端检查MainApplication.java的getPackages方法里是否包含该模块。

3. 临时禁用Hermes排查问题 #

• 在iOS的Podfile中修改配置禁用Hermes：

use_react_native!(
  :path => config[:reactNativePath],
  :hermes_enabled => false
)

• 执行pod install后重新构建项目，如果报错消失，说明是Hermes与webview的兼容性问题，可以尝试更新Hermes版本，或者等待webview的兼容更新。

4. 彻底清理缓存与构建文件 #

• 执行以下命令完成全量清理：

# 清理前端依赖与缓存
rm -rf node_modules package-lock.json yarn.lock
npm install

# 清理iOS相关文件
cd ios
rm -rf Podfile.lock Pods build
pod deintegrate
pod install

# 若涉及Android，同步清理
cd ../android
./gradlew clean

• 打开Xcode，选择Product > Clean Build Folder，重启Xcode后再重新构建项目。

5. 检查AppRegistry调用逻辑 #

• 确保AppRegistry.runApplication是由React Native框架自动触发，不要手动重复调用。index.js里的标准写法参考：

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

• 如果项目中有手动调用runApplication的代码，直接移除即可。

内容的提问来源于stack exchange，提问作者Milos N.