React Native 0.71.1迁移至0.74.0后ViewPropTypes报错求助

问题背景 #

将React Native从0.71.1版本迁移至0.74.3版本后，Debug构建出现如下错误：

ERROR TypeError: Cannot read property 'style' of undefined, js engine: hermes

错误源于react-native-slider、react-native-scrollable-tab-view-improved等第三方依赖仍在使用React Native 0.74中已移除的ViewPropTypes。已尝试修改node_modules内对应文件改用deprecated-react-native-prop-types，也试过patch-package打补丁，但希望找到无需补丁的永久解决方案。自身业务代码未使用ViewPropTypes。

错误具体路径：
../node_modules/react-native-slider/lib/Slider.js(552:40)
关联属性：style:_reactNative.ViewPropTypes.style

项目依赖配置 #

{
  "dependencies": {
    "@alessiocancian/react-native-actionsheet": "^3.2.0",
    "@dudigital/react-native-zoomable-view": "^1.1.4",
    "@openspacelabs/react-native-zoomable-view": "^2.1.6",
    "@rbmweb/canvas": "^1.0.0",
    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-community/netinfo": "^11.3.2",
    "@react-native-community/progress-bar-android": "^1.0.5",
    "@react-native-community/progress-view": "^1.4.2",
    "@react-native-community/push-notification-ios": "^1.11.0",
    "@react-native-firebase/app": "^20.2.0",
    "@react-native-firebase/messaging": "^20.1.0",
    "@react-native-masked-view/masked-view": "^0.3.1",
    "@react-navigation/bottom-tabs": "^6.6.0",
    "@react-navigation/drawer": "^6.6.2",
    "@react-navigation/native": "6.1.18",
    "@react-navigation/stack": "^6.4.0",
    "@reduxjs/toolkit": "2.2.6",
    "@sentry/react-native": "^5.24.1",
    "@stomp/stompjs": "^7.0.0",
    "aws-sdk": "^2.1659.0",
    "axios": "^1.7.2",
    "clevertap-react-native": "^2.2.1",
    "deprecated-react-native-prop-types": "^2.2.0",
    "fast-text-encoding": "^1.0.6",
    "i18n-js": "4.4.3",
    "install": "^0.13.0",
    "link-preview-js": "^3.0.5",
    "lodash": "^4.17.21",
    "lottie-react-native": "^6.7.2",
    "moment": "^2.30.1",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-native": "0.74.3",
    "react-native-animatable": "^1.4.0",
    "react-native-audio-recorder-player": "^3.6.10",
    "react-native-awesome-alerts": "^2.0.0",
    "react-native-blob-util": "^0.19.9",
    "react-native-calendars": "^1.1305.0",
    "react-native-check-version": "^1.1.1",
    "react-native-code-push": "^8.2.2",
    "react-native-collapsible": "^1.6.1",
    "react-native-config": "^1.5.2",
    "react-native-country-picker-modal": "^2.0.0",
    "react-native-create-thumbnail": "^2.0.0",
    "react-native-device-info": "^11.1.0",
    "react-native-document-picker": "^9.3.0",
    "react-native-draggable-flatlist": "^4.0.1",
    "react-native-dropdown-picker": "^5.4.6",
    "react-native-fast-image": "^8.6.3",
    "react-native-file-viewer": "^2.1.5",
    "react-native-fs": "2.20.0",
    "react-native-gesture-handler": "^2.15.0",
    "react-native-haptic-feedback": "^2.2.0",
    "react-native-image-crop-picker": "^0.41.2",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-localize": "3.2.0",
    "react-native-mathjax": "^2.1.2",
    "react-native-modal": "^13.0.1",
    "react-native-modal-datetime-picker": "^17.1.0",
    "react-native-orientation-locker": "^1.7.0",
    "react-native-pager-view": "^5.4.25",
    "react-native-pdf": "^6.7.5",
    "react-native-permissions": "^4.1.5",
    "react-native-pinch-zoom-view": "^0.2.0",
    "react-native-print": "^0.11.0",
    "react-native-progress": "^5.0.1",
    "react-native-push-notification": "^8.1.1",
    "react-native-radial-gradient": "^1.1.5",
    "react-native-reanimated": "3.14.0",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "3.32.0",
    "react-native-scrollable-tab-view-improved": "1.0.0",
    "react-native-slider": "^0.11.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-spinkit": "^1.5.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-star-rating": "^1.1.0",
    "react-native-svg": "15.3.0",
    "react-native-tab-view": "^3.5.2",
    "react-native-toast-message": "^2.2.0",
    "react-native-user-avatar": "^1.0.8",
    "react-native-version-check": "^3.4.7",
    "react-native-video": "6.3.0",
    "react-native-video-controls": "2.8.1",
    "react-native-view-shot": "^3.8.0",
    "react-native-vimeo-iframe": "^1.2.1",
    "react-native-vlc-media-player": "1.0.67",
    "react-native-walkthrough-tooltip": "^1.6.0",
    "react-native-webview": "^13.10.4",
    "react-native-wheel-pick": "^1.2.2",
    "react-native-windows": "0.74.13",
    "react-native-youtube-iframe": "^2.3.0",
    "react-redux": "9.1.2",
    "reactotron-react-native": "^5.1.7",
    "redux": "5.0.1",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "3.1.0",
    "sockjs-client": "^1.6.1",
    "victory-native": "37.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native-community/datetimepicker": "^6.7.5",
    "@react-native-picker/picker": "^2.7.7",
    "@react-native/babel-preset": "0.74.85",
    "@react-native/eslint-config": "0.74.85",
    "@react-native/metro-config": "0.74.85",
    "@react-native/typescript-config": "0.74.85",
    "@types/react": "^18.2.6",
    "@types/react-native-video": "^5.0.15",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "jetifier": "^2.0.0",
    "metro-react-native-babel-preset": "^0.77.0",
    "prettier": "2.8.8",
    "react-dom": "18.2.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-web": "^0.18.10",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  }
}

永久解决方案 #

1. 替换废弃/停更的第三方依赖 #

这是最彻底的方案，从根源解决依赖兼容性问题：

• react-native-slider：替换为官方维护的@react-native-community/slider，该包完全兼容RN 0.74+，API与旧包接近，迁移成本低
• react-native-scrollable-tab-view-improved：项目已依赖react-native-tab-view，直接迁移到这个包即可，它是当前React生态中主流的Tab组件，支持最新RN版本
• react-native-star-rating：替换为react-native-ratings或自定义星级组件，后者更灵活且无兼容性问题

2. 全局注入ViewPropTypes Polyfill #

如果暂时无法替换依赖，可在项目入口文件（如index.js或App.js）顶部添加以下代码，全局补全ViewPropTypes，让旧依赖能正常读取：

import { ViewPropTypes } from 'deprecated-react-native-prop-types';
import ReactNative from 'react-native';

// 给ReactNative对象补上已移除的ViewPropTypes
if (!ReactNative.ViewPropTypes) {
  ReactNative.ViewPropTypes = ViewPropTypes;
}

此方法无需修改任何依赖代码，快速生效，适合作为过渡方案，直到完成依赖替换。

3. 升级依赖至兼容版本 #

检查报错依赖是否有更新版本：

• 查看react-native-slider、react-native-scrollable-tab-view-improved等包的npm页面，确认是否有支持RN 0.74的版本，如果有，直接升级即可
• 注意：部分老旧依赖已停止维护，可能没有兼容版本，此时只能选择前两种方案

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