当我使用 React-Native 默认打包程序启动我的项目时,我有这个错误:Unexpected token
在这一行:
static propTypes = {
/// ...
};
我在 GitHub 上查看了 React-Native 问题,但没有找到解决方案。
有什么建议吗?
当我使用 React-Native 默认打包程序启动我的项目时,我有这个错误:Unexpected token
在这一行:
static propTypes = {
/// ...
};
我在 GitHub 上查看了 React-Native 问题,但没有找到解决方案。
有什么建议吗?
React-Native 打包器使用 Babel 传输 ES6 和 ES7,但不是所有功能。启用列表在这里。在您的情况下,默认情况下,RN 打包程序中未启用class-props 。您可以在打包程序之前使用 Babel 编译您的代码,或者只是在打包程序设置中启用它。有关更多信息,请参阅此官方文档。
尝试将您的 propTypes 附加到您的课程中:
var MyClass extends React.Component {
....
}
MyClass.propTypes = {
.... /* enter proptypes here */
}
根据这个答案,您需要从 Babel 6 开始为类属性安装一个插件。
从 Babel 6 开始,您现在需要transform-class-properties插件来支持类属性。
脚步:
npm install babel-plugin-transform-class-properties
"plugins": ["transform-class-properties"]
注意,它是一个插件,而不是转换;所以不要将它放在“预设”列表中。)为我工作。
在@Fomahaut 回答之后,我一直在查看 Facebook 的 GitHub 存储库并发现了这个问题:https ://github.com/facebook/react-native/issues/2182
例子:
{
"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
}
安装stage-0 Babel preset ( npm i --save-dev babel-preset-stage-0
) 并将其添加到.babelrc
文件presets
部分,例如:
{ "presets": ["react", "es2015", "babel-preset-stage-0"] }
看看是否有帮助:
$ npm install babel-plugin-transform-decorators
/<your project root>/node_modules/react-native/packager/react-packager/.babelrc
添加"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
}