React-Native项目在Android真机上调试
React-Native项目在Android真机上调试?接下来直奔主题,通过USB将手机和电脑连接,打开手机上的USB调试。不通型号的手机可能设置方式不一样,这里具体不在细说……
1、确保你的设备已经成功连接。可以终端输入adb devices来查看:
$ adb devices
List of devices attached
"Your device Name" device
注意:为避免调试出现其他问题,此处只需有一台设备连接,如果模拟器打开需要关闭模拟器;
2、终端运行npm start 开启本地服务,成功后运行react-native run-android来在设备上安装并启动应用
应用成果安装后不出意外的话会提示无法连接服务器,如下图:


出现此问题是因为我们未给手机设置访问开发服务地,模拟器是直接访问电脑本地服务,真机则需要我们手动配置了
3、设置设备访问开发服务器
3.1 (Android 5.0及以上)使用adb reverse命令
- 运行
adb reverse tcp:8081 tcp:8081 - 不需要更多配置,你就可以使用Reload JS和其它的开发选项了。
3.2 (Android 5.0以下)通过Wi-Fi连接你的本地开发服务器
- 首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
- 在设备上运行你的React Native应用。和打开其它App一样操作。
- 你应该会看到一个“红屏”错误提示。这是正常的,下面的步骤会解决这个报错。
- 摇晃设备,或者运行
adb shell input keyevent 82,可以打开开发者菜单。 - 点击进入
Dev Settings。 - 点击
Debug server host for device。 - 输入你电脑的IP地址和端口号(电脑网络IP:8081)。查看电脑IP这里就不用多说啦。
- 回到开发者菜单然后选择Reload JS。
备注:理想状态下已经可以看到APP页面了,但是,如果上面步骤都已经做好,并且电脑本地服务终端已显示加载成功,但是APP的页面还未加载出来,显示白屏状态!是我们的步骤有问题?这里并不是我们的步骤有问题,此时只需要退出正在运行的APP,重新打开即可,就可以成功加载到APP页面啦!
React-Native项目在Android真机上调试的更多相关文章
- 关于React Native项目在android上UI性能调试实践
我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到.要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是统一处理的,这意味着你没办法像iOS那样 ...
- Charles学习(四)之使用Map local代理本地静态资源以及配置移动端代理在真机上调试iOS和Android客户端
前言 问题一:我们在App内嵌H5开发的过程中,肯定会遇到一个问题就是我不想在chrome的控制台中调试也不想在模拟器中调试,我想要在真机上调试,那么如何解决这个问题呢? 问题二:我们期待调试时达到的 ...
- 安装android Studio和运行react native项目(基础篇)
ANDROID_HOME环境变量 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径. 打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设 ...
- 如何在真机上调试Android应用程序(图文详解)(zz)
http://www.cnblogs.com/lanxuezaipiao/archive/2013/03/11/2953564.html 1.首先将手机设置为调试模式 方法:设置——应用程序——开 ...
- 【React Native开发】React Native应用设备执行(Running)以及调试(Debugging)(3)
),React Native技术交流4群(458982758),请不要反复加群.欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
- Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo,expo的局限性,开发时项目选型注意点等
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- eros --- Windows Android真机调试
1.下载并安装JDK 2.下载并安装Android Studio 上面两项不管用weex还是eros都是前置条件,度娘有大量教程. 开始eros 手脚架安装: $ npm i -g eros-cli ...
- React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
随机推荐
- python使用openpyxl操作excel总结
安装openpyxl pip install openpyxl 简单示例 from openpyxl import Workbook #创建一个工作薄对象,也就是创建一个excel文档 wb = Wo ...
- 易初大数据 2019年11月13日 Linux 王庆超
★安装Red Hat Enterprise Linux7.41 ◆1通过键盘的方向键选择“lnstall Red Hat Enterprise Linux7.4”选项来直接安装Linux 系统. ◆2 ...
- ValueError: zero-size array to reduction operation maximum which has no identity
数据打印到第530行之后出现以下异常,求解!
- MySQL-配置环境变量及修改密码(附-mysql安装教程)
MySQL-配置环境变量和修改密码 mysql的安装教程:链接:https://pan.baidu.com/s/1rrPT2X0yRF58kN8jZZx-Mg 密码:55dh 一. 闪退问题 1.1. ...
- 高德地图3D菱形 区域点击搜索
更新一波吧 <!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi.a ...
- JavaScript 弹出框:警告(alert)、确认(confirm)的简单写法
onclick="javascript:return window.confirm('message')"
- MathType转Word公式(OMML)
背景 由于之前个人喜欢在Word里做笔记,而有很多笔记里存在着大量的公式.在早期,由于对Word自身的公式的不理解,所以便使用了MathType这个工具来编写公式.但是现在本人已经转战到LatTeX了 ...
- sparkSQL 简介
一.Spark SQL的特点 1.支持多种数据源:Hive.RDD.Parquet.JSON.JDBC等.2.多种性能优化技术:in-memory columnar storage.byte-code ...
- javascript 使用 setInterval 实现倒计时
javascript 使用 setInterval 实现倒计时 var timer = setInterval(function () { console.log(valid_time); if (v ...
- Java实现AES加密解密
之前常用两种加密算法:Base64和Md5,前者容易破解,后者不可逆. AES采用对称加密方式,破解难度非常大,在可逆的基础上,能很好的保证数据的安全性. 这里介绍Java中实现AES加密算法的加密与 ...