Utilizzando propTypes statici ES7 con React-Native

Question

Quando sto lanciando il mio progetto utilizzando React-Native confezionatore di default, ho questo errore: Unexpected token su questa linea:

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

ho preso uno sguardo su React-Native problemi su GitHub, ma non ho trovato una soluzione.

Qualche suggerimento?

Answer 1

Dopo @Fomahaut risposta, io continuo a guardare repository GitHub di Facebook e abbiamo trovato questo problema: https://github.com/facebook/react-native/issues/2182

• Creare un file .babelrc alla directory principale del progetto
• Aggiungere più regole a Babel

Esempio:

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

Try aggiungendo i tuoi propTypes alla classe:

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

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

Answer 3

React-Native uso packager Babel per il trasferimento ES6 e ES7, ma non tutte le funzioni. L'elenco di abilitazione è here. Nel tuo caso, class-props non è abilitato di default nel packager RN. Puoi usare Babel per compilare il tuo codice prima di packager, o semplicemente abilitarlo nell'impostazione del packager. Vedere questo official doc per ulteriori informazioni.

Answer 4

Installare ° e stage-0 Babel preset (npm i --save-dev babel-preset-stage-0) e aggiungerlo alla sezione .babelrc del file presets, ad esempio:

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

Answer 5

Secondo this answer, è necessario installare un plugin per le proprietà di classe come di Babele 6.

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

Passi:

1. Esegui questo: npm install babel-plugin-transform-class-properties
2. Aggiungi questo al tuo .babelrc: "plugins": ["transform-class-properties"] (Nota, è un plugin, non una trasformazione; quindi non metterlo nella lista "Presets".)

Ha funzionato per me.

Answer 6

vedere se questo aiuta:

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

3. Aggiungi "transform-decorators" a questa lista:

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