违反不变性：ViewPropTypes 已从 React Native 中删除。迁移到从“deprecated-react-native-prop-types”导出的 ViewPropTypes

Question

由于 ViewPropTypes 已从“react-native”中删除，并且使用它的包没有更新。构建应用程序后出现此错误

ERROR  Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.   
ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

我正在使用的包：

"@react-native-clipboard/clipboard": "^1.10.0",
"@react-native-community/checkbox": "^0.5.12",
"@react-native-firebase/app": "^14.11.0",
"@react-native-firebase/auth": "^14.9.4",
"@react-native-firebase/database": "^14.11.0",
"@react-native-firebase/firestore": "^14.11.0",
"@react-native-google-signin/google-signin": "^7.2.2",
"@react-native-masked-view/masked-view": "github:react-native-masked-view/masked-view",
"@react-native-picker/picker": "^2.4.1",
"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1",
"axios": "^0.27.2",
"base-64": "^1.0.0",
"num-words": "^1.2.2",
"numeral": "^2.0.6",
"pdf-lib": "^1.17.1",
"react": "17.0.2",
"react-native": "^0.69.0",
"react-native-blob-util": "^0.16.1",
"react-native-country-picker-modal": "^2.0.0",
"react-native-date-picker": "^4.2.2",
"react-native-fbsdk-next": "^8.0.5",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.5.0",
"react-native-html-to-pdf": "^0.12.0",
"react-native-pdf": "^6.5.0",
"react-native-picker-select": "^8.0.4",
"react-native-progress": "^5.0.0",
"react-native-radio-input": "^0.9.4",
"react-native-ratings": "^8.1.0",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1",
"react-native-share": "^7.5.0",
"react-native-signature-canvas": "^4.3.1",
"react-native-vector-icons": "^9.1.0",
"react-native-webview": "^11.21.2",
"react-scripts": "^5.0.1"

有什么解决办法吗？

Answer 1

I can recommend doing the steps outlined in this github discussion.

Steps

1. Install patch-package, this will later be used to make the changes more persistent.

2. Install deprecated-react-native-prop-types by running npm install deprecated-react-native-prop-types or yarn add deprecated-react-native-prop-types

3. Now you have to hack the node_modules. Go to node_modules/react-native/index.js starting around line 436 and change this:

   // Deprecated Prop Types
   get ColorPropType(): $FlowFixMe {
     invariant(
       false,
       "ColorPropType has been removed from React Native. Migrate to " +
         "ColorPropType exported from 'deprecated-react-native-prop-types'.",
    );
   },
   get EdgeInsetsPropType(): $FlowFixMe {
     invariant(
       false,
       "EdgeInsetsPropType has been removed from React Native. Migrate to " +
         "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
     );
   },
   get PointPropType(): $FlowFixMe {
     invariant(
       false,
       "PointPropType has been removed from React Native. Migrate to " +
        "PointPropType exported from 'deprecated-react-native-prop-types'.",
    );
   },
   get ViewPropTypes(): $FlowFixMe {
    invariant(
      false,
      "ViewPropTypes has been removed from React Native. Migrate to " +
        "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
    );
   },
   

to this:

  // 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
  },

4. Run npx patch-package react-native to save the patch.

5. Rebuild the app.

Only thing to keep in mind is that this patch will need to be reapplied with every upgrade to react-native, or until the libraries in question are updated to import from deprecated-react-native-prop-types instead.

Props to goguda for providing this answer.

EDIT:

As suggested by Ethan Hermsey, add the following script to your package.json: "postinstall": "patch-package"

in order to automate the process after using npm i.

Answer 2

如果有人在使用react-native-snap-carousel时遇到错误，这是另一种修复方法：

npm i --save react-native-snap-carousel@4.0.0-beta.6

github问题

Answer 3

我遇到了同样的错误，我按照以下步骤操作并解决了它。出现这种情况是因为react-native已经从库中删除了view prop类型，但仍然有一些外部模块需要使用它。

1. 在终端中运行命令

npm i deprecated-react-native-prop-types@2.2.0

2. 转到节点模块并找到您在我的例子中使用的模块，它是“react-native-camera”

3. 导航到src模块文件的文件夹（在我的例子中它位于 RNCamera.js 中）并查找

import {
       findNodeHandle,
       Platform,
       NativeModules,
       ViewPropTypes,
       requireNativeComponent,
       View,
       ActivityIndicator,
       Text,
       StyleSheet,
       PermissionsAndroid,
     } from 'react-native';

在以下代码中删除 ViewPropTypes 并将以下命令粘贴到此下方

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

保存文件并再次运行，希望有帮助<3

Answer 4

我使用react-native-camera时遇到了同样的错误。我通过安装npm i deprecated-react-native-prop-types@2.2.0和替换来修复它node_modules/react-native-camera

文件中的所有导入。

import { ViewPropTypes } from 'react-native'; 

为了

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