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 ...
随机推荐
- Golang 基础学习笔记(2)| 如何安装Go工具
可参考官网:http://docscn.studygolang.com/doc/install#安装 1.OS要求 gc 编译器支持以下操作系统及架构.在开始前,请确保你的系统满足这些需求. 若你的O ...
- layui多级弹框去掉遮罩
var index = layer.open({ type:1, title:'请选择费用代码', area:['1050px','650px'], content:$('#selectFee'), ...
- zookeeper集群模式安装
服务器节点规划: 节点1:192.168.0.103 节点2:192.168.0.104 节点3:192.168.0.105 安装zookeeper,将zookeeper上传到三个服务器,保存在/ho ...
- EFK教程 - ElasticSearch高性能高可用架构
通过将elasticsearch的data.ingest.master角色进行分离,搭建起高性能+高可用的ES架构 作者:"发颠的小狼",欢迎转载与投稿 目录 ▪ 用途 ▪ 架构 ...
- 008.Kubernetes二进制部署Nginx实现高可用
一 Nginx代理实现kube-apiserver高可用 1.1 Nginx实现高可用 基于 nginx 代理的 kube-apiserver 高可用方案. 控制节点的 kube-controller ...
- Docker学习-Docker搭建Consul集群
1.环境准备 Linux机器三台 网络互通配置可以参考 https://www.cnblogs.com/woxpp/p/11858257.html 192.168.50.21 192.168.50.2 ...
- T-SQL Part XI: Login Failed 18456 以及修改Authentication Mode
这是一个很常见的场景,安装SQL Server时候选择了默认的Windows Authentication Only,然后使用中发现还是需要支持用户名/密码登录. 按照MSDN的文档,然而并没有多大作 ...
- java编程思想第四版第十八章总结
一.概述 如何学习java I/O 学习I/O类库 学习I/O发展史,为什么要学习发展史呢? 因为,如果缺乏发展史,我们就会对什么时候使用哪个类,以及什么时候不该使用它们而感到迷惑. 了解nio 二. ...
- 自建yum仓库,该仓库为默认仓库
YUM REPO: http://content.example.com/rhel7.0/x86_64/dvd 创建自建yum REPO文件: vim /etc/yum.repos.d/redhat. ...
- 小白学 Python 爬虫(2):前置准备(一)基本类库的安装
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 本篇内容较长,各位同学可以先收藏后再看~~ 在开始讲爬虫之前,还是先把环境搞搞好,工欲善其事必先利其器嘛~~~ 本篇 ...