资讯专栏INFORMATION COLUMN

关于React Native安卓应用调试,我遇到的那些坑

Jenny_Tong / 690人阅读

摘要:上周开始尝试使用开发,在安卓调试环境上踩了不少坑,花费了不少时间。安卓官方的虚拟机也是可以选择的,只是界面有点儿简陋,我没有找到如何缩放虚拟机界面的解决办法,所以放弃了。

上周开始尝试使用React Native开发app,在安卓调试环境上踩了不少坑,花费了不少时间。在这里总结一下,希望大家见到同样那些坑之后可以绕道而行。

首先说明,我是在Mac上进行开发和调试的,因此使用其他系统的同学们参考时请自行斟酌。

1)关于Android虚拟机的选择

RN官方推荐Genymotion,也确实比较好用,不过,我遇到的第一个坑也是从此开始的。在创建虚拟机时,建议你目前不要采用Preview版本的Nexus 5X和6P,其中存在一些bug会导致调试报错,我花了一天多的时间都没搞定,后来选择Nexus 5的稳定版本后非常顺利就通过了。

安卓官方的虚拟机也是可以选择的,只是界面有点儿简陋,我没有找到如何缩放虚拟机界面的解决办法,所以放弃了。

2)调试中的界面刷新问题

使用RN开发的一大优势就是修改app中的Javascript代码时无需重新编译应用,但是在Genymotion虚拟机中,按照官方的提示按 Command+M 却无法唤出开发菜单,这个在Genymotion中的解决办法是:按照如下图所示,拖动虚拟机右侧的功能分隔线,让几个操作按钮出现在虚拟机右侧,这时再按 Command+M 即可顺利唤出开发菜单

我在使用安卓官方的虚拟机时也遇到了刷新的问题,按F2键无法唤出开发菜单,不过通过命令行输入:adb shell input keyevent 82 还是可以解决这个问题。

3)安卓真机调试中遇到的问题

真机调试其实挺简单,首先用USB线将手机与电脑连接,并确保手机的usb调试选项打开,此时在项目根目录下运行:react-native run-android,即可在手机上进行调试。只要晃动手机,即可打开开发者菜单。

如果需要通过Wifi连接开发服务器,调试时很常见会遇到“Unable to download JS bundle”的错误,这时的解决办法是:

首先确保手机和电脑在同一wifi环境下

在程序主界面,晃动手机,点击dev settings

点击最后一项:Debug server host for device

在其中设置电脑的IP和端口,比如 192.168.1.101:8081,然后重新加载JS

还有人给出了一些其他的解决方案,不过我没有用上。
http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle

4)关于8081端口占用的问题

如果你同时开发安卓和iOS应用,或者有时在不同的应用之间进行切换,编译时可能会遇到端口8081被占用的问题,这时可以运行:lsof -n -i4TCP:8081,检查端口的使用情况,必要时可以通过:kill -9 <端口号>,杀死当前占用8081端口的进程。

先写这么多,想到其他的再更新。另外我建议在操作时尽量参考React Native官方的文档及比较标准的中文翻译,按部就班的进行,遇到问题再Google搜索解决方案,而不要一开始就依赖一些快速上手类的文章。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/12540.html

相关文章

  • Android开发那些事 - 收藏集 - 掘金

    摘要:系统中,那些能大幅提高工作效率的汇总持续更新中掘金前言条条大路通罗马。在执行某个动作时需要判断当前用户是否登录,如果没有登录则跳转至登录页快速开发工具类集合掘金应用工具类 利用 Chrome 开发者工具远程调试 Android 中的原生 WebView - 掘金之前写过一篇关于 Android Studio 断点调试技巧 的文章,但都是针对 Native 代码的调试,对于 Hybrid...

    Faremax 评论0 收藏0
  • react-native配置

    摘要:的配置首先要把安卓的环境搭上,才可以运行,接下来我就把我的搭环境的步骤写在下面这两个都可以安装,我的电脑是位的,安装完之后就要配置环境变量了环境的搭建的安装,我把我网盘的链接给大家,直接去下载就可以密码是,环境变量的设,就是你安装的位置 react-native的配置 首先要把安卓的环境搭上,才可以运行react-native,接下来我就把我的搭环境的步骤写在下面 这两个都可以安装,我...

    wudengzan 评论0 收藏0
  • android新技术

    摘要:酷炫即时通讯和开源项目汇总这是一个整理即时通讯和社交系统优秀开源项目的文档,项目上传欢迎提交更新。 UI之可折叠的TextView 先上效果 一、思路 1. 计算text的行数 实现可折叠的TextView最重要的一点是在setText()前计算出text所需的行数计算行数需要分为两种情况 1.1 没有换行符的text 行数等于text的宽度除于TextView的宽度 再判断text的...

    chanthuang 评论0 收藏0
  • JSer全栈化技术栈推荐(一)——原生移动端是天堂还是泥潭

    摘要:随着以服务器端的桌面端的和原生移动端为代表的全栈迅猛发展,真正生产环境中的前端技术全栈化已经逐渐变为可能。不过在一段时间之内,还是会继续向前冲。在刚刚结束的大会上,的作者宣布成为的技术顾问。 随着以服务器端的NodeJS、桌面端的Electron和原生移动端React Native为代表的全栈JS迅猛发展,真正生产环境中的JS/前端技术全栈化已经逐渐变为可能。尽管在前端以外的领域里,J...

    VPointer 评论0 收藏0
  • JSer全栈化技术栈推荐(一)——原生移动端是天堂还是泥潭

    摘要:随着以服务器端的桌面端的和原生移动端为代表的全栈迅猛发展,真正生产环境中的前端技术全栈化已经逐渐变为可能。不过在一段时间之内,还是会继续向前冲。在刚刚结束的大会上,的作者宣布成为的技术顾问。 随着以服务器端的NodeJS、桌面端的Electron和原生移动端React Native为代表的全栈JS迅猛发展,真正生产环境中的JS/前端技术全栈化已经逐渐变为可能。尽管在前端以外的领域里,J...

    includecmath 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<