快捷導(dǎo)航

Taro打包Android?apk過(guò)程詳解

更新時(shí)間：2022年02月07日 17:32:26 作者：廈門(mén)在乎科技

這篇文章主要為大家介紹了Taro打包Android?apk的過(guò)程及詳解步驟，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

首先，我們使用使用命令創(chuàng)建模板項(xiàng)目，創(chuàng)建的命令如下。

taro init myApp

然后，使用 yarn 或者 npm install安裝依賴(lài)包，并使用下面的命令編譯Taro項(xiàng)目。

yarn dev:rn

啟動(dòng)后會(huì)開(kāi)啟一個(gè)監(jiān)聽(tīng)的進(jìn)程。

不過(guò)，細(xì)心的你可能會(huì)發(fā)現(xiàn)，使用taro init命令初始化的項(xiàng)目是沒(méi)有原生模塊支持的，原來(lái)Taro使用了一個(gè)殼子工程，首先使用下面的命令下載殼子工程taro-native-shell，如下所示。

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

在taro-native-shell個(gè)目錄使用 yarn 或者 npm install 安裝依賴(lài)，并使用下面的命令啟動(dòng)殼子工程。

react-native run-android

不過(guò)，啟動(dòng)后報(bào)了如下的錯(cuò)誤：

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)

上面報(bào)錯(cuò)的意思是找不到RN的入口文件index.js。對(duì)于這個(gè)問(wèn)題，只需要將 MainApplication.java 里面的 getJSMainModuleName 修改改為：

rn_temp/index

即可，因?yàn)門(mén)aro打的包在rn_temp目錄下，最新的 react-native-shell 已修復(fù)。

修改后，重新執(zhí)行react-native run-android命令。

不過(guò)，由于項(xiàng)目是0.60.0版本以下的，所以我在運(yùn)行的時(shí)候又報(bào)了下面的錯(cuò)誤。

React Native version mismatch
javascript version 0.55.4
Native version 0.64.0

這是因?yàn)閞eact-native-shell 是0.64.0，而我的RN項(xiàng)目是0.55.4，所以只能升級(jí)RN項(xiàng)目或者降級(jí)
react-native-shell 。如果沒(méi)有任何錯(cuò)誤，接下來(lái)就可以制作離線(xiàn)的apk包了。
首先，你需要生成Android的密鑰文件，關(guān)于如何生成密鑰文件，可以自行查找相關(guān)的資料，把生成的密鑰文件拷貝到工程中的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
            }
        }

接下來(lái)，把前面生成的rn_temp文件復(fù)制到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"
]

然后，執(zhí)行如下命令執(zhí)行生成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的根目錄下執(zhí)行打包命令。