react-native - 在 React-Native 中使用 ES7 静态 propTypes

Question

当我使用 React-Native 默认打包程序启动我的项目时，我有这个错误：Unexpected token在这一行：

static propTypes = {
   /// ...
};

我在 GitHub 上查看了 React-Native 问题，但没有找到解决方案。

有什么建议吗？

Answer 1

React-Native 打包器使用 Babel 传输 ES6 和 ES7，但不是所有功能。启用列表在这里。在您的情况下，默认情况下，RN 打包程序中未启用class-props 。您可以在打包程序之前使用 Babel 编译您的代码，或者只是在打包程序设置中启用它。有关更多信息，请参阅此官方文档。

Answer 2

尝试将您的 propTypes 附加到您的课程中：

var MyClass extends React.Component {
....
}

MyClass.propTypes = {
.... /* enter proptypes here */
}

Answer 3

根据这个答案，您需要从 Babel 6 开始为类属性安装一个插件。

从 Babel 6 开始，您现在需要transform-class-properties插件来支持类属性。

脚步：

1. 运行这个：npm install babel-plugin-transform-class-properties
2. 将此添加到您的 .babelrc 中：（"plugins": ["transform-class-properties"] 注意，它是一个插件，而不是转换；所以不要将它放在“预设”列表中。）

为我工作。

Answer 4

在@Fomahaut 回答之后，我一直在查看 Facebook 的 GitHub 存储库并发现了这个问题：https ://github.com/facebook/react-native/issues/2182

• 在项目的根目录下创建一个 .babelrc 文件
• 向 Babel 添加更多规则

例子：

    {
      "retainLines": true,
      "compact": true,
      "comments": false,
      "whitelist": [
        "es6.arrowFunctions",
        "es6.blockScoping",
        "es6.classes",
        "es6.constants",
        "es6.destructuring",
        "es6.forOf",
        "es6.modules",
        "es6.parameters",
        "es6.properties.computed",
        "es6.properties.shorthand",
        "es6.spread",
        "es6.tailCall",
        "es6.templateLiterals",
        "es6.regex.unicode",
        "es6.regex.sticky",
        "es7.asyncFunctions",
        "es7.classProperties",
        "es7.comprehensions",
        "es7.decorators",
        "es7.exponentiationOperator",
        "es7.exportExtensions",
        "es7.functionBind",
        "es7.objectRestSpread",
        "es7.trailingFunctionCommas",
        "regenerator",
        "flow",
        "react",
        "react.displayName"
        ],
      "sourceMaps": false
    }

Answer 5

安装stage-0 Babel preset ( npm i --save-dev babel-preset-stage-0) 并将其添加到.babelrc文件presets部分，例如：

{ "presets": ["react", "es2015", "babel-preset-stage-0"] }

Answer 6

看看是否有帮助：

1. $ npm install babel-plugin-transform-decorators
2. 导航/<your project root>/node_modules/react-native/packager/react-packager/.babelrc

3. 添加"transform-decorators"到此列表：

   { "retainLines": true, "compact": true, "comments": false, "plugins": [ "syntax-async-functions", "syntax-class-properties", "syntax-trailing-function-commas", "transform-class-properties", "transform-es2015-arrow-functions", "transform-es2015-block-scoping", "transform-es2015-classes", "transform-es2015-computed-properties", "transform-es2015-constants", "transform-es2015-destructuring", ["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}], "transform-es2015-parameters", "transform-es2015-shorthand-properties", "transform-es2015-spread", "transform-es2015-template-literals", "transform-flow-strip-types", "transform-object-assign", "transform-object-rest-spread", "transform-react-display-name", "transform-react-jsx", "transform-regenerator", "transform-es2015-for-of", -->"**transform-decorators**"<-- ], "sourceMaps": false }