Expo SDK升级后WebView移除报错，安装react-native-webview仍无解求助

问题描述 #

升级Expo SDK从33到45版本后，运行应用出现以下错误：

Invariant Violation: WebView has been removed from React Native. It can now be installed and imported from 'react-native-webview' instead of 'react-native'.

已完成以下操作但错误仍未解决：

• 安装最新版react-native-webview
• 修改组件导入为import { WebView } from "react-native-webview"
• 移除所有自行编写的WebView使用代码

解决方案 #

1. 排查第三方依赖的旧WebView引用 #

问题大概率出在第三方依赖库内部仍在使用旧的react-native导入WebView。执行以下命令搜索所有依赖中的旧引用：

grep -r "import.*WebView.*react-native" node_modules/

找到对应依赖后：

• 优先升级该依赖到适配React Native 0.68+的版本（比如当前使用的react-native-elements 3.4.3，可检查是否有更新）
• 若无法升级，替换为功能类似的兼容依赖

2. 彻底清除缓存 #

Expo和Metro的缓存可能残留旧代码，执行以下命令完全清理：

# 快速清除缓存并重启
expo r -c

# 或手动全量清理
rm -rf node_modules
rm package-lock.json yarn.lock
npm install
expo start --clear

3. 对齐Expo与WebView版本兼容性 #

Expo 45官方推荐的react-native-webview版本为~11.18.0，当前使用的11.26.1虽差异不大，但可尝试降级到官方适配版本：

npm install react-native-webview@~11.18.0

4. 检查隐藏的WebView引用 #

除了自行编写的组件，还要排查：

• react-navigation路由配置中的旧组件引用
• 全局工具类、公共组件文件
• 第三方SDK（如支付、分享类）是否内置WebView

用户提供的相关文件 #

package.json #

{"name": "","version": "1.0.0","main": "node_modules/expo/AppEntry.js","scripts": {"start": "expo start","android": "expo start --android","ios": "expo start --ios","eject": "expo eject","test": "jest --watchAll"},"jest": {"preset": "jest-expo"},"resolutions": {"metro-config": "0.57.0"},"dependencies": {"@expo/react-native-action-sheet": "^4.0.1","@expo/samples": "~3.0.3","@expo/vector-icons": "^13.0.0","@fortawesome/fontawesome-svg-core": "^6.2.1","@fortawesome/free-solid-svg-icons": "^6.2.1","@fortawesome/react-native-fontawesome": "^0.3.0","axios": "^1.2.6","crypto-js": "^4.1.1","expo": "^45.0.0","expo-app-loading": "~2.0.0","expo-asset": "~8.5.0","expo-blur": "^12.0.1","expo-camera": "~12.2.0","expo-cli": "^6.2.1","expo-constants": "~13.1.1","expo-file-system": "~14.0.0","expo-font": "~10.1.0","expo-image-manipulator": "^11.0.0","expo-image-picker": "^14.1.0","expo-linking": "~3.1.0","expo-location": "^15.0.1","expo-notifications": "~0.15.4","expo-splash-screen": "~0.15.1","expo-status-bar": "~1.3.0","expo-web-browser": "~10.2.1","global": "^4.4.0","immutable": "^4.2.2","intl": "^1.2.5","jwt-decode": "^3.1.2","moment": "^2.29.4","qs": "^6.11.0","react": "17.0.2","react-dom": "17.0.2","react-geocode": "^0.2.3","react-native": "0.68.2","react-native-dash": "^0.0.11","react-native-easy-toast": "^2.3.0","react-native-elements": "^3.4.3","react-native-image-resizer": "^1.0.1","react-native-maps": "0.30.2","react-native-measureme": "^0.0.2","react-native-modal": "^13.0.1","react-native-modal-datetime-picker": "^14.0.1","react-native-picker-select": "^8.0.4","react-native-push-notification-popup": "^1.6.1","react-native-qrcode": "^0.2.7","react-native-status-bar-height": "^2.6.0","react-native-svg-transformer": "^1.0.0","react-native-web": "0.17.7","react-native-webview": "^11.26.1","react-navigation": "^3.11.0","react-redux": "^8.0.5","redux": "^4.2.1","redux-actions": "^2.6.5","redux-devtools-extension": "^2.13.8","redux-pender": "^2.0.12","underscore": "^1.13.6"},"devDependencies": {"@babel/core": "^7.12.9"},"private": true}

component.js #

import React from "react";
import { Header } from "../../components";
import { WebView } from "react-native-webview";

class TermWebViewScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const type = navigation.getParam("type");
    const title =
      type === "pri" ? "개인정보 수집 및 이용동의" : "서비스 약관동의";
    return { header: <Header navigation={navigation} title={title} /> };
  };

  state = {
    pri: "https://mrhomes.s3.ap-northeast-2.amazonaws.com/documents/homes_privacy.html",
    usage:
      "https://mrhomes.s3.ap-northeast-2.amazonaws.com/documents/homes_term.html",
  };

  render() {
    const { pri, usage } = this.state;
    const type = this.props.navigation.getParam("type");

    return (
      <WebView
        source={{ uri: type === "pri" ? pri : usage }}
        style={{ marginTop: 20 }}
        startInLoadingState
        scalesPageToFit
      />
    );
  }
}

export default TermWebViewScreen;

内容的提问来源于stack exchange，提问作者Kevin Yang