微信号:sufernet

介绍:html+css、javascript、jquery知识分享,web前端开发实例及最新web前端资讯发布.

react-native项目打包发布

2016-04-25 15:31 swimly

    上周给大家分享过react-native的项目搭建,相信大家已经成功跑起来一个hello world。是否有些按捺不住心中的狂喜,万丈高楼平地起,学程序还得会hello world。有些童鞋便不以为然,hello world那么简单,要跑起来还不是分分钟的事,是的,特别是针对咱前端人员来说,跑一个hello world那不是动动手指的事,可童鞋们有接触过java,android这类程序么,要跑一个hello world着实要费些精力,各种环境搭建,那过程简直是繁琐的要命,哪是我们一句console.log("hello world")或者alert("hello world")所能理解。

    但是伴随着前端技术的飞速发展和革新,咱们已经不能只满足于控制台打印一串字符串,或是浏览器弹出条提示了。虽然ie6已渐行渐远,但新的挑战更是接踵而至,web app ,微信嵌入, hybrid app,各种开发模式层出不穷,各种前端框架更是令你应接不暇(jQuery、angular、ionic、meteor、ember、avalon、react、react-native)我相信远远不止上述所列,可见我们要学的不仅仅是html规范,css样式兼容,js各种特效,或者是ajax后台交互。我们需要时刻更新自己的知识库。

    好了,上面说了那么多废话,只是一些个人观点,接下来就直入正题:

1、我们需要初始化一个react-native项目。

这里小编就直接用上次的例子,如果有小伙伴没看上篇分享这里小编不厌其烦的再贴一个地址:(http://mp.weixin.qq.com/s?__biz=MjM5MjQxODY5NA==&mid=501054267&idx=1&sn=935dbfa9b3b33ffdf9a0fb435ab34364#rd)项目生成了之后,咱就要开始今天的正题了,大伙亲擦亮你的双眼!

2、生成一个签名密钥。

相信了解过android开发的小伙伴都知道,我们如果想将我们的app打包发布到android或者ios应用商城必须要有一个唯一的签名密钥,我们通过cmd进入到项目根目录:如下图:


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

其中两处标红的名称可随意更改,但也请你记住你做的更改,接下来你只需要按照它的提示,填一下相关信息

到最后一步直接回车即可,接下来来到项目根目录,你便可以看到刚刚生成的签名文件,如下图:


3、创建assets文件夹。

找到路径:./android/app/src/main,并在该目录下新建assets文件夹,切记不可因小聪明随意创建文件夹。
4、在工程目录下将index.android.bundle下载并保存到assets资源文件夹中。

不知道是否还有小伙伴记得上次说的,在我们react-native start之后就相当于创建了一个服务,我们只需要在浏览器地址中请求相应的链接地址即可看到index.android.bundle的相关代码,然后我们直接保存文件copy到assets不就可以了。是的,小编刚开始也是这么想的,但是并未做尝试,有兴趣的小伙伴可以去试一下,看最后打包有没有问题。这里我们来说个高达上点的方法:

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

我们只需要执行下面的命令即可!

但是不出意外,一般会提示curl不是内部或外部命令啥的,相信大家知道怎么解决,但是小编还是要不厌其烦的讲一番废话(https://curl.haxx.se/download/?C=M;O=D)请大伙复制打开如上链接:


找到与自己系统相对应的版本,这里小编的电脑是win10 64位,下载的是如上标红的文件,不过我相信大家也基本上下载这个就行了。

下载完成之后,将这个文件拷贝到项目根目录,当然你也可以拷贝到任意地方,并且将其路径配置到环境变量,这里改如何操作,大伙自行决断,因为两种方式都可以。


呃,又有问题,连接localhost:8081失败痛定思痛,细细一想,这莫非是没启动项目的缘故,于是小编尝试性的 react-native start一下,然后输入如上命令:


果不其然,终于成功了,我们再次进到assets目录,就可以看到刚才我们生成的bundle文件。(提示,如果你看到的bundle文件的大小为0,那么恭喜你,你没成功,同志还需努力,拷贝并未成功。)
5、添加gradle的android keystore。

我们进入到android/app目录,打开build.gradle文件


在defaultConfig下面添加

signingConfigs{
release{
storeFile file("D://liuyong/document/ReactNative/LiuYong/
my-release-key.keystore")
//切记,这里的路径是绝对路径,且只能是正斜杠!
storePassword "122514"
keyAlias "my-key-alias"
keyPassword "122514"
}
}

然后找到如下配置:


在这里添加图中标红的配置代码:

signingConfig signingConfigs.release

最后,我们要启用代码混淆,来减小我们的安装包,在当前文件中查找:

def enableProguardInReleaseBuilds

并且将它的值改成true。到这一步咱就基本上配置完成!
6、项目打包。

最后我们终于迎来了至关重要的一步,项目打包。

在./android/目录中执行 gradle assembleRelease命令,如果你又傻傻的直接输入回车,你又会遇到上面说遇到的提示,gradle不是内部或外部命令。
接下来,我们打开android/gradle/wrapper/gradle-wrapper.properties文件

distributionUrl=https\://services.gradle.org/distributions/gradle-
2.4-all.zip

在这里我们看到我们的gradle版本,并且自行百度相关版本并且下载解压,然后将其bin目录添加到系统环境变量path中(过程就不啰嗦了!)

然后我们重新打开cmd,运行 gradle -v如果能够成功看到版本号,然后在android目录下直接运行:gradle assembleRelease,如果打包有报错什么的,记得 gradle clean一下。


最后,我们在android\app\build\outputs\apk中就可以看到我们最终打包好的apk文件。

7、发布

这一步就略过了,因为小编觉得,目前做的app也就自己看看,还不至于要发布到应用市场,如果有需要,以后在研究,估计也不难,是吧!

 
web前端页面开发 更多文章 CSS中min-height使用技巧 一、CSS背景background图片 响应式布局该怎么设计?CSS3 Media Query实现响应布局 CSS和javacript实现各种各样的渐变效果背景 JS+CSS海量闪亮导航栏下到你手软
猜您喜欢 Python 程序员的 10 个常见错误 AndFix从放弃到捡起 5年内改变世界!VR技术的威力有多大? Java设计模式(七) Spring AOP JDK动态代理 vs. cglib 劳逸结合,享受“舌尖上的美味”