5.调试react-native项目

安装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 />;
  }
});