Using ES7 static propTypes with React-Native

问题

When I'm launching my project using React-Native default packager, I have this error: Unexpected token on this line:

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

I took a look on React-Native issues on GitHub, but I didn't find a solution.

Any suggestion?

回答1:

React-Native packager use Babel for transfer ES6 and ES7, but NOT ALL features. The enable list is 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 for more information.

回答2:

Try appending your propTypes to your class:

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

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

回答3:

After @Fomahaut answer, I keep looking on Facebook's GitHub repository and found this issue: https://github.com/facebook/react-native/issues/2182

• Create a .babelrc file at the project's root directory
• Add more rules to Babel

Example:

    {
      "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
    }

回答4:

According to this answer, you need to install a plugin for class properties as of Babel 6.

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

Steps:

1. Run this: npm install babel-plugin-transform-class-properties
2. Add this to your .babelrc: "plugins": ["transform-class-properties"] (Note, it's a plugin, not a transform; so don't put it in the "presets" list.)

Worked for me.

回答5:

Install the stage-0 Babel preset (npm i --save-dev babel-preset-stage-0) and add it to .babelrc file's presets section, e.g.:

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

回答6:

See if that helps:

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

3. Add "transform-decorators" to this list:

   { "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 }

来源：https://stackoverflow.com/questions/33615537/using-es7-static-proptypes-with-react-native