安装babel:
一个能把ES6语法转成ES5的工具。
npm install -g babel
1.报错Strict mode does not allow……
调试红屏,并报错:
React Native: SyntaxError: Strict mode does not allow function declarations in a lexically nested statement
解决办法:
在项目根目录创建.babelrc文件,其中写入:
{
"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", { "loose": true }]
]
}
然后重新启动nodejs服务:
npm start -- --reset-cache
2.报错navigator is deprecated……
这是因为版本升级到0.43以上的话,Navigator不能直接从react-native里面获取了。
解决办法:
# --save会修改项目根目录的package.json,避免漏掉这个依赖
npm install react-native-deprecated-custom-components --save
然后在引用的地方
import {Navigator}
from react-native-deprecated-custom-components
3.警告:PropTypes has been moved to a separate package...
解决办法:
// Before (15.4 and below)
import React from 'react';
class Component extends React.Component {
render() {
return <div>{this.props.text}</div>;
}
}
Component.propTypes = {
text: React.PropTypes.string.isRequired,
}
// After (15.5)
import React from 'react';
import PropTypes from 'prop-types';
class Component extends React.Component {
render() {
return <div>{this.props.text}</div>;
}
}
Component.propTypes = {
text: PropTypes.string.isRequired,
};
4.警告:React.createClass is no longer supported...
解决办法:
// Before (15.4 and below)
var React = require('react');
var Component = React.createClass({
mixins: [MixinA],
render() {
return <Child />;
}
});
// After (15.5)
var React = require('react');
var createReactClass = require('create-react-class');
var Component = createReactClass({
mixins: [MixinA],
render() {
return <Child />;
}
});