iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 27
1

基本上我們已經把一個 App 寫完摟,那最後就是要把他打包才能上架,那 React Native 怎麼打包呢?

需要一把 key

我們可以用 keytool 生成一個私有密鑰的 key,在 terminal 下

keytool -genkey -v -keystore ${名稱}.keystore -alias ${別名} -keyalg RSA -keysize 2048 -validity 10000

例如:

keytool -genkey -v -keystore HelloRN.keystore -alias HelloRN -keyalg RSA -keysize 2048 -validity 10000

然後他會詢問你一些相關的資訊
http://ithelp.ithome.com.tw/upload/images/20170111/20103341gGlj6tw8nn.png

最後就會生成一個有效期限為 10000 天的 HelloRN.keystore 放在當前的目錄下,這把 key 一定要保管好,不然以後上架會很麻煩的,還有 React Native 的 .gitignore 預設有 *.keystore 並不會把 key 加入 git 裡面版本控制,所以不要以為有用 Git 就無敵了喔,而且也不要耍小聰明移除 ignore 把 key 加上版控,會有嚴重的資安問題。

設定 gradle

  • HelloRN.keystore 放到 /adnroid/app 目錄下
  • 編輯 ~/.gradle/gradle.properties ,如果沒有這個檔案自己新增一個,然後新增下列文字
HELLORN_STORE_FILE=HelloRN.keystore
HELLORN_KEY_ALIAS=HelloRN
HELLORN_STORE_PASSWORD=這裡輸入儲存庫密碼
HELLORN_KEY_PASSWORD=這裡輸入金鑰密碼

這個會設定 gradle 的全域變數,等等會拿來給 App 簽名

設定專案中的 gradle

然後開啟專案當中的 android/app/build.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
        }
    }
}
...

Build Bundle

接下來我們能用這個指令把 Bundle build 到我們的本地,平時我們在開發時的 npm start 其實就是開發的 Bundle server,但是 production 版本不可能讓使用者每次打開都來我們 server 拿 Bundle.js 吧,所以要打包一個檔案放進去一起編譯成 apk。

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

測試打包是否正常

然後我們能用下面這個指令來測試剛剛的 key 有沒有正常,或是打包流程有沒有問題,這裡他還是會開啟 Bundle server 但是 App 已經是 production 版本的了喔。

react-native run-android --variant=release

完成打包!

這裡就是最後的打包流程摟,輸入下方的指令,他就會生成一個 Apk 路徑是 android/app/build/outputs/apk/app-release.apk

cd android && ./gradlew assembleRelease

大功告成,這就是 React Native 在 Android 上的打包流程喔~

常見問題

  • INSTALL_FAILED_UPDATE_INCOMPATIBLE - 因為在開發的時候我們有安裝一個開發版 app,如果打包完不能安裝進去,就是因為他的 App package id 重複了喔,只要把開發版 app 刪除就 OK 了

有問題歡迎來 React Native Taiwan 問喔
創科資訊


上一篇
React Native App 實戰 (九) 幫 App 換上 Icon
下一篇
React Native App 遠端更新程式 Code Push (一)
系列文
React Native 航向真全端,建構雙平台 App30

尚未有邦友留言

立即登入留言