【React Native开发】React Native应用设备执行(Running)以及调试(Debugging)(3)

转载请标明出处：

http://blog.csdn.net/developer_jiangqq/article/details/50508534

本文出自:【江清清的博客】

(一)前言

【好消息】个人站点已经上线执行,后面博客以及技术干货等精彩文章会同步更新。请大家关注收藏:http://www.lcode.org

前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的解说，今天我们的主要解说的是应用设备执行(Running)以及调试方法(Debugging)。本节的前提条件就是大家已经搭建了React Native的相关环境。假设没有请关注第一讲(点击进入)。

刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758)，请不要反复加群。欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

(二)创建React Native项目

须要执行和调试应用。首先我们须要使用react-native init xxproject来创建一个项目，这个步骤尽管在之前我们已经讲过了，只是这边在演示一下。

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

2.2.在对应文件夹生成项目。项目的文件夹机构例如以下:

2.3.最后我们通过IDE引入该项目(Atom或者WebStorm)，进行编写代码就可以。

(三)应用设备执行(Running)

[注意].假设你须要应用执行在真机设备中，那么我们首先设备要开启USB调试模式。详细真机怎么样打开USB调试模式，请百度哈(点击打开USB调试模式)

真机打开USB调试模式之后，然后连接电脑。命令行adb devices能够查看当前的设备列表信息。只是我如今电脑没有连接真机。全部仅仅有会显示模拟器信息了。

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

如今大家能够看到里边有一台设备已经连接了，只是假设我们须要执行应用的话，那我们必须确保当前仅仅有一台设备已经连接就可以了。接下来我们命令行执行下面命令:

react-native run-android

接着就是開始编译代码。然后执行程序到设备中了。

[注意]

在真机上执行时可能会遇到白屏的情况，请找到并开启悬浮窗权限。比方小米系统设置(点击设置)

3.1.从设备上面訪问实时服务器数据(这边服务器指本地代码)

当我们启动开发服务的情况下，我们能够通过下面两种方法来更新远程代码来高速的更新改动我们的应用

[注意]如今非常多Android设备以及那个去除了Menu按键了。这时候我们能够通过摇晃设备来进行打开菜单,然后完毕应用的又一次载入，调试以及其它功能。

• Android 5.0以上及更高版本号。能够使用adb reverse命令

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

adb reverse tcp:8081 tcp:8081

然后我们就能够使用Reload JS和其它的开发选项了。

• Android 下面版本号能够通过Wifi连接

①.手机和电脑USB连接而且电脑和手机设备在同一个Wifi网络环境下

②.採用react-native run-android执行应用。

③.如今会发现屏幕是"红色"，继续下面的步骤进行解决,截图例如以下:

④.摇晃设备或者命令行输入adb shell input keyevent 82，打开开发人员菜单。例如以下效果:

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

⑥.输入电脑的IP地址和port号(主要查看电脑的IP地址哦,。这边用我这边的IP地址和port。详细要依据实际情况哦)，截图例如以下：

⑦.回到开发者菜单。然后选择点击Reload JS。又一次载入下面就可以。

(四)应用调试(Debugging)-针对Android应用设备

4.1.訪问应用内开发人员菜单

Android设备我们能够摇晃或者点击菜单键(只是如今非常多手机已经没有这个模拟按键了)。

假设你使用的是genymotion模拟器，你能够打开应用，然后发现屏幕右下方有一个箭头，点击然后点击菜单图标就可以。截图例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

[注意]假设我们的APP正式公布的话(Release版本号)。默认情况下我们採用gradle的assembleRelease来进行构建就可以。

或者通过代码ReactInstanceManager的setUseDeveloperSupport方法来进行设置是否开启调试支持。

4.2.应用刷新

正常情况下，假设我们仅仅是改动应用的JS代码的话，那么我们能够直接点击Reload JS选择实时刷新就可以。可是假设我们改动Android项目中的资源文件(比如res/drawable文件里图片)或者改动Android的源码。那么就须要又一次编译生成应用才干够生效。

4.3.Chrome开发调试工具

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

只是第一次打开须要安装ReactDevTools(最好翻墙一下)。

安装方法教程:

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

Chrome加入开发调试插件:

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

怎样打开开发人员工具:

想必做过Web前端开发的人都知道：Chrome中能够使用option+cammod+i打开或者Chrome选择菜单-很多其它工具-开发人员工具来进行打开控制台。

只是假设我们的程序出现异常话。能够开启(Pause On Caught Exceptions)。这样程序出现异常的时候，程序会暂停执行能够更好的调试错误。

真机调试方法:

①.针对Android 5.0或更高版本号的设备，能够通过USB连接。然后使用adb命令建立一个设备到电脑的转向port:命令例如以下:

adb reverse tcp:8081 tcp:8081

或者摇晃打开开发人员菜单，选择DevSettings。然后Debug server host for device中设置电脑的IP和port号。

②.针对Android5.0下面的设备。连接方式Wifi，其它步骤几乎相同哦。

4.4..实时刷新JS

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

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

(五)最后总结

今天我们主要解说了React Native应用设备执行方式和真机方式，主要材料来自React Native官网，这边全部步骤我已经全部測试过下的。由于解说起来和实际使用还是回遇到各种问题的。

大家有问题能够加一下群React Native技术交流群(282693535)或者底下进行回复一下。

尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵权必究！

关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)

关注我的微博。能够获得很多其它精彩内容