React-Native 模拟器运行与调试

2018-08-11 本文已影响3106人 5260fbd1e4e1

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,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    '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

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