【React-Native】windows环境下Android真机调试指南

最新推荐文章于 2024-09-29 15:25:37 发布

公西雒

最新推荐文章于 2024-09-29 15:25:37 发布

阅读量4.3k

点赞数 3

文章标签： react-native 调试 android ide

本文链接：https://blog.csdn.net/klo220/article/details/81868020

版权

react native 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

推荐使用IntelliJ IDEA作为react-native项目的IDE，它兼有Android Studio和WebStorm的功能，也就是既支持安卓开发同时也支持web开发（包括react的jsx语法），且调试起来相当方便。

准备工作

下载安卓SDK。
安装配置IDEA。
一个rn项目。
一台安卓手机，需开启USB调试。

真机调试

在项目根目录下shift+右键 -> 在此处打开命令行，输入adb devices查看已经连接的设备。

$ adb devices
List of devices attached
emulator-5554 offline   # Google模拟器
14ed2fcc device         # 真实设备

在右边那列看到device说明你的设备已经被正确连接了。注意，你只应当连接仅仅一个设备。

现在你可以运行react-native run-android来在设备上安装并启动应用了。

$ react-native run-android

调试时出现错误

遇到错误不要慌，rn虽然仍然有不少坑，但基本网上都有解决方案可以查到的。本着“授人以鱼不如授人以渔”的道理，我们来看一下下面这个错误，希望大家能够学会独立解决问题的思路，而不是单纯地解决这一问题。

这是一个真机调试时经常遇到的问题，认真阅读最上面的白字，意思是不能从index.android.bundle资源中加载script，并确认是否打包正确以及服务是否在运行。已经说的很明白了不是打包出了问题就是服务出了问题，所以作为程序员，还是有必要学好英语，或者动动手google翻译一下也好。

那么我们就先看一眼打包是否成功了。

很明显，BUILD SUCCESSFUL 生成成功。那我们就再看一下服务。

到这里成手就应该发现问题了，这里本来应该有一行加载服务的过程，可是这里却没有，也就是说，设备根本没有连接到服务上，但是服务本身也没报错误。不过新手第一次运行是不一定会知道怎么回事的。

没关系网上肯定有答案，我们搜索一下"unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server"，找到匹配度高的条目，一般第一条就是（其实这答案不靠谱，没必要执行这两步，一会儿我会给真正的解决方法）。

尝试了执行一下，报错。

error: option '--entry-file' missing

真不靠谱，换一个文章吧！于是打开搜索的第二条。原来正确的命令是这样的。

$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output
 android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

OK，执行完命令，再run-android，页面出来了：）

不过别高兴的太早，页面显示的不是Hello World. 而是Welcome to React Native! 找到App.js文件改成Hello World!

然后需要刷新页面，这时不需要再run-android了，Reload就行（摇一摇你的手机或者点手机菜单键，会弹出下面菜单，选择Reload）。

等等，怎么报错了？

报错Could not connect to development server. 这里就不得不说下，之前提到了我们的问题其实是设备上的app没连接上服务。再看下刚才的命令都是对打包的处理，由此判断刚才执行的命令其实根本没有解决我们的问题。

好了，在reload之后，错误提示更明显了，我们就寻求真正的解决方案吧！再细读一下提示的解决方法，注意到这一句。

If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev Settings' to your machine's IP address and the port of the local dev server - e.g.10.0.1.1:8081

这句话的意思是如果你的设备同你的服务在同一个wifi环境下，设置开发服务主机和端口号为你本地服务的IP地址。试一下看看行不行。摇一摇你的手机或者点击手机菜单键 -> 选择Dev Settings -> 选择Debug server host & port for device -> 输入你电脑的ip地址和端口号（如：192.168.0.1:8081）

设置完再Reload一次，成功了！还是错误提示相对靠谱些。

同时也证明了确实是设备没连接到服务。

根据解决这个问题的过程和结果，我们总结一下基本思路：

先看错误提示，分析可能是哪几种情况导致的错误；
看看提示中是否有解决方案，如果有则根据第一步的推测选择合适的方案尝试解决错误，如果尝试无效，就每个方案都试一下；
（补充）还是没能解决错误或者摸不着头脑的时候，可以上react-native官方GitHub上查找答案或提问；
没找到答案又不想提问等太久，自行Google/Baidu关键字。

遵循这个思路基本可以解决大部分问题，如果真的遇到不可解决的bug，也就只能去github上提问或者想一些其他的解决方案了。

IDEA配置

设置JSX语法

刚刚安装好IDEA的同学会发现打开App.js的文件时，会提示各种语法错误，并且能看到这样一个提示。

只要点击右侧的switch即可。那如果点了dismiss怎么办啊？别着急，也能在设置里找到。点击菜单栏 File -> Settings -> 展开左侧 Languages & Frameworks -> 点击 JavaScript -> 右侧 JavaScript language version 选择 React JSX。

显示Logcat

log 作为开发中使用最频繁的功能之一，当然是越方便调试越好。

react-native 自带log功能，在 run-android 后打开一个新的命令行 log-android 即可，不过这样很不方便，服务一断就需要重新输一遍命令，这时候就推荐使用强大的IDEA了。

IDEA有一个Logcat窗口，可以实时监听 log，不但能显示Android原生代码的log，还能显示react-native的log，只是默认情况下，你是看不到Logcat的。

怎么配置呢？点击IDEA右上角下图中的这个图标打开 Project Structure，当然你也可以通过快捷键 Ctrl+Alt+Shift+S来打开，或者点击菜单栏 File -> Project Structure。

打开后的Project Structure是这样的。

第一步就是选择Project SDK。选择左侧Project，在右侧的Project SDK选择SDK，如 Android API 26 Platform (java version "1.8.0_172") ，然后Apply。

第二步查看资源是否完整。选择左侧的Modules，右侧选择Sources选项卡，查看Mark as: 后面是否有 Sources,Tests,Resources,Test Resopurces,Excluded，通常情况下是有的，如果没有则点击中间栏中"-"按钮删除当前项目的Modules配置，再点击"+"按钮选择 Import Module 导入项目，导入时选择 Import module from external model -> 选择 Gradle -> Next -> 选择 Use gradle 'wrapper' task configuration （其他保持默认即可） -> Finish。如果还没有 Mark as ，则选择 Language level。最后Apply。

第三步添加Android。点击中间栏中的项目 -> 点击"+"按钮 -> 选择 Android。检查下右侧路径是否正确，一般是没问题的。

最后，点击 OK 按钮。

Logcat简单使用

如图：

Logcat窗口的切换按钮，只要进行了上面的配置，这里就会新出现这个切换按钮。Logcat窗口中会显示当前设备运行app时的所有log，包括react-native的log。
当前设备。
选择log级别，可以切换Debug/Info/Warn/Error等级别。
搜索log，输入想要查询的某个log关键字，可以快速地在满篇的log中筛选出想要看的log。比如，我只想看rn的log，那么就输入ReactNativeJS即可。