React-Native工程项目打包编译发布过程详解

前言

现在大红大紫的React-Native框架热度可谓与日俱增,React-Native的热更新操作,在开发过程中的确带来很多好处,但是对于发布来讲,不同平台却不尽相同, 下面来具体看一下Android和IOS两个平台是如何执行发布产品的。

React-Native之Android平台发布

Android平台有两种发布方式,一种是借助于命令行操作,另外一种是借助于Android Studio进行发布,具体步骤我们来看一下:

借助Android Studio发布版本

首先,借助于Android Studio生成签名keystore:

点击下一步,创建一个新的keystore,这里无需关心后缀名字,默认即可

上面主要是密码,建议全部设置一个密码,方便记忆,Alias这个不要忘记,最好把上面信息复制一份,选定一个自己熟悉的路径,点击OK保存。此时keystore已经生成完毕。

此时,你会发现,你可以继续生成一个apk,并且可以安装,但是却无法运行,发生闪退。

这是因为React-Native的android平台下默认没有生成资源文件也就是我们所有的js图片文件等等。

下面我们就来生成JS Bundle文件:

第一步,我们要创建一个assets文件在工程目录下,可以通过命令行操作,也可手动。(在项目根目录执行此命令即可)

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

第二步,生成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/

此时,我们已经完全生成了bundle文件了,你可以查看自己工程assets下的文件夹。

然后再一次进行打包,这次选择已经创建的keystore,输入alia和密码,生成apk,进行安装,测试已经正常运行了。

命令行发布版本

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

按提示输入信息用户密码等等。

  1. 设置gradle变量

把my-release-key.keystore文件放到你工程中的android/app文件夹下。

编辑~/.gradle/gradle.properties(没有这个文件你就创建一个),添加如下的代码(注意把其中的**替换为相应密码)

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
  1. 添加签名到项目的gradle配置文件
...
android {
    ...
    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
        }
    }
}
...
  1. 生成发行APK包
cd android && ./gradlew assembleRelease

cd android表示进入android目录(如果你已经在android目录中了那就不用输入了)。./gradlew assembleRelease在macOS和Linux系统中表示执行当前目录下的名为gradlew的脚本文件,运行参数为assembleRelease,注意这个./不可省略;而在windows命令行下则需要去掉./。

React-Native之IOS平台发布

相对于Android平台来讲,IOS平台的发布操作相对简单,只需要简单配置即可,具体的来看一下:

第一步选择Product ? Archive

生成导出后的ipa即为最终文件!

总结

总体来讲,React-Native的发布流程主要借助于原生Native的开发工具,具体操作也比较简单,只是部分注意事项稍加注意即可,比如android平台默认是没有生成bundle资源文件的,生成apk后会闪退等等。

时间: 2024-10-20 00:03:25

React-Native工程项目打包编译发布过程详解的相关文章

react native Xcode打包app发布ipa到蒲公英

1.找到react native 项目,用Xcode打开项目,如下图 2.确保运行的选项如下图这个: 3.确保苹果开发者的证书,有则可以直接打包,没有的话需要到苹果开发者官网添加证书并且下载放入本地,具体可看下一篇教程专门介绍登录苹果开发者网站 http://developer.apple.com,进入到证书配置生成后台,本文介绍有证书的情况下打包 4.查下如下: 查看run选择的模式, 4.然后开始打包,如下操作: 点击archive后默认都下一步 导出如下选择: 其余的都点默认的下一步,最后

React Native之属性类型检查机制详解 PropType 变成 prop-types

属性确认的作用 使用 React Native 创建的组件是可以复用的,所以我们开发的组件可能会给项目组其他同事使用.但别人可能对这个组件不熟悉,常常会忘记使用某些属性,或者某些属性传递的数据类型有误. 因此我们可以在开发 React Native 自定义组件时,可以通过属性确认来声明这个组件需要哪些属性.这样,如果在调用这个自定义组件时没有提供相应的属性,则会在手机与调试工具中弹出警告信息,告知开发者该组件需要哪些属性. React Native已经升级到0.51.0了,版本升级很快,但是对老

【React Native开发】React Native控件之WebView组件详解以及实例使用(22)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50676379 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 今天我们一起来看一下WebView组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同

C/C++编译链接过程详解

有些人写C/C++(以下假定为C++)程序,对unresolved external link或者duplicated external simbol的错误信息不知所措(因为这样的错误信息不能定位到某一行).或者对语言的一些部分不知道为什么要(或者不要)这样那样设计.了解本文之后,或许会有一些答案. 首先看看我们是如何写一个程序的.如果你在使用某种IDE(Visual Studio,Elicpse,Dev C++等),你可能不会发现程序是如何组织起来的(很多人因此而反对初学者使用IDE).因为使

react native 中textInput的value属性详解

TextInput用法就不多讲了,主要记录下遇到的一个怪问题. 背景:项目需要开发一个充值页面,需要一个输入框,然后几个按钮,输入框是允许用户自己输入任意金额,按钮是可以让用户快捷选择金额. 那么问题来了,一般来说是改变文本框的值就可以了. 比如这样 <TextInput placeholderTextColor='#cccccc' underlineColorAndroid='transparent' keyboardType={'numeric'} style={styles.inputSt

React Native Android Gradle 编译流程浅析

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 前面已经发车了一篇<React Native Android 从学车到补胎和成功发车经历>,接着就该好好琢磨一下 React Native 周边了,没看第一篇的可以先去看看:这里我们先从 React Native 的 Android 编译来简单揭晓一下 React Native 在集成的过程中到底干了哪些不可告人的坏事:由于我们项目准备以 Gradle 形式接入

反编译过程详解

这段时间在学Android应用开发,在想既然是用Java开发的应该很好反编译从而得到源代码吧,google了一下,确实很简单,以下是我的实践过程. 在此郑重声明,贴出来的目的不是为了去破解人家的软件,完全是一种学习的态度,不过好像通过这种方式也可以去汉化一些外国软件. 一.反编译Apk得到Java源代码首先要下载两个工具:dex2jar和JD-GUI 前者是将apk中的classes.dex转化成Jar文件,而JD-GUI是一个反编译工具,可以直接查看Jar包的源代码. dex2jar和JD-G

uboot主Makefile分析(t配置和编译过程详解)

1.编译uboot前需要三次make make distcleanmake x210_sd_configmake -j4 make distclean为清楚dist文件. make x210_sd_config  跳转执行mkconfig用来配置并生成config.mk(board/samsung/x210目录下为指定链接地址的与主uboot目录的config.mk不同) autuconfig.mk 2.框图 3.uboot主Makefile分析 3.1.uboot version确定(Make

uboot配置和编译过程详解【转】

本文转载自:http://blog.csdn.net/czg13548930186/article/details/53434566 uboot主Makefile分析1 1.uboot version确定(Makefile的24-29行) Makefile代码部分: [plain] view plain copy VERSION = 1 PATCHLEVEL = 30 SUBLEVEL = 4 EXTRAVERSION = U_BOOT_VERSION = $(VERSION).$(PATCHL