React Native应用设备运行及调试

React Native应用设备运行及调试

（一）前言

前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解，今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging)。本节的前提条件就是大家已经搭建了React Native的相关环境。

（二）创建React Native项目

需要调试运行应用，首先我们需要使用react-native init project-name 创建项目，这个步骤虽然在之前我们已经讲过，在此再演示一下。

2.1 命令行创建项目

命令行运行:react-native init TestOne [注].该命令创建项目时间有时候会比较耗时，一般几分钟吧，请耐心等待!运行日志截图如下:

2.2 相应目录结构

目录结构如图所示：

2.3导入IDE

打开Atom 或者WebStorm后者VS Code,进行编写代码即可。

（三）应用运行（Running）

3.1 iOS平台运行

如果使用Atom或者WebStorm打开应用进行编码，通过点击项目下ios文件下的项目文件打开并运行。如果是选择iOS模拟器，直接 command+R 运行项目 ；如果是iOS真机设备，那修改AppDelegate.m文件如下图所示：

jsCodeLocation = [NSURL URLWithString:@"http://Your Computer IP address :8081/index.ios.bundle?platform=ios&dev=true"];

并且真机与电脑需在同一个WiFi环境下。最后这些设置都完成以后，连上真机设备，选择真机，command + R 运行程序。

3.2 Android平台运行

首先Android平台程序运行也分两种，Android模拟器和Android真机。

Android 模拟器

Android模拟器，使用的是genymotion。因为genymotion相当于是一个Android虚拟机，运行相当流畅快速，需要安装genymotion教程私聊我。现在我就假设已经安装好了Android虚拟机。

在终端运行

adb devices

查看当前通过android 调试桥连接的Android设备有哪些，如果Android虚拟机准备成功，就如下图所示：



现在就可以在终端输入

react-native run-android

进行运行应用。

Android 真机

如果你需要应用运行在真机设备中，那么我们首先设备要开启USB调试模式。具体真机怎么样打开USB调试模式，请百度点击打开USB调试模式。如果参考百度的做法出现任何问题，概不负责。

真机打开USB调试模式之后，然后连接电脑，再次命令行adb devices可以查看当前的设备列表信息，如下图所示：



现在大家可以看到里边有一台设备已经连接了，不过如果我们需要运行应用的话，那我们必须确保当前只有一台设备已经连接即可了。自此，光是连接了设备并没有完成步骤，还是要让设备和电脑在同一个WiFi环境下面。

接下来我们命令行运行以下命令:

react-native run-android

接着就开始编译代码了，然后运行程序到设备中了。其实这时，你会发现会发生屏幕是红色的。截图如下：



解决步骤如下：

Android 5.0以上及更高版本通过以下方式：

使用adb reverse命令

首先你的设备连接电脑，然后打开USB调试模式。接着命令行运行

adb reverse tcp:8081 tcp:8081

然后我们就可以使用Reload JS和其他的开发选项了。

Android5.0以下版本解决方式：

a. 摇晃设备或者命令行输入adb shell input keyevent 82，打开开发者菜单，如下效果：



b. 点击Dev Setting进入，然后选择Debug server host & port for device

c. 输入电脑的IP地址和端口号（主要查看电脑的IP地址，这边用我的IP地址和端口，具体根据实际情况哦），截图如下：



d. 回到开发者菜单，然后选择点击Reload JS.重新加载即可。

3.3 实时访问服务器数据（目前指本地服务器）

在开发过程中，修改了js文件之后，我们不可能每次都需要重新运行项目，可以采用实时刷新来重新加载js文件。

a. 在iOS设备上，相对Android是很简单的，我们只需要command + R之后，就可以重新加载js文件，而并没有重新运行项目。

b. 在Android平台上，相对复杂。由于在现在很多设备都取出了Menu键，这时候我们可以通过摇晃设备来进行打开菜单，点击Reload JS重新加载 js 文件。

（四）应用调试（Debugging）- 针对Android应用设备

4.1 访问应用内开发者菜单

Android设备通过摇晃设备或者点击菜单键（不过现在很多手机已经没有这个模拟按键了）。如果你使用genymotion模拟器，可以点击模拟器右下方向下的箭头，然后再点击出现的那个长方形的按钮，就会出现选项框。

【注意】如果我们的APP正式发布的话(Release版本)。默认情况下我们采用gradle的assembleRelease来进行构建即可。或者通过代码ReactInstanceManager的setUseDeveloperSupport方法来进行设置是否开启调试支持。

4.2 应用刷新

正常情况下，如果我们只是修改应用的JS代码的话，那么我们可以直接点击Reload JS选择实时刷新即可。但是如果我们修改Android项目中的资源文件(例如res/drawable文件中图片)或者修改Android的源代码，那么就需要重新编译生成应用才可以生效。

4.3 Chrome开发调试工具

应用进行调试的时候，我们可以使用Chrome来调试js代码，点击开发菜单中的Debug in Chrome。然后会打开一个网页: http://localhost:8081/debugger-ui 界面截图如下:



不过第一次打开需要安装React DevTools(最好翻墙一下)。

安装方法教程:

http://facebook.github.io/react/blog/2015/09/02/new-react-developer-tools.html

Chrome添加开发调试插件:



安装完插件，回退到原来的界面，然后刷新一下即可:



打开开发者工具：

想必做过Web前端开发的人都知道：Chrome中可以使用option+cammod+i打开或者Chrome选择菜单-更多工具-开发者工具来进行打开控制台。不过如果我们的程序出现异常话，可以开启(Pause On Caught Exceptions)。这样程序出现异常的时候，程序会暂停执行可以更好的调试错误。

4.4..实时刷新JS

我们可以进行那个如下修改，当我们前端JS代码发生更改的时候，自动让设备进行刷新界面。

在Android平台上面，打开开发者菜单，选择Dev Settings,然后点击Auto reload on JS change选择，不过有些版本好像没有这个更选项了，默认自动刷新的。

转载自：http://www.lcode.org/