此文檔是在以前公司使用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現有頁面與新頁面見跳轉,傳值。
*轉載請注明出處。