Expo启动报错：ViewPropTypes已从React Native移除的解决问询

遇到Expo启动错误：

ERROR Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

这是错误而非警告，直接导致项目无法启动，问题根源来自外部依赖库，不是自身项目代码。

已尝试操作：

• 在/node_modules中搜索ViewPropTypes，找到370个文件共1396条结果
• 手动修改部分从react-native导入ViewPropTypes的文件，改为从deprecated-react-native-prop-types导入，但错误仍存在，推测还有未修改的文件

需要解决的问题：

1. 如何定位并修改node_modules中所有错误引用ViewPropTypes的文件？
2. 整体上该如何修复这个错误以启动项目？

附package.json内容：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
  },
  "dependencies": {
    "@expo/config-plugins": "^5.0.0",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/datetimepicker": "6.2.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/netinfo": "9.3.0",
    "@react-native-community/slider": "4.2.3",
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/elements": "^1.3.3",
    "@react-navigation/material-top-tabs": "^6.2.2",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.2",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "axios": "^0.21.1",
    "deprecated-react-native-prop-types": "^4.0.0",
    "expo": "^46.0.0",
    "expo-av": "~12.0.4",
    "expo-blur": "~11.2.0",
    "expo-camera": "~12.5.0",
    "expo-device": "~4.3.0",
    "expo-env-info": "^1.0.5",
    "expo-file-system": "~14.1.0",
    "expo-image-manipulator": "~10.4.0",
    "expo-image-picker": "~13.3.1",
    "expo-image-picker-multiple": "^1.4.1",
    "expo-linking": "~3.2.4",
    "expo-location": "~14.3.0",
    "expo-media-library": "~14.2.0",
    "expo-modules-autolinking": "~0.10.1",
    "expo-notifications": "~0.16.1",
    "expo-permissions": "~13.2.0",
    "expo-server-sdk": "^3.6.0",
    "expo-status-bar": "~1.4.0",
    "expo-video-player": "^1.6.1",
    "expo-video-thumbnails": "~6.4.0",
    "firebase": "^8.2.3",
    "firebase-admin": "^10.3.0",
    "firebase-functions": "^3.21.2",
    "formik": "^2.2.9",
    "moment": "^2.29.1",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-infinite-scroll-component": "^6.1.0",
    "react-native": "0.69.9",
    "react-native-bottomsheet-reanimated": "0.0.39",
    "react-native-dropdown-picker": "^4.0.9",
    "react-native-expo-cached-image": "^1.3.1",
    "react-native-form-validator": "^0.3.5",
    "react-native-geocoding": "^0.5.0",
    "react-native-gesture-handler": "~2.5.0",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-google-places-autocomplete": "^2.1.2",
    "react-native-image-modal": "^2.0.3",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-interactable-reanimated": "0.0.15",
    "react-native-loading-spinner-overlay": "^2.0.0",
    "react-native-map-clustering": "^3.4.2",
    "react-native-maps": "0.31.1",
    "react-native-material-menu": "^2.0.0",
    "react-native-mentions": "^1.1.4",
    "react-native-modalbox": "^2.0.2",
    "react-native-optimized-flatlist": "^1.0.4",
    "react-native-orientation": "^3.1.3",
    "react-native-pager-view": "5.4.24",
    "react-native-paper": "^4.9.2",
    "react-native-parsed-text": "0.0.22",
    "react-native-popup-dialog": "^0.18.3",
    "react-native-progress": "^5.0.0",
    "react-native-ratings": "^8.1.0",
    "react-native-reanimated": "~2.9.1",
    "react-native-safe-area-context": "4.3.1",
    "react-native-screens": "~3.15.0",
    "react-native-snap-carousel": "github:LarvenLLC/react-native-snap-carousel",
    "react-native-svg": "12.3.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-unimodules": "~0.14.5",
    "react-native-vector-icons": "^8.1.0",
    "react-native-video": "^2.3.1",
    "react-native-video-player": "^0.12.0",
    "react-native-walkthrough-tooltip": "^1.3.1",
    "react-native-web": "~0.18.7",
    "react-navigation": "^4.4.4",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.2",
    "rn-tooltip": "^3.0.1",
    "rne-modal-tooltip": "gist:b28c003d87c619674def0878473338a0",
    "unimodules-permissions-interface": "^6.1.0",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@babel/core": "^7.18.6",
    "eslint": "^8.17.0",
    "eslint-plugin-react": "^7.30.0"
  },
  "private": true
}

1. 批量定位并修改错误引用的文件 #

手动修改效率太低，用脚本批量处理更可靠：

• 安装批量替换工具：

  npm install replace-in-file --save-dev
  

• 在项目根目录创建fix-viewproptypes.js脚本：

  const replace = require('replace-in-file');
  const path = require('path');
  
  const options = {
    files: path.join(__dirname, 'node_modules/**/*.js'),
    from: /import.*ViewPropTypes.*from 'react-native'/g,
    to: "import { ViewPropTypes } from 'deprecated-react-native-prop-types';",
    ignore: [
      path.join(__dirname, 'node_modules/deprecated-react-native-prop-types/**'),
      path.join(__dirname, 'node_modules/react-native/**')
    ]
  };
  
  try {
    const results = replace.sync(options);
    console.log('修改完成：', results.filter(r => r.hasChanged).length, '个文件');
  } catch (error) {
    console.error('修改出错：', error);
  }
  

• 运行脚本：

  node fix-viewproptypes.js
  

• 脚本会自动遍历node_modules下所有JS文件，把从react-native导入ViewPropTypes的语句替换成正确的导入路径，同时跳过不需要修改的目录。

2. 整体修复方案 #

方式一：升级老旧依赖库 #

很多旧依赖库已经修复了这个问题，先检查package.json里的低版本依赖：

• 比如react-native-gifted-chat@0.16.3、react-native-image-zoom-viewer@3.0.1这类版本较低的库，尝试升级到最新稳定版：

  npm update react-native-gifted-chat react-native-image-zoom-viewer
  

• 升级后删除node_modules和锁文件，重新安装依赖：

  rm -rf node_modules package-lock.json && npm install
  

• 注意：部分依赖可能和当前Expo版本不兼容，升级前先查看依赖文档确认兼容性。

方式二：用patch-package持久化修改 #

直接修改node_modules的文件会在重新安装依赖后丢失，用patch-package保存修改：

• 安装工具：

  npm install patch-package --save-dev
  

• 修改package.json的scripts，添加自动应用补丁的命令：

  "postinstall": "patch-package"
  

• 手动修改完有问题的依赖文件后，生成补丁：

  npx patch-package 依赖包名
  

• 之后每次npm install都会自动应用补丁，无需重复修改。

方式三：降级React Native版本 #

如果升级依赖困难，可以考虑降级到还保留ViewPropTypes的版本：

• 修改package.json中react-native的版本为~0.68.2，同时对应降级Expo到^45.0.0
• 删除node_modules和锁文件，重新安装依赖。

内容的提问来源于stack exchange，提问作者newbie coder