Android真机首次启动Expo应用崩溃：ViewPropTypes兼容问题求助

我的Expo应用在Android真机上首次启动时崩溃，后续启动则正常。通过Logcat定位到错误：Invariant Violation: ViewPropTypes已从React Native移除，需迁移至'deprecated-react-native-prop-types'。我已安装该依赖，手动修改了node_modules/react-native/index.js中的ViewPropTypes引用，也尝试用patch-package处理，但问题仍未解决。

错误信息 #

FATAL EXCEPTION: expo-updates-error-recovery

u5.c: Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'., stack:
<unknown>@20:289
ViewPropTypes@19:6779
<unknown>@1156:772
h@2:1585
<unknown>@1151:303
h@2:1585
<unknown>@1146:584
h@2:1585
<unknown>@1117:246
h@2:1585
<unknown>@825:140
h@2:1585
<unknown>@485:144
h@2:1585
<unknown>@481:217
h@2:1585
<unknown>@6:57
h@2:1585
d@2:958
global code@4912:3
at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(Unknown Source:75)
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.bridge.JavaMethodWrapper.invoke(Unknown Source:148)
at com.facebook.react.bridge.JavaModuleWrapper.invoke(Unknown Source:147)
at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:938)
at android.os.Handler.dispatchMessage(Handler.java:99)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(Unknown Source:0)
at android.os.Looper.loopOnce(Looper.java:226)
at android.os.Looper.loop(Looper.java:313)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(Unknown Source:37)
at java.lang.Thread.run(Thread.java:920)

依赖包列表 #

{
  "@expo/metro-config": "^0.1.57",
  "@react-native-async-storage/async-storage": "~1.17.3",
  "@react-native-community/slider": "4.2.3",
  "@react-native-picker/picker": "^1.8.3",
  "@react-navigation/native": "^5.8.10",
  "axios": "^0.19.2",
  "buffer": "^6.0.3",
  "country-calling-code": "^0.0.3",
  "deprecated-react-native-prop-types": "^2.3.0",
  "expo": "^46.0.0",
  "expo-app-loading": "~2.1.0",
  "expo-application": "~4.2.2",
  "expo-asset": "^8.6.3",
  "expo-build-properties": "~0.3.0",
  "expo-constants": "~13.2.4",
  "expo-device": "~4.3.0",
  "expo-document-picker": "~10.3.0",
  "expo-file-system": "~14.1.0",
  "expo-font": "~10.2.0",
  "expo-image-manipulator": "~10.4.0",
  "expo-image-picker": "~13.3.1",
  "expo-linear-gradient": "~11.4.0",
  "expo-local-authentication": "~12.3.0",
  "expo-localization": "~13.1.0",
  "expo-location": "~14.3.0",
  "expo-media-library": "~14.2.0",
  "expo-modules-core": "~0.11.8",
  "expo-permissions": "~13.2.0",
  "expo-print": "~11.3.0",
  "expo-secure-store": "~11.3.0",
  "expo-sharing": "~10.3.0",
  "expo-splash-screen": "~0.16.2",
  "expo-status-bar": "~1.4.0",
  "expo-updates": "~0.14.6",
  "expo-web-browser": "~11.0.0",
  "i18n-js": "^3.7.1",
  "marked": "^1.2.0",
  "native-base": "^2.13.12",
  "npm": "^8.19.2",
  "query-string": "^6.13.1",
  "react": "18.0.0",
  "react-devtools-core": "^4.26.0",
  "react-dom": "18.0.0",
  "react-native": "0.69.6",
  "react-native-barcode-expo": "^1.2.0",
  "react-native-calendars": "^1.403.0",
  "react-native-country-picker-modal": "^1.10.0",
  "react-native-exit-app": "^1.1.0",
  "react-native-flags": "^1.0.0",
  "react-native-fullwidth-image": "^0.1.3",
  "react-native-gesture-handler": "~2.5.0",
  "react-native-google-recaptcha-v2": "^1.1.0",
  "react-native-keyboard-aware-scroll-view": "^0.9.3",
  "react-native-linear-gradient": "^2.5.6",
  "react-native-loading-spinner-overlay": "^1.1.0",
  "react-native-maps": "0.31.1",
  "react-native-modal": "^11.5.6",
  "react-native-modal-dropdown": "^1.0.2",
  "react-native-modal-selector": "^2.0.1",
  "react-native-ratings": "^7.3.0",
  "react-native-reanimated": "~2.9.1",
  "react-native-safe-area-context": "4.3.1",
  "react-native-screens": "~3.15.0",
  "react-native-shimmer-placeholder": "git+https://github.com/tomzaku/react-native-shimmer-placeholder.git#expo",
  "react-native-simple-animations": "^0.2.3",
  "react-native-simple-dialogs": "^1.4.0",
  "react-native-svg": "12.3.0",
  "react-native-svg-animated-linear-gradient": "^0.4.0",
  "react-native-svg-transformer": "^1.0.0",
  "react-native-view-shot": "3.3.0",
  "react-native-webview": "11.23.0",
  "react-native-wheel-scrollview-picker": "^2.0.1",
  "react-navigation": "^4.3.9",
  "react-navigation-stack": "^2.5.1",
  "react-navigation-tabs": "^2.8.13",
  "react-onclickoutside": "^6.9.0",
  "react-redux": "^7.2.0",
  "reanimated-bottom-sheet": "^1.0.0-alpha.22",
  "redux": "^4.0.5",
  "redux-thunk": "^2.3.0",
  "rgb2hex": "^0.2.0",
  "rn-pdf-reader-js": "^4.1.1"
}

修改后的node_modules/react-native/index.js片段 #

// Deprecated Prop Types
get ColorPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ColorPropType;
},

get EdgeInsetsPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
},

get PointPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').PointPropType;
},

get ViewPropTypes(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ViewPropTypes;
},
};

解决方案 #

1. 定位第三方依赖中的ViewPropTypes引用
   问题大概率出在第三方依赖而非react-native核心包。用以下命令全局搜索所有引用ViewPropTypes的文件：

   grep -r "ViewPropTypes" node_modules/ --include="*.js" --include="*.tsx" --include="*.ts"
   

   重点排查这些旧版本依赖：native-base@2.13.12、react-navigation-stack@2.5.1、reanimated-bottom-sheet@1.0.0-alpha.22、react-native-shimmer-placeholder。

2. 用patch-package给第三方依赖打补丁
   找到具体依赖后，修改其内部的ViewPropTypes导入：

   • 将import { ViewPropTypes } from 'react-native'替换为import { ViewPropTypes } from 'deprecated-react-native-prop-types'
   • 运行npx patch-package [依赖包名]生成补丁，确保安装依赖时自动应用修改。

3. 清除缓存并重新构建
   执行以下命令彻底清除缓存，避免旧代码残留：

   expo r -c
   rm -rf node_modules && npm install
   rm -rf .expo && expo prebuild --clean
   

4. 临时全局注入ViewPropTypes（应急方案）
   如果暂时无法逐个修改依赖，可在项目入口文件（如App.js）顶部添加以下代码，全局补全react-native的ViewPropTypes导出：

   import { ViewPropTypes } from 'deprecated-react-native-prop-types';
   import * as ReactNative from 'react-native';
   
   if (typeof ReactNative.ViewPropTypes === 'undefined') {
     ReactNative.ViewPropTypes = ViewPropTypes;
   }
   

5. 升级或替换问题依赖
   长期维护建议升级到适配React Native 0.69+的版本：

   • 将native-base升级到v3+
   • 替换react-navigation-stack为@react-navigation/native-stack（适配react-navigation v5+）
   • 寻找reanimated-bottom-sheet的替代方案，如官方的@react-native-community/bottom-sheet

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