Invariant Violation：ViewPropTypes 已从 React Native 中移除。迁移到从 \'deprecated-react-native-prop-types\' 导出的 ViewPropTypes

Answer 1

我可以推荐执行此github 讨论中概述的步骤。

脚步

1. 安装patch-package，稍后将用于使更改更加持久。

2. 安装弃用-react-native-prop-types通过运行 npm install deprecated-react-native-prop-types 或 yarn add deprecated-react-native-prop-types

3. 现在你必须破解这节点模块.去node_modules/react-native/index.js从第 436 行开始并更改：

   // 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'.",
    );
   },
   

   对此：

     // 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. 运行npx patch-package react-native 保存补丁。

   5. 重建应用程序。

   唯一要记住的是，每次升级到 react-native 时都需要重新应用此补丁，或者直到有问题的库更新为从 deprecated-react-native-prop-types 导入。

   向goguda 提供此答案的道具。

Answer 2

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

1. 在终端运行命令

   npm 我不推荐使用-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 3

我在使用 react-native-camera 时遇到了同样的错误。我修复它安装 npm i deprecated-react-native-prop-types@2.2.0 并在 node_modules/react-native-camera 中替换文件中的所有导入。 从'react-native'导入{ ViewPropTypes }； 为了 导入 { ViewPropTypes } from 'deprecated-react-native-prop-types';

Answer 4

升级到新的 RN v0.69 后，我遇到了同样的问题。更改 node_modules/react-native-camera 将在本地解决问题。但是，我们知道，当需要从头开始安装节点依赖项时——例如在 CI/CD 过程中——需要重新完成第 3 方库的更改。因此，我建议的一个更好的解决方案是使用babel-plugin-module-resolver 在构建运行时级别拦截react-native-camera 组件，如此处建议的https://github.com/psycheangel/deprecated-with-module-resolver。我做了另一种方法，因为这个解决方案对我不起作用，因为它更通用并且与我项目中的其他东西发生冲突。仍然使用相同的 babel 解析器插件，但要解决 react-native-camera 组件的特定问题，这是我基于 psycheangel 的上述解决方案所做的方式：

步骤1

安装 babel 解析器插件和转身依赖：

npm install --save-dev babel-plugin-module-resolver deprecated-react-native-prop-types

或者

yarn add --dev babel-plugin-module-resolver deprecated-react-native-prop-types

第2步

使用以下代码创建resolver/react-native/index.js：

import * as ReactNative from 'react-native'
import * as DeprecatedPropTypes from 'deprecated-react-native-prop-types'

delete ReactNative['ColorPropType']
delete ReactNative['EdgeInsetsPropType']
delete ReactNative['ImagePropTypes']
delete ReactNative['PointPropType']
delete ReactNative['TextInputPropTypes']
delete ReactNative['TextPropTypes']
delete ReactNative['ViewPropTypes']

module.exports = {
  ...ReactNative,
  ...DeprecatedPropTypes,
}

第 3 步

将模块解析器插件配置添加到babel.config.js：

const path = require('path')
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        resolvePath(sourcePath, currentFile) {
          if (
            sourcePath === 'react-native' &&
            currentFile.includes('react-native-camera/src/RNCamera.js')
          ) {
            console.log('resolver', sourcePath, currentFile)
            return path.resolve(__dirname, 'resolver/react-native')
          }
        },
      },
    ],
  ],
}