RN打包

作者: 雪脩 | 来源:发表于2018-08-17 02:09 被阅读42次

react-native因为是用JavaScript语言写的,所以需要把js代码和图片资源都放进apk中,所以打包时需要生成JavaScript的Bundle离线包,之后就可以像原生一样打包就OK了。因为本人用的mac,所以打包时可能会出现Windows不会出现的问题,后面我会详细介绍的。这里希望读者先阅读完此文章大致了解打包过程再操作,可以少犯错误。

Android打包

Bundle离线包

  • 首先,进入项目目录,然后在android目录里创建一个assets文件夹,
mkdir -p android/app/src/main/assets

然后就可以打包离线Bundle了
RN版本0.49之前用这个:

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

RN版本0.49之后用这个

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

这样就可以在android/app/src/main/assets目录下生成一个index.android.jsbundle文件了,android/app/src/main/res目录下会生成我们RN项目中用到的图片资源。

打包APK

Android要求所有应用都有一个数字签名才会被允许安装在用户手机上,所以在把应用发布到类似Google Play store这样的应用市场之前,你需要先生成一个签名的APK包。
目前打包apk有两种方法,一种是官网给出的gradle语言的keytool命令生成签名文件来签名Apk。另一种就是使用Android Studio进行签名打包
这里我推荐使用第二种用Android Studio进行签名打包,因为因为这种比较简单,而且是可视化界面签名。

image
image

如果你有keystore可以点击Choose existing...选择你的签名文件,如果没有则点击Create new...新建一个,如下图

image

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

image
image
这里Build Type要选择release,然后点击Finish就开始打包成apk了。这时会在./android/app目录下生成rerelease文件夹,里面有app-release.apk文件,这时你就可以把它发送给其他人炫耀一番了。
我遇到的问题(Mac电脑)
  • 1、报错:
    org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:processReleaseResources'. ......

    error: uncompiled PNG file passed as argument. Must be compiled first into .flat file.. error: failed parsing overlays.
    原因及解决方法:在gradle.properties文件中添加以下行:android.enableAapt2 = false,它实质上使用旧的aapt来获取资源。然后重新打包。
    如果还是不行,就把android/app/src/main/res目录里的drawable-xxx的文件夹全删了,或者从一开始就不打包图片资源,去掉打包离线Bundle最后的这一行代码
--assets-dest ./android/app/src/main/res/ --dev false
  • 2、Could not resolve all files for configuration ':app:lintClassPath'.
    解决方法:
    修改Project的build.gradle(注意:不是App的build.gradle),两处加上google()
buildscript {
    repositories {
        jcenter()
        google()     //这里
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.0'
    }
}

allprojects {
    repositories {
        jcenter()
        google()        //这里
    }
}

相关文章

  • iOS 打包 React Native文件

    如果项目中用到了RN,那么打包测试,或者上线前,都需要将RN部分打包成为main.jsbundle文件, ...

  • RN打包

    react-native因为是用JavaScript语言写的,所以需要把js代码和图片资源都放进apk中,所以打包...

  • RN 打包

    1 iOS打包:react-native bundle --entry-file index.ios.js --...

  • RN 打包

    项目根目录下 创建文件夹release_ios 2.终端 项目根目录 输入 :react-native bund...

  • RN打包

    ios:react-native bundle --entry-file index.ios.js --bundl...

  • RN打包

    什么是JSBundle JSBundle 是 JS代码打包后的产物,在React-native里面主要是通过rea...

  • React-Native 入门之小技巧

    本文介绍一些RN的全局设置: 修改字体(全局) RN切换打包环境 切换后台,多次切换后台环境,切换打包环境好像是 ...

  • RN热更新原理之Android篇

    1.前言 我们知道RN打包后的最终APP,访问的是一个bundle文件,这个bundle文件是所有RN代码打包成的...

  • Android项目集成RN系列:修改端口号 / 离线包 / 消息

    【简述RN集成到Android原生项目】手动修改React Native端口号将RN项目打包成离线包RN与Andr...

  • React-Native 打包记录

    网上RN项目的离线打包教程如下: RN项目的离线打包(ios) - 简书 但是这样打出来的的api文件会有2个as...

网友评论

    本文标题:RN打包

    本文链接:https://www.haomeiwen.com/subject/muiabftx.html