ReactNative使用CodePush熱更新文檔(Android篇)

此文檔是在以前公司使用RN時(安卓同事)總結的,現在放上來供需要的同學參考。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?React Native熱更新(CodePush

一、CodePush簡介

CodePush是微軟提供的一套用于熱更新React Native和Cordova應用的服務。

CodePush是提供給React Native和Cordova開發者直接部署移動應用更新給用戶設備的云服務。CodePush作為一個中央倉庫,開發者可以推送更新(JS, HTML, CSS and images),應用可以從客戶端SDK里面查詢更新。CodePush可以讓應用有更多的可確定性,也可以讓你直接接觸用戶群。在修復一些小問題和添加新特性的時候,不需要經過二進制打包,可以直接推送代碼進行實時更新。

二、操作步驟

1)安裝CodePush CLI

在終端輸入npm install -g code-push-cli,就可以安裝了。

安裝完畢后,輸入code-push -v查看版本,如看到版本代表成功。

2創建一個CodePush賬號

在終端輸入code-push register,會打開如下注冊頁面讓你選擇授權賬號。

授權通過之后,CodePush會告訴你“access key”,復制此key到終端即可完成注冊。

然后終端輸入code-push login進行登陸,登陸成功后,你的session文件將會寫在/Users/用戶名/.code-push.config。

3在CodePush服務器注冊app

為了讓CodePush服務器知道你的app,我們需要向它注冊app: 在終端輸入code-push app add

即可完成注冊

4

1.Android集成CodePush SDK

下面我們通過如下步驟在Android項目中集成CodePush。

第一步:在項目中安裝react-native插件,終端進入你的項目根目錄然后運行npminstall --save react-native-code-push

第二步:在Anroid Project中安裝插件。

CodePush提供了兩種方式:RNPM和Manual,本次演示所使用的是RNPM。

運行npm

i -g rnpm,來安裝RNPM。

第三步: 運行rnpm link react-native-code-push。這條命令將會自動幫我們在anroid文件中添加好設置。

第四步: 如果link成功,此步驟可以忽略,查看build.gradle文件中是否有如下配置,如果沒有需要在android/app/build.gradle文件里面添如下代碼:

第五步:運行code-push deployment ls

獲取 部署秘鑰。默認的部署名是staging,所以 部署秘鑰(deployment key) 就是staging。

第六步: 添加配置。當APP啟動時我們需要讓app向CodePush咨詢JS bundle的所在位置,這樣CodePush就可以控制版本。更新MainApplication.java文件:

第七步:修改versionName。

在android/app/build.gradle中有個android.defaultConfig.versionName屬性,我們需要把 應用版本改成1.0.0(默認是1.0,但是codepush需要三位數)。

至此Code Push for Android的SDK已經集成完成。

2.iOS集成CodePush SDK

第一步 安裝CodePush

SDK到node_modules文件

在終端cd到項目根目錄,執行一下命令行:

npm install --save react-native-code-push@latest安裝react-native-code-push模塊;

第二步 利用cocoaPod將CodePush集成到項目

1>.在podfile文件中輸入:pod'CodePush',:path => '../node_modules/react-native-code-push'然后終端cd到ios項目根目錄執行pod install

2>打開項目在BuildPhases->Link

Binary With Libraries中點擊”+”添加libCodePush.a, libz.tbd

第三步native代碼配置

在RN View承載controller中導入SDK:#import

并添加如下代碼

#if DEBUG

jsCodeLocation=[[NSBundlemainBundle] URLForResource:@"main"withExtension:@"jsbundle"];

#else

jsCodeLocation =[CodePush bundleURL];

#endif

3>為了讓CodePush運行的時候知道需要更新哪些應用,打開項目的Info.plist文件添加一個新的鍵CodePushDeploymentKey,值就是你配置的讓app連接的服務。

查看鍵值的命令:code-push deployment ls您的應用名–k,終端顯示如下圖

測試版填寫Staging Deployment key下的鍵值;正式版填寫Production

Deployment key下的鍵值。

三、CodePush更新

設置更新策略

最簡單的方式是在根component中進行上述策略控制。

1>.在js中加載CodePush模塊:import

codePush from 'react-native-code-push'

2>.在componentDidMount中調用sync方法,后臺請求更新codePush.sync()

(1)如果可以進行更新,CodePush會在后臺靜默地將更新下載到本地,等待APP下一次啟動的時候應用更新,以確保用戶看到的是最新版本。

(2)如果更新是強制性的,更新文件下載好之后會立即進行更新。

(3)如果你期望更及時的獲得更新,可以在每次APP從后臺進入前臺的時候去主動的檢查更新

生成bundle

android項目根目錄下執行:react-native bundle --platform android --devfalse --entry-file index.android.js --bundle-outputandroid/app/src/main/assets/index.android.bundle --assets-destandroid/app/src/main/res/

ios項目根目錄下執行react-native bundle

--entry-file index.ios.js --bundle-output ./ios/main.jsbundle --platform ios

--assets-dest ./ios --dev false生成main.jsbundle和assets文件

當然可以將bundle文件放在其他文件目錄中,不一定是assets目錄。

打包bundle結束后,就可以通過CodePush發布更新了。在終端輸入

code-push

release <應用名稱> <對應的應用版本> --deploymentName更新環境--description更新描述--mandatory是否強制更新

本例為:

mandatory設為true強制第一次就重新加載,mandatory設為false下次啟動再加載新的bundle

嘗試幾次熱更新后輸入命令code-push deployment history ,如下圖所示,可以看到相關Label的版本、app的版本、是否為強制更新、發布的作者是誰、描述等信息。


測試版發布成功測試沒有問題后可以通過此方法將bundle發布到正式版:

code-push promote

當發現新版本bundle使用報錯時可以使用一下命令進行回滾操作:

code-push rollback

四、CodePush的缺點和局限性

(1)服務器在國外,在國內訪問,網速不是很理想。

(2)其升級服務器端程序并不開源的,后期微軟會不會對其收費還是個未知數。

(3)不支持增量更新。

五.適用范圍

(1)適用頁面賬戶頁面、消息集合頁面;

(2)顛覆性修改頁面樣式,支持頁面樣式顯示bug熱更新;支持頁面現有跳轉邏輯bug修復;

(3)支持添加ReactNative添加新頁面,以及ReactNative現有頁面與新頁面見跳轉,傳值。

*轉載請注明出處。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容