react-native - React-Native で ES7 静的 propType を使用する

Question

React-Native デフォルト パッケージャーを使用してプロジェクトを起動すると、Unexpected tokenこの行に次のエラーが表示されます。

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

GitHub で React-Native の問題を調べましたが、解決策が見つかりませんでした。

なにか提案を？

Answer 1

propTypes をクラスに追加してみてください。

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

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

Answer 2

@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 3

this answerによると、Babel 6 以降のクラス プロパティのプラグインをインストールする必要があります。

Babel 6 以降、クラス プロパティをサポートするにはtransform-class-propertiesプラグインが必要になりました。

手順:

1. これを実行します：npm install babel-plugin-transform-class-properties
2. これを .babelrc に追加します: "plugins": ["transform-class-properties"] (注: これは変換ではなくプラグインです。そのため、「プリセット」リストには入れないでください。)

私のために働いた。

Answer 4

ステージ 0 の Babel プリセット( ) をインストールし、ファイルのセクションにnpm i --save-dev babel-preset-stage-0追加します。.babelrcpresets

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

Answer 5

それが役立つかどうかを確認してください：

1. $ npm install babel-plugin-transform-decorators
2. 案内する/<your project root>/node_modules/react-native/packager/react-packager/.babelrc

3. "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 }