reactNative如何打Debug版安装包(android)

Posted 2020-10-10

最近被自动化组的妹子追要索要 ReactNative 的Debug版的安装包进行自动化测试，啥？？debug版包？

没听过啊，好吧。。。。

之前一直以为debug调试只需要把手机用usb连接到电脑上然后执行命令：react-native run-android调试就好，哪晓得还有这小东西，既然要搞那就开始研究吧！

一.  ReactNative打包APK(android版本)

官方的react native打包APK的情参考官方文档：

http://reactnative.cn/docs/0.49/signed-apk-android.html#content

官方打包的基本步骤分为这几步骤：

首先要安装万恶的Android SDK，这个可是需要科学上网的（就是翻墙）哦！

1.生成一个签名密钥文件（一个app仅生成一次）

2.设置gradle变量（把第一步生成的签名文件放到工程下并配置gradle信息）

3.添加签名到项目的gradle配置文件

4.生成发行APK包（在工程的android目录下执行命令：./gradlew assembleRelease）

执行完第4步，就可以生成出发行包了如下图：

二.  ReactNative开发debug真机调试

详情请参考文档：http://reactnative.cn/docs/0.49/running-on-device-android.html#content

译注：在真机上运行时可能会遇到白屏的情况，请找到并开启悬浮窗权限。比如miui系统的设置在此处。

1.首先把手机与电脑进行连接，弹出图A，然后点击弹出的USB选项，选择“传输文件(MTP)”   如图B：

图A：         图B：

2. 手机连接成功后，把控制台目录切换到android目录下，执行命令：react-native run-android

命令执行会打开一个后台窗口（自动开启一个server,咱们给这个窗口起名myDog吧），同时会在你的手机上安装debug版本的安装包，安装完成后即可进行调试.......

大彩蛋：

              

安装完后你摇一摇你的手机会有神奇的效果，当然，要查看控制台的console输出，在这个神奇效果页面上点击"Debug  JS Remontely", 会自动打开浏览器，按照浏览器上的提示操作即可看到控制台信息。

三.  ReactNative打debug版本的APK安装包

打debug版本的安装包，与 第二步骤基本相似。

debug调试需要连接电脑开启一个server，就是第二步骤上自动开启的那个窗口myDog，如果做成安装包的话，需要手动生成一个bundle文件，这样就不再需要开启这个server窗口了(要打成包的话，上哪儿弄这个窗口啊)，如下命令生成bundle文件：

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

请在android的父目录下执行该命令(请配置好自己的... /.../src/main/assets/... 目录和..../src/main/res)我的目录如下：

执行完毕上面的命令后，会生成2类东西，一个是bundle文件，另一个是所有的被重新命名的静态图片，新名称就是静态图片的存放路径，如下2个图：

上面的红色文件是bundle文件、下面的红色文件是对图片打包。

注意：

生成的图片可能不在drawable-xxxhdpi目录下，可能在drawable-hdpi或者drawable-mdpi目录下，此时需要手动的拷贝这些图片到drawable-xxxhdpi目录下。

我的静态图片的存放路径是：

正确的执行完命令，并且生成bundle文件、图片文件后，再次把手机与电脑连接执行【第二步骤】，执行完在手机上安装app的同时，也会生成一个app-debug.apk的包，这就是我们期待已久的debug安装包，

好了终于可以向妹子交差了！

本文出自 “大棕熊IT” 博客，请务必保留此出处http://mamadu.blog.51cto.com/2662137/1972115