React-Native 模拟器运行与调试

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,如下：

 

Error1.png

这时候需要设置模拟器调试的 ip 地址和端口号。
点击模拟器菜单键弹出设置选项，选择 dev settings:

 

rn2.png

接着选择 Debug server host & port device:

 

rn3.png

然后输入自己的 ip 地址和端口号并确定：

 

rn4.png

然后返回重新按设置菜单选择 Reload，并重新加载项目运行：

 

rn5.png

此时可以看到项目运行成功：

 

rn6.png

3、调式

打开app 的开发菜单，可以看到有两个选项，一个是 enable live reload
另一个是 enable hot reloading。Enable live reload 表示 刷新时全局刷新 而 hot reloading 是局部刷新。

 

rn7.png

这两个我们都选择允许后，我们改完代码并保存，可以实时看到修改效果，不用重新编译运行或者 reload。

接着我们设置通过 Chrome 调试。
在 app 设置 菜单中选择 Debug JS Remotely：

 

rn8.png

设置完成之后，浏览器自动打开 192.168.0.21:8081/debugger-ui/ tab 页面

 

 

rn9.png

根据提示，按 Ctrl + Shif + j 可以打开开发者工具窗口：

 

rn10.png

可以看到，这里会报错，意思是我们不应该用此 ip 地址来调试，而应该通过 loacalhost 来进行调试。输入 http://localhost:8081/debugger-ui/ 就可以正常调试：

 

rn11.png

在这个控制台里，我们可以做两件事，一个是打印日志，另一个是断点调试。
首先看一下打印日志：

打印日志

在 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: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

打印日志结果如下：

 

log.png

断点调试

如下图所示，找到 debuggerWorker.js ，在里面找到自己想要调试的文件，打断点即可调试。

 

debug.png

基本操作步骤和其他程序调试类似，就不再介绍。

作者：xiaomai2020
链接：https://www.jianshu.com/p/4a72211831ef
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。