在 React-Native 中使用 ES7 静态 propTypes答案

【问题标题】：Using ES7 static propTypes with React-Native在 React-Native 中使用 ES7 静态 propTypes
【发布时间】：2015-11-09 18:16:16
【问题描述】：

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

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

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

有什么建议吗？

【问题讨论】：

标签： react-native ecmascript-next

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试将你的 propTypes 附加到你的类中：

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

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

【讨论】：

@skypecakes¯_(ツ)_/¯
您的示例特定于 ES6。 OP 请求 ES7 的帮助。这可能就是投反对票的原因。

【解决方案3】：

@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
    }

【讨论】：

这不适用于较新版本的 react-native，可能是由于切换到 Babel 6。
不确定“白名单”或此特定用例，但定义了“插件”的顶级 .babelrc 文件对我来说非常适合 RN 0.19+。

【解决方案4】：

根据this answer，你需要为 Babel 6 的类属性安装插件。

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

步骤：

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

为我工作。

【讨论】：

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

看看有没有帮助：

$ npm install babel-plugin-transform-decorators
导航到/<your project root>/node_modules/react-native/packager/react-packager/.babelrc
将"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 }

【讨论】：