react reactive 怎么打成apk包?

434 阅读2分钟

前言

前两天接了一个新需求,两年前的APP代码需要用在新项目上。我还以为没问题,毕竟和uniapp也“相爱相杀”一段时间。好不容易找到代码拉下来一看傻眼了,居然是react的,这咋弄成app啊!以前也做过react的移动端,但那是H5类型的,直接yarn build就没事了。研究了两天终于成功打包,下面就介绍一下react native怎么打成apk包

前期准备:

  • 电脑要安装Android sdk和Android studio,编译工具VSCode
  • 一个运维人员协作

思路: 项目代码分为两部分,用android的壳包react代码。

  • react代码:业务代码,开发功能模块,运行可在pc端直接调试。打包通过命令行yarn build.
  • android代码:安卓的各种配置,每个项目的配置都不一样,需要修改。

image.png

第一步:

先替换代理地址,react的代理配置只需要在package.json文件中配置proxy字段即可

image.png 然后代码打包给运维部署后会得到一个访问链接。

第二步:

在android项目中替换上面的得到的链接 image.png

Android要求所有的APP都需要进行数字签名后,才能够被安装到相应的设备上。所以我们还需要申请签名密钥。

// 申请密钥
$ keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
// 查看密钥
keytool -list -v -keystore test.keystore  
Enter keystore password: //输入密码,回车

image.png

将生成的密钥放在android/app文件夹下,在android/app/build.gradle中添加响应配置

image.png

image.png

因为新项目要生成新的app包,要修改这个文件名,以及代码中包名所有相关的地方都要一致

image.png 地图定位的相关配置,在app.js里添加相应的权限请求以及替换高德key(用sha1值和包名唯一申请的)

image.png

以及最最最重要的项目下android文件夹要有这个文件,否则报错sdk找不到。文件内容就是本机sdk的路径

image.png

image.png

命令行打包

// 进入android文件夹
cd android

// 在终端进入android目录下执行以下命令

gradlew assembleRelease

最后,在xx\android\app\build\outputs\apk\release文件夹下可以找到apk包了!