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环境

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

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

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

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

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

ReactNative入门-用webstorm调试

目的之前一直用chrome调试,一个是不习惯前端调试方法,毕竟是android 出身嘛还是习惯IDE调试,还有就是源码位置总要滑到底才能找到,很麻烦。突然发现ReactNative也能用IDE调试真是...
  • anthony_3
  • anthony_3
  • 2018年01月12日 09:09
  • 164

WebStorm12配置react-native运行命令

步骤一步骤二步骤三步骤四步骤五
  • liuzonrze
  • liuzonrze
  • 2016年12月22日 21:13
  • 1452

WebStorm与ReactNative在window下android的配置

入坑到ReactNative,百度安装一大堆文章。记录自己配置过程。 推荐使用:WebStorm  理由:界面和AndroidStudio相似。 在   ReactNative官网    下载...
  • zdm32140
  • zdm32140
  • 2017年02月24日 17:13
  • 922

使用WebStorm创建/运行/调试React Native项目

说在前面 使用的WebStorm版本是2017.1.1.   一. 创建React Native项目  1.File->New->Project    2.在New Proje...
  • chq497130800
  • chq497130800
  • 2017年08月17日 10:10
  • 254

React-native Webstorm调试

Webstorm2017最新功能 现在网上分享的都是老版本的配置方法,新版运行iOS和Android十分方便! 1、首先找到运行按钮旁边的向下箭头,打开Edit Configurations 2、点...
  • mulingyingzi
  • mulingyingzi
  • 2017年04月06日 17:10
  • 1813

React Native调试心得

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

ReactNative 的开发工具WebStorm破解版使用+React Native 终端常用命令

WebStorm破解版使用: 打算用闲暇功夫想学习下React-Native技术 但苦于找不到一款好的代码编辑器(之前看一些视频教程推荐了用 Atom,用了时候发现太坑了),在朋友的介绍下,发现最...
  • qq_19678579
  • qq_19678579
  • 2017年06月19日 18:36
  • 981
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React Native应用设备运行及调试
举报原因:
原因补充:

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