https://www.jianshu.com/p/4a72211831ef
1、安装模拟器
下载并安装夜神模拟器，安装成功后，命令行连接模拟器(前提是配置了 adb 环境变量，或者到 sdk adb 目录下运行)：
adb connect 127.0.0.1:62001
当看到 connected to 127.0.0.1:62001 时表示连接成功。
2、初始化项目并运行
通过命令行初始化项目
react-native init MyProject
进入项目根目录
cd MyProject
运行项目：
react-native run-android
这时候，运行后模拟器会红屏报错:Could not connect to development server,如下：
这时候需要设置模拟器调试的 ip 地址和端口号。
点击模拟器菜单键弹出设置选项，选择 dev settings:
接着选择 Debug server host & port device:
然后输入自己的 ip 地址和端口号并确定：
然后返回重新按设置菜单选择 Reload，并重新加载项目运行：
此时可以看到项目运行成功：
3、调式
打开app 的开发菜单，可以看到有两个选项，一个是 enable live reload
另一个是 enable hot reloading。Enable live reload 表示 刷新时全局刷新 而 hot reloading 是局部刷新。
这两个我们都选择允许后，我们改完代码并保存，可以实时看到修改效果，不用重新编译运行或者 reload。
接着我们设置通过 Chrome 调试。
在 app 设置 菜单中选择 Debug JS Remotely：
根据提示，按 Ctrl + Shif + j 可以打开开发者工具窗口：
可以看到，这里会报错，意思是我们不应该用此 ip 地址来调试，而应该通过 loacalhost 来进行调试。输入 http://localhost:8081/debugger-ui/ 就可以正常调试：
在这个控制台里，我们可以做两件事，一个是打印日志，另一个是断点调试。
首先看一下打印日志：
打印日志
在 react-native 中每个组件都有自己的生命周期，组件的生命周期对应着不同的生命阶段，通常可以分为三个阶段：组件初始化及挂载、运行阶段、卸载阶段。常见的组件生命周期函数如下：
初始化及挂载阶段：
- contructor: 构造函数
- componentWillMount: 组件将被加载。在 render 方法前执行。
- componentDidMount: 组件已经加载到虚拟 DOM，render 方法后执行。
运行阶段：
-
componentWillReceiveProps(nextProps):在组件接收到其父组件传递的props的时候执行,参数为父组件传递的props。在组件的整个生命周期可以多次执行。
-
shouldComponentUpdate(nextProps,nextState):在componentWillReceiveProps(nextProps)执行之后立刻执行；或者在state更改之后立刻执行。
-
componentWillUpdate(nextProps,nextState):在shouldComponentUpdate(nextProps, nextState)函数执行完毕之后立刻调用。
-
componentDidUpdate(preProps,preState): render() 方法执行后立刻调用。
-
Render() ：渲染组件，初始化及运行都会执行。
卸载阶段：
- componentWillUnmount: 组件卸载前执行。
我们可以在每个生命周期中打印日志：
测试代码如下：
App.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,
' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,
' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
componentWillMount(){
console.log("componentWillMount")
}
componentDidMount(){
console.log("componentDidMount")
}
shouldComponentUpdate(){
console.log("shouldComponentUpdate")
}
componentWillUpdate(){
console.log("componentWillUpdate")
}
componentDidUpdate(){
console.log("componentDidUpdate")
}
componentWillReceiveProps(){
console.log("componentWillReceiveProps")
}
componentWillUnmount(){
console.log("componentWillUnmount")
}
render() {
console.log("render")
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: