前言

本文基于React Native開發環境搭建，默認已搭建好XXProject的react native項目。本文appcenter cli版本為2.10.0，本文法布時，coderova已停用，codepush已被棄用，因此直接使用更加傻瓜式接入的appcenter cli。本文基于react版本17.0.2、react-native版本0.67.3，使用mac開發。

AppCenter配置

XXProject根目錄下執行

npm install -g appcenter-cli

安裝appcenter cli，然后再運行

appcenter login

即可調起App Center網頁，新建賬戶（此處不再贅述）結束后，頁面會生成新的API token
將token復制后粘貼到剛才輸入appcenter login的終端，按enter后即刻登陸App Center應用頁面以及運行cli命令，如果不是centeros等無gui系統的話，建議使用網頁新增應用以及配置管理，比使用命令方便很多。
本文只討論使用AppCenter接入React Native，首先新建App：


需要注意，rn產出的android包與ios包一般都是有區別的，因此需要新建兩個app，一般默認命名都是類似于XXProject-Android，XXProject-IOS，如果不使用網頁新建，則對應新建項目命令為

appcenter apps create -p React-Native -o Android -d XXProject-Android -r Production -n xxproject-android-url-name --description 'Android示例項目' appcenter apps create --platform React-Native --os iOS --display-name XXProject-IOS --release-type Production --name xxproject-ios-url-name --description 'IOS示例項目'

特別注意，-d只是顯示的名稱，后續命令中的項目是用的是-n指定的，一般使用-d即可，默認同名。所有的cli詳細命令可參見¹，如不熟悉命令，可在appcenter相應命令后使用 --help查看詳細說明。
在appcenter分別建立Android與ios項目后，在XXProject根目錄中使用以下命令中集成CodePush：

npm install --save react-native-code-push

使用Codepush

點擊按鈕創建默認的兩個發布環境：預發布環境Staging，與生產環境Production：

請特別注意，一般正式項目流程是直接使用上一篇中的yarn acd命令進行開發與調試，不需要打出bundle包，以方便開發，在交付給測試時，使用預發布環境Staging并打出Staging的離線bundle集成到app，測試通過后使用生產環境Production。
以上創建發布環境如需要使用命令，則先查看現有app：

appcenter apps list

拷貝對應項目，分別執行新建部署：

appcenter codepush deployment add -a name/xxproject-android-url-name Staging appcenter codepush deployment add -a name/xxproject-android-url-name Production

IOS項目部署創建也是相同的操作。

Android接入

在XXProject/android/settings.gradle 文件末尾，添加：

include ':react-native-code-push' project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

在XXProject/android/app/build.gradle中添加：

// 上一篇集成rn時已經引入，無需重復引入 // apply from: "../../node_modules/react-native/react.gradle" apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

在上篇的Application類中的添加方法：

// 1. Import the plugin class. import com.microsoft.codepush.react.CodePush ... class MainApplication : Application(), ReactApplication {override fun onCreate() {CodePush.setReactInstanceHolder(mReactNativeHost)super.onCreate()...}override fun getReactNativeHost() = mReactNativeHostprivate val mReactNativeHost: CodePushReactNativeHost = CodePushReactNativeHost(this)inner class CodePushReactNativeHost(appContext: Application) : ReactNativeHost(this),ReactInstanceHolder {override fun getUseDeveloperSupport(): Boolean {return BuildConfig.DEBUG}// Override the getJSBundleFile method to let// the CodePush runtime determine where to get the JS// bundle location from on each app startoverride fun getJSBundleFile(): String? {return CodePush.getJSBundleFile()}override fun getPackages(): List<ReactPackage> {// Packages that cannot be autolinked yet can be added manually here, for example:// packages.add(new MyReactNativePackage());// 比如rn橋接return PackageList(this).packages}override fun getJSMainModuleName(): String {return "index"}} }

使用命令

appcenter codepush deployment list -a ownername/XXProject-Android -k

獲取部署key如下圖：

將所需部署環境的key放到strings.xml：

<resources>...<string moduleConfig="true" name="CodePushDeploymentKey">DeploymentKey</string></resources>

注意，部署key的環境需要與以下部署命令的一致，XXProject中，默認debug版使用Staging，release版使用Production（一般還需要一個預發布環境，此處測試項目就省略了，正式項目務必需要三個環境）。
更推薦的做法，是不使用strings.xml定義，而將key使用gradle配置：

android {...buildTypes {debug {...// CodePush更新不應在開發時使用，因為codepush會覆蓋rn開發包。但是CodePush sdk會在所有模式下都去檢查更新，因此需要提供key。XXProject中，直接使用Staging環境的keyresValue "string", "CodePushDeploymentKey", '""'...}releaseStaging {...// 預發布環境Staging的key，XXProject由于歷史原因，直接使用了debugresValue "string", "CodePushDeploymentKey", '"<INSERT_STAGING_KEY>"'// matchingFallbacks表示找不到的依賴使用release類似配置，https://www.jianshu.com/p/7e2d0e59a2bbmatchingFallbacks = ['release']...}release {... // 正式環境Production的keyresValue "string", "CodePushDeploymentKey", '"<INSERT_PRODUCTION_KEY>"'...}}... }

可選項，安裝Appcenter Analytics與Appcenter Crashes，此處不贅述，需要的可自行參考。

IOS接入

XXProject根目錄執行命令安裝依賴：

cd ios && pod install && cd ..

未完待續

React Native配置

接入Android與IOS原生SDK后，需要配置react native以確定codepush更新檢查與安裝時機。

主模塊接入codepush

const codePushOptions = {//設置檢查更新的頻率//ON_APP_RESUME APP恢復到前臺的時候//ON_APP_START APP開啟的時候//MANUAL 手動檢查checkFrequency: CodePush.CheckFrequency.ON_APP_START }; var that = null class RNAPP extends Component {... }App = CodePush(codePushOptions)(RNAPP) export default App

codePushOptions可以不傳，默認行為為app啟動時檢查更新，有更新時靜默下載，并在再次冷啟動時安裝更新。codePushOptions詳細介紹此處不贅述，有兩個是常用的：

• checkFrequency：檢查更新的時機，

默認為CodePush.CheckFrequency.ON_APP_START，app冷啟動時；

CodePush.CheckFrequency.ON_APP_RESUME，app回到前臺時，如home鍵、跳到別的app再回來時；

CodePush.CheckFrequency.MANUAL，不自動檢查更新，需要使用codePush.sync()手動檢查。特別注意，手動模式時，如果調用codePush檢查更新（checkForUpdate）的時機不是在app start時，必須在加載前notifyAppReady以防止更新重啟之后jsbundle回滾：

class RNAPP extends Component {...componentWillMount() {// 更新重啟之后，防止回滾CodePush.notifyAppReady()}

• installMode：應用更新的時機，

默認為codePush.InstallMode.ON_NEXT_RESTART， 下次冷啟動時應用更新；

codePush.InstallMode.ON_NEXT_RESUME ，app回到前臺時應用更新；

codePush.InstallMode.ON_NEXT_SUSPEND ，頁面退到后臺minimumBackgroundDuration（默認0）秒后，再次回到前臺時應用更新；

codePush.InstallMode.IMMEDIATE ，檢查到更新后，立即應用更新。

自定義更新時機

如果業務需求在有更新時，彈窗提示更新，就需要用到兩個常用的函數CodePush.checkForUpdate和CodePush.sync：

class RNAPP extends Component {...const codePushOptions = {// 設置檢查更新的頻率// ON_APP_RESUME APP恢復到前臺的時候// ON_APP_START APP開啟的時候// MANUAL 手動檢查// 1、設定為手動更新checkFrequency: CodePush.CheckFrequency.MANUAL};syncCodePush() {// 3、應用更新CodePush.sync({// 安裝模式// ON_NEXT_RESUME 下次恢復到前臺時// ON_NEXT_RESTART 下一次重啟時// IMMEDIATE 馬上更新installMode: CodePush.InstallMode.IMMEDIATE,// 后臺30秒以上才更新// minimumBackgroundDuration: 30// 不要使用原生對話框！！！！，需要的話自行配置，2022/3/9新版android codepush源碼CodePushDialog直接在非主線程mqt_native_modules上show// updateDialog:true});}componentWillMount() {// 更新重啟之后，防止回滾CodePush.notifyAppReady();// 在加載完了可以允許重啟CodePush.disallowRestart();}componentDidMount() {that = this//在加載完了可以允許重啟CodePush.allowRestart();// 2、檢查是否有更新CodePush.checkForUpdate().then((update)=>{if(!update){console.log("The app is up to date!");} else {// 自定義彈窗提示新版本，或其他操作，此處省略 that.syncCodePush()}});}... }

• CodePush.checkForUpdate(deploymentKey: String = null, handleBinaryVersionMismatchCallback: (update: RemotePackage) => void): Promise<RemotePackage>

參數deploymentKey可以指定檢測不同的發布環境key，可用于實現靈活配置付費版等功能的更新；

參數handleBinaryVersionMismatchCallback，處理更新版本返回，比如現在app的jsb版本是1.0.0，但是查詢到新的jsb更新是1.0.1版本的，此回調可做此類可選項處理

返回的Promise函數null時，無更新或更新對當前版本app不可用，否則返回RemotePackage對象：
downloadUrl——包可供下載的 URL；
download (downloadProgressCallback？： Function) ： Promise<LocalPackage>——下載更新，downloadProgressCallback用于回調進度，返回LocalPackage的Promise用于安裝。

• CodePush.sync(options?: SyncOptions, syncStatusChangedCallback?: SyncStatusChangedCallback, downloadProgressCallback?: DownloadProgressCallback, handleBinaryVersionMismatchCallback?: HandleBinaryVersionMismatchCallback): Promise;
  非常建議細看codePush.sync文檔，內容較多且比較重要，此處不再展開。

發布與更新包

以上步驟走完，rn就可以”熱更“了。根據上一篇文章操作，離線包已被打進app里，此時隨意修改App.js的顯示，保存后，使用命令發布更新:

appcenter codepush release-react -a ownername/xxproject-android-url-name -d Staging -t 0.0.1

即可在0.0.1版本的Android app上更新rn頁面。同樣強烈建議通讀發布更新命令參數詳解。

參考資料

---

appcenter-cli倉庫
React Native客戶端 SDK
React Native 客戶端 SDK API 參考
使用CLI發布codepush更新 ??

總結

以上是生活随笔為你收集整理的React Native发布——使用AppCenter的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。