Korzystanie ES7 statycznych propTypes z React-Native

Question

Kiedy jestem uruchomieniem mojego projektu przy użyciu reagować-Native domyślny Packager, mam ten błąd: Unexpected token na tej linii:

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

wziąłem spojrzenie na React rodzimymi problemy na GitHub, ale nie znalazłem rozwiązania.

Jakieś sugestie?

Answer 1

Po @Fomahaut odpowiedź, wciąż patrząc na GitHub repozytorium Facebooka i uznał ten problem: https://github.com/facebook/react-native/issues/2182

• utworzyć plik .babelrc przy projektu katalogu
• dodać więcej reguł do Babel

przykład:

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

Spróbuj dołączając swoje propTypes do swojej klasie:

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

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

Answer 3

-React Native korzystanie Packager Babel dla transferu ES6 i ES7, ale nie wszystkie funkcje. Lista włączeń to here. W twoim przypadku class-props nie jest domyślnie włączony w pakowaczu RN. Możesz użyć Babel do kompilowania kodu przed pakerem lub po prostu włączyć go w ustawieniu pakowarki. Więcej informacji można znaleźć w tej wersji: official doc.

Answer 4

Instalacja th e stage-0 Babel preset (npm i --save-dev babel-preset-stage-0) i dodać go do presets sekcji .babelrc pliku, np:

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

Answer 5

Według this answer, trzeba zainstalować plugin do właściwości klasy jako Babel 6.

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

kroki:

1. Run to: npm install babel-plugin-transform-class-properties
2. Dodaj to do .babelrc: "plugins": ["transform-class-properties"] (Uwaga, to wtyczka, a nie transformacja; więc nie umieszczaj go na liście "ustawień wstępnych".)

Pracowałem dla mnie.

Answer 6

zobacz czy to pomaga:

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

3. Dodaj "transform-decorators" do tej listy:

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