React Native应用设备运行及调试

转载 2016年06月01日 20:16:31

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真机。

  1. Android 模拟器
    Android模拟器,使用的是genymotion。因为genymotion相当于是一个Android虚拟机,运行相当流畅快速,需要安装genymotion教程私聊我。现在我就假设已经安装好了Android虚拟机。
    在终端运行 adb devices 查看当前通过android 调试桥连接的Android设备有哪些,如果Android虚拟机准备成功,就如下图所示:
    这里写图片描述
    现在就可以在终端输入 react-native run-android 进行运行应用。

  2. 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/

《React Native》之程序调试篇

代码调试,在程序开发的过程中尤为重要,能协助开发者快速定位问题。  此文重点介绍React Native开发的程序调试工具及过程。  呼出Developer Menu对话框,如下图所示: A...

海马玩模拟器——搭建React Native环境

Visual Studio Emulator for Android 模拟器国内这网络环境不太好用,所以使用海马玩模拟器,给大家推荐一下!下面开始配置环境: 1)下载JDK,配置JDK环境1.8以上...

创建react native项目并在genymotion上运行

一、创建新项目并运行 1、新建项目 在计算机中新建一个文件夹存放工作文件(workspace),并打开终端,进入该文件夹目录下,创建新项目:本项目名为Test react-native ini...

React-Native初学者的模拟器调试及真机调试

上周五才开始学习的React-Native开发,之前略有一些React的开发经验,但对原生Native的开发一窍不通。 好,背景交代完毕,讲讲我的初学经历和遇到的坑以及一些心得体会。 作为对APP开发...
  • luke_up
  • luke_up
  • 2016年12月11日 17:33
  • 3410

一步一步在Windows下搭建React Native Android开发环境

搭建JAVA开发环境根据操作系统分为x86或x64位的,下载jdk1.8以上的版本,本机安装时的java版本:jdk-8u45-windows-x64.exe配置JAVA的环境变量JAVA_HOME ...
  • itpinpai
  • itpinpai
  • 2016年03月05日 16:15
  • 25156

【React Native】—— 如何搭建环境开发?麻瓜只看这一篇也足够啦

本文介绍了React Native 在Mac、Windows、Linux系统上搭建Android IOS开发环境,以节约大家宝贵的时间。...

《React Native入门到放弃》——ios篇

随意安装了os 10.9、os 10.10的mac系统来玩 ,被坑惨了
  • kernel_
  • kernel_
  • 2016年10月08日 12:12
  • 463

React Native调试技巧与心得

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率。本文将向大家分享React Na...

使用Chrome开发者工具来在设备上调试

如果需要使用chrome开发者工具调试手机设备上的js,需要先参考  react native reload相关问题解决办法 进行配置, 在开发者菜单中选择"Debug JS Remote...

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

(一)前言                前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Deb...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native应用设备运行及调试
举报原因:
原因补充:

(最多只允许输入30个字)