React-Native工程項目打包編譯發布過程詳解

標籤：gradle   .net   命令   sse   span   val   script   資源   手動   

前言

現在大紅大紫的React-Native架構熱度可謂與日俱增，React-Native的熱更新操作，在開發過程中的確帶來很多好處，但是對於發布來講，不同平台卻不盡相同， 下面來具體看一下Android和IOS兩個平台是如何執行發布產品的。

React-Native之Android平台發布

Android平台有兩種發布方式，一種是藉助於命令列操作，另外一種是藉助於Android Studio進行發布，具體步驟我們來看一下：

藉助Android Studio發布版本

首先，藉助於Android Studio產生簽名keystore：

點擊下一步，建立一個新的keystore,這裡無需關心尾碼名字，預設即可

上面主要是密碼，建議全部設定一個密碼，方便記憶，Alias這個不要忘記，最好把上面資訊複製一份，選定一個自己熟悉的路徑，點擊OK儲存。此時keystore已經產生完畢。

此時，你會發現，你可以繼續產生一個apk，並且可以安裝，但是卻無法運行，發生閃退。

這是因為React-Native的android平台下預設沒有產生資源檔也就是我們所有的js圖片檔案等等。

下面我們就來產生JS Bundle檔案：

第一步，我們要建立一個assets檔案在工程目錄下，可以通過命令列操作，也可手動。（在項目根目錄執行此命令即可）

mkdir -p Android/app/src/main/assets 

第二步，產生Bundle檔案。此命令同樣在根目錄執行，如：

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/

此時，我們已經完全產生了bundle檔案了，你可以查看自己工程assets下的檔案夾。

然後再一次進行打包，這次選擇已經建立的keystore,輸入alia和密碼，產生apk，進行安裝，測試已經正常運行了。

命令列發布版本

1. 產生秘鑰簽名

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

按提示輸入資訊使用者密碼等等。

1. 設定gradle變數

把my-release-key.keystore檔案放到你工程中的android/app檔案夾下。
編輯~/.gradle/gradle.properties（沒有這個檔案你就建立一個），添加如下的代碼（注意把其中的**替換為相應密碼）

MYAPP_RELEASE_STORE_FILE=my-release-key.keystoreMYAPP_RELEASE_KEY_ALIAS=my-key-aliasMYAPP_RELEASE_STORE_PASSWORD=*****MYAPP_RELEASE_KEY_PASSWORD=*****

1. 添加簽名到項目的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        }    }}...

1. 產生發行APK包

cd android && ./gradlew assembleRelease

cd android表示進入android目錄（如果你已經在android目錄中了那就不用輸入了）。./gradlew assembleRelease在macOS和Linux系統中表示執行目前的目錄下的名為gradlew的指令檔，運行參數為assembleRelease，注意這個./不可省略；而在windows命令列下則需要去掉./。

React-Native之IOS平台發布

相對於Android平台來講，IOS平台的發佈動作相對簡單，只需要簡單配置即可，具體的來看一下：

第一步選擇Product ? Archive

產生匯出後的ipa即為最終檔案！

總結

總體來講，React-Native的發布流程主要藉助於原生Native的開發工具，具體操作也比較簡單，只是部分注意事項稍加註意即可，比如android平台預設是沒有產生bundle資源檔的，產生apk後會閃退等等。

React-Native工程項目打包編譯發布過程詳解