React Native Mac 下打包Android APK

打包的时候遇到了 好多坑  这里记录下~
主要步骤:
1.android  keystore签名的生成
2. gradle mac下环境变量的配置
3.android  studio中的gradle配置。
4.打包


1. 签名的生成
 ```
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000


“my-release-key.keystore“  签名的名称  
 “my-key-alias ”   签名别名
有效期为10000天


```
```
mac 下 打开终端
$ cd ~
$ sudo keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
```
执行完之后,输入本机的 权限密码 然后 输入秘钥密码  一般为:至少必须为 6 个字符
![image.png](https://upload-images.jianshu.io/upload_images/4731495-d18e3f1805744c25.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
接下来就是一些信息 可填可不填
![image.png](https://upload-images.jianshu.io/upload_images/4731495-ae305d3cecea0027.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这里按下回车 别名 和 秘钥名一致 回车
![image.png](https://upload-images.jianshu.io/upload_images/4731495-86462b043038f3e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
把生成的keystore 文件 放在 android 工程 app目录下 ,我这里新建了一个文件夹
![image.png](https://upload-images.jianshu.io/upload_images/4731495-76e9ac915dc03ae3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


之后就是按照官网文档 配置 android gradle文件:
![全局配置keystore](https://upload-images.jianshu.io/upload_images/4731495-f084ee54ca721c43.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在android/app/build.gradle,添加如下的签名配置
![image.png](https://upload-images.jianshu.io/upload_images/4731495-f5be4d6e772a7976.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


这里没有用全局 你也可以像官网这样
```
 defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
```
然后再package.json 文件中 添加 如下脚本
```
进入 android目录下  执行 ./gradlew assembleRelease
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"build_android": "cd android && ./gradlew assembleRelease",
},
这样在每次 打包的时候可以 在终端 执行
$ npm run build_android
```
注意:这个./不可省略;而在windows的传统CMD命令行下则需要去掉./  (别忘记)
到这里基本上是结束了,我也想一帆风顺,但是坑还是有的
![image.png](https://upload-images.jianshu.io/upload_images/4731495-6159c94043100f1e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


在执行 npm run build_android的时候 报错
![gradle环境变量问题](https://upload-images.jianshu.io/upload_images/4731495-ac6459e57c387338.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这里环境变量的配置参考了 这篇博文  讲的很详细 https://blog.csdn.net/u013424496/article/details/52684213
```
gradle command not found 这个错误一般是 gradle环境变量没有配置


```
如何配置gradle 环境变量 
![image.png](https://upload-images.jianshu.io/upload_images/4731495-0cb3586bdd30df96.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


```
cd ~
touch .bash_profile  
open -e .bash_profile 
这里如果打开.bash_profile  文件没有权限的话,可以按照博文中提到的那样做,
也可以 执行下面命令
sudo vim .bash_profile
```
![输入密码](https://upload-images.jianshu.io/upload_images/4731495-816c058ad542b090.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
输入e  进行编辑
![image.png](https://upload-images.jianshu.io/upload_images/4731495-5b2b88ba2a2cb851.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
输入 i 进入编辑模式 ,完成后 esc 然后:wq保存并退出。
![image.png](https://upload-images.jianshu.io/upload_images/4731495-5aa181d8c90055e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
完成之后 ,更新生效 .bash_profile 
```
source .bash_profile    
gradle -v
```
没生效的话,重新打开终端 
![环境变量配置完成](https://upload-images.jianshu.io/upload_images/4731495-704a3bf959e68417.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 到这里就结束了吗?哪有那么简单哦?坑是填不完的。。。
![image.png](https://upload-images.jianshu.io/upload_images/4731495-4107ef1a891f6855.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
what?什么鬼啊 还有这错误?
![image.png](https://upload-images.jianshu.io/upload_images/4731495-3858aa79af63dc33.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
```
如果你们也遇到这个错误: 
XXXXnode_modules/node-pre-grp/node_modules/.bin/detect-libc


好吧 ,建议 卸载 node_modules  然后再重新npm install  
 不想卸 也没办法,我也不想卸啊 ,改了一部分依赖源码........(脑壳青痛)


卸载的话, 安装这个 npm install rimraf --g


然后执行:npm install rimraf -g && npm install
```
![这个地方会有点慢,说明离成功已经很近了](https://upload-images.jianshu.io/upload_images/4731495-5dde9e4478266576.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![image.png](https://upload-images.jianshu.io/upload_images/4731495-acae926266fa0633.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![image.png](https://upload-images.jianshu.io/upload_images/4731495-fe5dd03297bbc0ca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


生成的apk 在 /android/app/build/outputs 目录下 然后 查看apk大小
![image.png](https://upload-images.jianshu.io/upload_images/4731495-bd6fc72f515bdfa5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
what?快30M了 什么鬼啊,
看了下图片 : 2.9M  
 代码:1.3M 依赖的包也不多啊,为什么打出来这么大啊? 有知道的小伙伴求告知!
![](https://upload-images.jianshu.io/upload_images/4731495-520998acb3040ccb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


android 比 ios打出来的包大是肯定的 因为:
安卓ReactNative虽然使用了JSCore,但这个JSCore不是系统源生的,而是直接打入app包里的WebKit库,这也是为啥安卓项目引入RN包大小会增大4~5M的原因,ReactNative在iOS上JSCore是系统自带的,完全可以不用打入app包内,所以iOS的包大小,引入RN后变化并没有那么夸张。



































  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值