Taro打包Android apk过程详解
奔跑的男人 · 186浏览 · 发布于2022-02-08 +关注

这篇文章主要为大家介绍了Taro打包Android apk的过程及详解步骤,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

首先,我们使用使用命令创建模板项目,创建的命令如下。

taro init myApp


然后,使用 yarn 或者 npm install安装依赖包,并使用下面的命令编译Taro项目。 

yarn dev:rn


启动后会开启一个监听的进程。 

不过,细心的你可能会发现,使用taro init命令初始化的项目是没有原生模块支持的,原来Taro使用了一个壳子工程,首先使用下面的命令下载壳子工程taro-native-shell,如下所示。

git clone git@github.com:NervJS/taro-native-shell.git


在taro-native-shell个目录使用 yarn 或者 npm install 安装依赖,并使用下面的命令启动壳子工程。 

react-native run-android


不过,启动后报了如下的错误: 

error: bundling failed: NotFoundError: Cannot find entry file index.js in any of the roots: ["/Users/mac/Taro/work/taro-yanxuan"]
    at DependencyGraph.getAbsolutePath (/Users/mac/Taro/work/taro-yanxuan/node_modules/metro/src/node-haste/DependencyGraph.js:317:11)
    at /Users/mac/Taro/work/taro-yanxuan/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:280:416
    at Generator.next (<anonymous>)
    at step (/Users/mac/Taro/work/taro-yanxuan/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:11:445)
    at /Users/mac/Taro/work/taro-yanxuan/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:11:605
    at processTicksAndRejections (internal/process/task_queues.js:97:5)


上面报错的意思是找不到RN的入口文件index.js。对于这个问题,只需要将 MainApplication.java 里面的 getJSMainModuleName 修改改为: 

rn_temp/index

即可,因为Taro打的包在rn_temp目录下,最新的 react-native-shell 已修复。

修改后,重新执行react-native run-android命令。

不过,由于项目是0.60.0版本以下的,所以我在运行的时候又报了下面的错误。

React Native version mismatch
javascript version 0.55.4
Native version 0.64.0


这是因为react-native-shell 是0.64.0,而我的RN项目是0.55.4,所以只能升级RN项目或者降级 

react-native-shell 。如果没有任何错误,接下来就可以制作离线的apk包了。
首先,你需要生成Android的密钥文件,关于如何生成密钥文件,可以自行查找相关的资料,把生成的密钥文件拷贝到工程中的android/app文件夹中。然后,在在/android/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=*****


然后,在app/build.gradle文件中添加如下代码。 

release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }


接下来,把前面生成的rn_temp文件复制到taro-native-shell壳子工程的android文件夹下,修改MainApplication里面的代码,如下所示。 

@Override
    protected String getBundleAssetName()  {
      return "./android/rn_temp/index";
    }
  };


然后,在android/app/build.gradle中修改添加如下代码。 

project.ext.react = [
        entryFile: "android/rn_temp/index.js",
        cliPath:"node_modules/react-native/cli.js"
]


然后,执行如下命令执行生成index.bundle 文件,如下所示。 

node ./node_modules/react-native/local-cli/cli.js bundle --entry-file ./android/rn_temp/index.js --bundle-output ./android/rn_temp/index.bundle --assets-dest ./rn_bundle --dev false


最后,在Android的根目录下执行打包命令。 

./gradlew assembleRelease


打包完成后,就可以在android/app/build/outputs中看到签名包。 


相关推荐

android下vulkan与opengles纹理互通

talkchan · 819浏览 · 2020-11-23 10:37:39
Android 使用RecyclerView实现轮播图

奔跑的男人 · 1850浏览 · 2019-05-09 17:11:13
微软发布新命令行工具 Windows Terminal

吴振华 · 700浏览 · 2019-05-09 17:15:04
Facebook 停止屏蔽部分区块链广告

· 594浏览 · 2019-05-09 17:20:08
加载中

0评论

评论
分类专栏
小鸟云服务器
扫码进入手机网页