一、背景
我們想要實現RN的熱更新，這里使用CodePush
React-native-code-push`是微軟針對React-native推出的熱更新服務。CodePush官方文檔。
二、CodePush的使用
1、CodePush CLI安裝
安裝CodePush指令，直接在終端上輸入如下命令即可，注意：這個CodePush指令只需要全局安裝一次即可，如果第一次安裝成功了，那后面就不在需要安裝
npm install -g code-push-cli
2、注冊CodePush賬號
注冊CodePush賬號也很簡單，同樣是只需簡單的執(zhí)行下面的命令，同樣這個注冊操作也是全局只需要注冊一次即可。
code-push register
當執(zhí)行完上面的命令后，會自動打開一個授權網頁，讓你選擇使用哪種方式進行授權登錄，這里我們統(tǒng)一就選擇使用GitHub即可。
當注冊成功后，CodePush會給我們一個key。然后把這個key復制下來填入終端即可登錄成功。
當然你可以使用以下命令驗證是否登錄成功：
code-push login
當有如下報錯時，說明你已經登錄成功了。
[error] You are already logged in from this machine.
下面是一些常用操作指令：
code-push login 登陸
code-push logout 注銷
code-push access-key ls 列出登陸的token
code-push access-key rm <accessKye> 刪除某個 access-key
3、在CodePush服務器注冊App
為了讓CodePush服務器有我們的App，我們需要CodePush注冊App，輸入下面命令即可完成注冊，這里需要注意如果我們的應用分為iOS和Android兩個平臺，這時我們需要分別注冊兩套key 應用添加成功后就會返回對應的production 和 Staging 兩個key，production代表生產版的熱更新部署，Staging代表開發(fā)版的熱更新部署，在ios中將staging的部署key復制在info.plist的CodePushDeploymentKey值中，在android中復制在Application的getPackages的CodePush中。
注冊iOS APP：
code-push app add RNDemo_iOS ios react-native
注冊Android APP：
查看注冊過的APP：
code-push app list
其它CodePush管理APP指令：
code-push app add 在賬號里面添加一個新的app
code-push app remove 或者 rm 在賬號里移除一個app
code-push app rename 重命名一個存在app
code-push app list 或則 ls 列出賬號下面的所有app
code-push app transfer 把app的所有權轉移到另外一個賬號
4、RN代碼中集成CodePush
上面都是一些準備工作，從這里開始才是真正的集成到項目中。首先我們需要安裝CodeoPush組件，然后通過link命令添加原生依賴，最后在RN根組件中添加熱更新邏輯代碼.
安裝組件：
npm install react-native-code-push --save
添加依賴：
react-native link react-native-code-push
5、配置iOS工程
打開Podfile文件加入
pod 'CodePush', :path => '../RNCode/node_modules/react-native-code-push'
執(zhí)行pod install
pod install
打開info.plist文件
添加CodePushDeploymentKey：值為Production的值
Bundle version string (short)的值改為1.0.0
打開KGRNManager.m
導入
#import <CodePush/CodePush.h>
修改下面的方法
#pragma mark - RCTBridgeDelegate
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
# if DEBUG
//模擬器
// return [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
return [NSURL URLWithString:@"http://192.168.2.102:8081/index.bundle?platform=ios"];
//真機，真機和電腦處于同一ip地址
// return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"main" fallbackResource:nil];
# else
// return [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"jsbundle"];
return [CodePush bundleURL];
#endif
}
6、index.js文件配置
一般常見的應用內更新時機分為兩種，一種是打開App就檢查更新，一種是放在設置界面讓用戶主動檢查更新并安裝。
打開APP就檢查更新：
最為簡單的使用方式在React Natvie的根組件的componentDidMount方法中通過 codePush.sync()（需要先導入codePush包：import codePush from 'react-native-code-push'）方法檢查并安裝更新，如果有更新包可供下載則會在重啟后生效。不過這種下載和安裝都是靜默的，即用戶不可見。如果需要用戶可見則需要額外的配置。具體可以參考codePush官方API文檔。
import codePush from "react-native-code-push";
class App extends Component {
...
componentDidMount () {
codePush.sync({
updateDialog: true, // 是否打開更新提示彈窗
installMode: codePush.InstallMode.IMMEDIATE,
mandatoryInstallMode: codePush.InstallMode.IMMEDIATE,
deploymentKey: 'Pay3W7Nfaa3bLG9C9ZXTwMgS7zMD68d21987-8919-4d4e-8062-52c8293250cb',
//對話框
updateDialog : {
//是否顯示更新描述
appendReleaseDescription : true ,
//更新描述的前綴。 默認為"Description"
descriptionPrefix : "更新內容：" ,
//強制更新按鈕文字，默認為continue
mandatoryContinueButtonLabel : "立即更新" ,
//強制更新時的信息. 默認為"An update is available that must be installed."
mandatoryUpdateMessage : "必須更新后才能使用" ,
//非強制更新時，按鈕文字,默認為"ignore"
optionalIgnoreButtonLabel : '稍后' ,
//非強制更新時，確認按鈕文字. 默認為"Install"
optionalInstallButtonLabel : '后臺更新' ,
//非強制更新時，檢查到更新的消息文本
optionalUpdateMessage : '有新版本了，是否更新？' ,
//Alert窗口的標題
title : '更新提示'
},
});
}
...
}
export default App;
用戶點擊檢查更新按鈕
在用戶點擊檢查更新按鈕后進行檢查，如果有更新則彈出提示框讓用戶選擇是否更新，如果用戶點擊立即更新按鈕，則會進行安裝包的下載（實際上這時候應該顯示下載進度，這里省略了）下載完成后會立即重啟并生效（也可配置稍后重啟），部分代碼如下
codePush.checkForUpdate(deploymentKey).then((update) => {
if (!update) {
Alert.alert("提示", "已是最新版本--", [
{
text: "Ok", onPress: () => {
console.log("點了OK");
}
}
]);
} else {
codePush.sync({
deploymentKey: deploymentKey,
updateDialog: {
optionalIgnoreButtonLabel: '稍后',
optionalInstallButtonLabel: '立即更新',
optionalUpdateMessage: '有新版本了，是否更新？',
title: '更新提示'
},
installMode: codePush.InstallMode.IMMEDIATE,
},
(status) => {
switch (status) {
case codePush.SyncStatus.DOWNLOADING_PACKAGE:
console.log("DOWNLOADING_PACKAGE");
break;
case codePush.SyncStatus.INSTALLING_UPDATE:
console.log(" INSTALLING_UPDATE");
break;
}
},
(progress) => {
console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
}
);
}
}
CodePush高階組件實現更新
import codePush from "react-native-code-push";
class App extends Component {
}
export default codePush(App);
更新時機：
codePush.InstallMode.IMMEDIATE ：安裝完成立即重啟更新
codePush.InstallMode.ON_NEXT_RESTART ：安裝完成后會在下次重啟后進行更新
codePush.InstallMode.ON_NEXT_RESUME ：安裝完成后會在應用進入后臺后重啟更新
7、提交更新包
我們可以通過code-push release-react命令發(fā)布更新包。多次發(fā)布更新包也是如此。
code-push release-react <Appname> <Platform> --t <本更新包面向的客戶端版本號> --des <本次更新說明>
注意： CodePush默認是更新Staging 環(huán)境的，如果發(fā)布生產環(huán)境的更新包，需要指定--d參數：--d Production，如果發(fā)布的是強制更新包，需要加上 --m true強制更新
code-push release-react RNDemo ios --t 1.0.0 --des "hello world" --m true
查詢提交過哪些更新包:
- 查詢Production
code-push deployment history RNDmo_iOS Production
- 查詢Staging
code-push deployment history RNDmo_iOS Staging
- 其他的一些操作
// 重命名
code-push deployment rename <appName>
// 刪除部署
code-push deployment rm <appName>
// 列出應用的部署情況
code-push deployment ls <appName>
// 查看部署的key
code-push deployment ls <appName> -k
// 查看歷史版本
code-push deployment history <appName> <deploymentName> (Production 或者 Staging)
// 清除歷史部署記錄
code-push deployment clear <appName> Production or Staging
// 回滾
code-push rollback <appName> Production --targetRelease v4(codepush服務部署的版本號)
