Mit ES7 statischer propTypes mit React-india

Question

Wenn ich mein Projekt starte mit Reagieren Native Standard Verpackers habe ich diesen Fehler: Unexpected token auf dieser Linie:

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

ich einen Blick nahm React-Mutter Probleme auf GitHub, aber ich habe keine Lösung gefunden.

Irgendwelche Vorschläge?

Answer 1

Nach @Fomahaut Antwort, halte ich auf Facebook GitHub-Repository suchen und dieses Problem gefunden: https://github.com/facebook/react-native/issues/2182

• eine .babelrc Datei
Stammverzeichnis der auf das Projekt erstellen
• mehr Regeln hinzufügen zu Babel

Beispiel:

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

Versuchen Sie, Ihre propTypes Ihrer Klasse angehängt:

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

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

Answer 3

Reagieren Native Verpacker Verwendung Babel für die Übertragung ES6 und ES7, aber nicht alle Funktionen. Die Aktivierungsliste ist here. In Ihrem Fall ist class-props nicht standardmäßig in RN Packager aktiviert. Sie können Babel verwenden, um Ihren Code vor dem Packager zu kompilieren, oder aktivieren Sie ihn einfach in der Packager-Einstellung. Weitere Informationen finden Sie unter official doc.

Answer 4

installieren th e stage-0 Babel preset (npm i --save-dev babel-preset-stage-0) und fügen Sie ihn in .babelrcpresets Abschnitt der Datei, zB:

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

Answer 5

Nach this answer, müssen Sie sich als von Babel ein Plugin für Klasseneigenschaften installieren 6.

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

Schritte:

1. Run this: npm install babel-plugin-transform-class-properties
2. Fügen Sie dies zu Ihrer .babelrc hinzu: "plugins": ["transform-class-properties"] (Hinweis, es ist ein Plugin, keine Transformation; also nicht in die "Presets" Liste.)

Arbeitete für mich. Siehe

Answer 6

, ob das hilft:

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

3. hinzufügen "transform-decorators" zu dieser Liste:

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