react native打包apk

前言

最近自己的react native app已经完成了,博主想将其打包成android apk运行在安卓端的手机上。然后遇到了一系列的问题。经过一段时间的踩坑,已经成功打包成apk文件并在手机端正常运行和显示。下面介绍一下react native打包成android apk的原理和步骤。

基本原理

react native程序在调试的时候,在虚拟机端是通过连接本地node服务来获取js文件,所以可以实现热加载。但是要打包成apk时,需要将这些js文件打包成bundle包,当做android的运行资源。放置在assets目录下(离线包的方式)。

所以apk打包的过程是先将js文件打包成bundle包,然后再将程序打包成apk文件。

bundle打包

1.启动sever,即本地的node服务(之前调试过程中获取js文件的服务),在工程主目录下启动

npm start

2.创建bundle包存放目录

mkdir -p android/app/src/main/assets

注:可以手动创建

3.打包bundle

curl -k"http://localhost:8081/index.android.bundle">android/app/src/main/assets/index.android.bundle

注:从node服务拉取bundle包并存放到目标目录下

4.配置bundle运行环境

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

注:上述步骤的作用是配置入口文件、平台等。如果缺少上述的步骤,会报错,找不到入口文件。

APK打包

1.生成签名文件

使用keyTool工具生成签名文件,在jdk安装目录的bin\下运行

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

详细可参考官网:https://facebook.github.io/react-native/docs/signed-apk-android.html

-alias 后跟着别名,要记住这个别名,因为在项目中要进行配置,后面会让输入密码,也要记住,同样在后面配置中会用到。

运行完后,会在当前目录下出现my-release-key.keystore的文件,即签名文件。记住文件路径或将此文件导入到android/app目录下。

注:要保护你的签名文件私有,不要将其一起提交给版本控制工具(即暴露出去)

2.项目中配置签名文件信息

    1)在android/gradle.properties中配置

MYAPP_RELEASE_STORE_FILE=my-example-key.keystore            (---签名文件名)
MYAPP_RELEASE_KEY_ALIAS=my-example-alias                    (---签名名称)
MYAPP_RELEASE_STORE_PASSWORD=123456                         (---仓库密码)
MYAPP_RELEASE_KEY_PASSWORD=123456                           (---key密码)

    2)在android/app/build.graddle中配置

在androdi/app/build.graddle里面配置
  signingConfigs {
    release {
      storeFilefile ("签名文件路径")
      storePassword "仓库密码"
      keyAlias "签名名称"
      keyPassword "key密码"
            }
        }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release 
        }
    }

3.打包生成签名的apk

进入android目录,执行:

gradlew.bat assembleRelease

或者:

gradle assembleRelease

注:生成的APK文件在/android/app/build/outputs/apk下,去手机端安装你的app吧

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云计算教程系列

如何在CentOS 7上使用uWSGI和Nginx为Flask应用程序提供服务

在本指南中,我们将使用CentOS 7上的Flask微框架设置一个简单的Python应用程序。本文的大部分内容将是关于如何设置uWSGI应用程序服务器以启动应用...

20300
来自专栏happyJared

小巧实用的HTTP代理抓包工具:mitmproxy

这步比较简单,直接pip install mitmproxy,或者自行下载安装包。更多更详细的安装说明可以查看这篇文章:MitmProxy的安装

20320
来自专栏SpringBoot 核心技术

第十五章:使用SpringBoot validator让数据更真实

17030
来自专栏企鹅号快讯

python入门——解释器、编辑器、包的安装

解释器 python并不需要先编译再执行,而是直接由解释器解释执行。python解释器的版本目前主要以python2.7和python3.6(或python3....

26450
来自专栏python3

Django + Uwsgi + Nginx 的生产环境部署

使用runserver可以使我们的django项目很便捷的在本地运行起来,但这只能在局域网内访问,如果在生产环境部署django,就要多考虑一些问题了。比如静态...

2.7K40
来自专栏小狼的世界

phpExcel导出文件时内存溢出的问题

在使用PHPExcel导出文件时,经常会因为文件过大导致PHP内存溢出报错,为了解决这个问题,可以使用PHPExcel提供的参数进行优化。这里说的Excel文件...

25430
来自专栏JetpropelledSnake

Linux学习笔记之Linux启动级别

对于绝大多数Linux程序员来说,进入Linux系统后一般看到的是黑乎乎的界面(开发模式),因为系统如果启动选择开发模式,会减少启动时间,优化内存等。但是通常我...

13010
来自专栏小筱月

vue 路由 及 跳转传递参数的总结

64310
来自专栏Jerry的SAP技术分享

如何在Chrome development tool里查看C4C前台发送的请求细节

我们可以在Chrome development tool的network tab里观察到从前台UI发送到后台的HTTP请求:

35340
来自专栏about云

sqoop2系统入门之2汇总:用户指南shell命令

问题导读 1.sqoop2有哪两种运行模式? 2.哪个模式,有些命令不支持? 3.sqoop2辅助命令有哪些,作用是什么? 4.set命令是否连接sqoop ...

35160

扫码关注云+社区

领取腾讯云代金券