在 React-Native 中使用 ES7 静态 propTypes

Question

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

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

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

有什么建议吗？

Answer 1

尝试将您的 propTypes 附加到您的 class:

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

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

Answer 2

React-Native 打包器使用 Babel 来传输 ES6 和 ES7，但不是所有功能。启用列表是 here. In your case, class-props is not enabled by default in RN packager. You can use Babel to compiler your code before packager, or just enable it in the packager setting. See this official doc 以获取更多信息。

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

Answer 4

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

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

Answer 5

根据 this answer，从 Babel 6 开始，您需要为 class 属性安装一个插件。

As of Babel 6, you now need the transform-class-properties plugin to support class properties.

步骤：

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

对我有用。

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

在 React-Native 中使用 ES7 静态 propTypes

Using ES7 static propTypes with React-Native

react-native

ecmascript-next