React Native 调试篇

这篇文档主要是为了帮助搭建React Native示例程序和调试环境而写。

我的环境配置：

1. Windows 10 操作系统

2. 本机已经装好了 NodeJS, Python, JDK8

4. 当前React Native 版本是0.56-RC

详细配置：

官方提供两种方式来生成React Native示例程序，一个是基于Expo，另一个是传统方式。

1. 第一种方式 Expo，比较方便快捷，但是还是有点坑的。Expo似乎是官方推荐方式。命令比较简单，跑完之后，等于在Expo这个APP的壳子里玩，感觉像个包装器。

npm install -g create-react-native-app

create-react-native-app AwesomeProject

cd AwesomeProject

npm start

官方文档提到：

2. 第二种方式是传统方式。就是把之前的先决条件NodeJS, Python, JDK8装好，配置好。

然后跑下面命令：

npm install -g yarn react-native-cli

yarn是替代npm，似乎方面点，也快一点。 官方说要用Python2，不过我Python3也试过了，感觉没什么影响。

接下来就要装Android Studio了，可以安装官方文档按部就班的安装配置，最后模拟器能跑起来，然后跑过命令：

adb devices

可以看到你打开的模拟器或者连接的实体机就算OK啦。

接下来跑命令:

react-native init AwesomeProject

cd AwesomeProject

react-native run-android

这个命令会开一个Metro Bundler在指定端口上，像一个JS server，以后debugger是要attach这个端口进行调试的。

关于端口

Expo的端口默认是19001，基本不会与其他程序冲突。

第二种方式启动的话默认端口是8081，与我本地的MaCfee端口冲突，又关不掉MaCfee，所以只好，切换端口啦。

两个地方需要改变

1.  set RCT_METRO_PORT=8088

2.  手机上的调试设置，摇晃手机：

DEV Settings:

Debug server host & port for device:

localhost:8088

之后再跑，端口就变了。

调试

也有两种方式：

1. Chrome调试

在Chrome扩展里安装React Developer Tools

之后摇晃手机点击 “Debug JS Remotely”会在chrome打开页面。

2. IDE调试

我这边用的是VSCode，其他工具类似。

首先在Extensions搜索“React Native”，安装插件。

然后点击调试里的小齿轮，选择React Native

更改Settings - WORKSPACE SETTINGS：

{

    "react-native.packager.port": 8088

}

点击"Attach to packager", 连接上你打开的JS server。

设置好断点，同事确定之前Chrome没有打开debug， 摇晃手机点击 “Debug JS Remotely”，可以看到进入到VSCode进行调试了。

大功告成。