react-native項(xiàng)目有個(gè)優(yōu)勢(shì)就是可以動(dòng)態(tài)更新bundle.js，從而更新App饱苟。

1.gif

框架選擇

• 使用微軟出的熱更新套件 react-native-code-push
• 框架包括客戶端SDK，以及配套的服務(wù)端狼渊。

服務(wù)端配置

• 要使用code push服務(wù)箱熬，必須在服務(wù)端配置好app的信息。
• 安裝App Center CLI狈邑，用于服務(wù)端信息管理城须。

$ sudo npm install -g appcenter-cli

• 登陸app cetner。

$ appcenter login

• 運(yùn)行以上命令并在命令行確認(rèn)后米苹，網(wǎng)頁會(huì)彈出一個(gè)要求登陸的頁面糕伐，登陸后，會(huì)得到一串Access code蘸嘶，復(fù)制粘貼回命令行赤炒，成功的話會(huì)返回登陸賬號(hào)。

$ appcenter login
Opening your browser... 
? [Visit]:https://appcenter.ms/cli-login?hostname=assetfundeMacBook-Pro.local and enter the code:
? Access code from browser:  0cd185da****36a****7295b3****c8da9ba766a
Logged in as kk412027247

• 添加App信息亏较，這里要分別添加安卓與iOS莺褒，我的app名字是splashExample,以此為例

// -d 后面接的是app顯示的名字，為了區(qū)分不同平臺(tái)后面也寫上平臺(tái)命
// -o 表示運(yùn)行系統(tǒng)（operation） 安卓/iOS
// -p 表示平臺(tái)（Platform）這里是 react-native
$ appcenter apps create -d splashExample-android -o Android -p React-Native
$ appcenter apps create -d splashExample-ios -o iOS -p React-Native

• 接下來運(yùn)行一下appcenter apps list檢測(cè)是否添加成功

  $  appcenter apps list
  kk412027247/splashExample-android
  kk412027247/splashExample-ios

• 將已添加的app部署熱更新服務(wù)雪情，一般會(huì)部署兩個(gè)用于灰度更新遵岩，和正式更新，這里分別叫做Staging與Production巡通。分別給安卓和iOS部署尘执，所以一共要運(yùn)行四行命令。

建議部署其中一個(gè)叫做Staging宴凉，命令行一些默認(rèn)行為會(huì)執(zhí)行這個(gè)部署誊锭，如果沒有這個(gè)名稱，推送更新到部署的時(shí)候弥锄，要指定部署的名稱丧靡，若不指定則會(huì)報(bào)錯(cuò)。

// -a 是指應(yīng)用（application）籽暇，這里要寫上“用戶名和程序名”

// 部署IOS
$ appcenter codepush deployment add -a kk412027247/splashExample-ios Staging
$ appcenter codepush deployment add -a kk412027247/splashExample-ios Production
// 部署安卓
$ appcenter codepush deployment add -a kk412027247/splashExample-android Staging
$ appcenter codepush deployment add -a kk412027247/splashExample-android Production

• 獲取部署碼温治，運(yùn)行以上命令之后，命令行會(huì)返部署碼戒悠，但是有可能沒記下就關(guān)掉了命令行
• appcenter codepush deployment list -a <ownerName>/<appName> <deploymentName> -k命令可以查看部署碼

$ appcenter codepush deployment list -a kk412027247/splashExample-ios -k

$ appcenter codepush deployment list -a kk412027247/splashExample-android -k

運(yùn)行了一堆命令熬荆，最終得到這兩組四個(gè)部署碼，接下來須要將這些部署碼按需配置到客戶端里面绸狐。

客戶端安裝與配置

• 安裝依賴包

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

運(yùn)行react-native link的時(shí)候卤恳，命令行會(huì)提示輸入部署碼What is your CodePush deployment key for Android (hit <ENTER> to ignore)累盗，這個(gè)提示只是第一次輸入有效。

• 填寫部署碼突琳，我這里都是輸入Staging的部署碼若债。如果是正式環(huán)境，建議寫Production的部署碼本今。

  • iOS平臺(tái)，修改 /splashExample/ios/splashExample/Info.plist 文件,CodePushDeploymentKey 標(biāo)簽的值主巍。
    
    iosDeploymentKey.png
  • 安卓平臺(tái)冠息，修改 /splashExample/android/app/src/main/java/com/splashexample/MainApplication.java。
    
    androidDeploymentKey.png

• api調(diào)用（安靜模式）

import CodePush from "react-native-code-push";
// 靜默方式孕索，app每次啟動(dòng)的時(shí)候逛艰，都檢測(cè)一下更新 'ON_APP_RESUME'
const codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME };
import _App from './App';
// 在組件根節(jié)點(diǎn)的地方設(shè)置熱更新。
const App = CodePush(codePushOptions)(_App);

• 這個(gè)安靜模式是我最喜歡一種搞旭，配置簡單散怖，在用戶沒察覺的情況下就更新了app。在用戶打開app的時(shí)候肄渗，自動(dòng)下載更新包镇眷，下次再啟動(dòng)的時(shí)候自動(dòng)安裝更新包。

  
  
  0.gif

• api調(diào)用（自定義模式）翎嫡，在更新之前可以獲取更新包的大小欠动，更新的具體信息，監(jiān)聽下載進(jìn)度等等惑申。

import CodePush from "react-native-code-push";
...

  state = {receivedBytes : 0, totalBytes : 0, showProcess: false, showIndicator:false};

  _handleUpdate = async () => {
    this.setState({showIndicator: true});

    // checkForUpdate 返回promise具伍，包含了服務(wù)端安裝包的各種信息，包的大小版本之類的,
    // 如果要構(gòu)建構(gòu)建個(gè)性化更新界面圈驼，需要用到此方法
    const updateMessage = await CodePush.checkForUpdate() || {};

    // console.log(updateMessage);
    // return;

    // 執(zhí)行更新
    await CodePush.sync(
      // 第一個(gè)參數(shù)嗎人芽，是個(gè)對(duì)象，可定義更新的動(dòng)作
      {
        // 安裝模式 'IMMEDIATE' 立刻安裝绩脆， ON_NEXT_RESUME 下次啟動(dòng)安裝
        installMode: CodePush.InstallMode.ON_NEXT_RESUME,

        // 強(qiáng)制更新模式下的安裝萤厅，默認(rèn)是IMMEDIATE 直接安裝
        mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,

        //更新確認(rèn)彈窗設(shè)置，設(shè)置系統(tǒng)自帶彈窗中的內(nèi)容
        updateDialog:{
          mandatoryUpdateMessage:'強(qiáng)制更新內(nèi)容: '+updateMessage.description,
          mandatoryContinueButtonLabel:'強(qiáng)制更新/確認(rèn)',
          optionalIgnoreButtonLabel:'取消',
          optionalInstallButtonLabel:'安裝',
          optionalUpdateMessage:'本次更新內(nèi)容: '+updateMessage.description,
          title:'發(fā)現(xiàn)新版本'
        }},
      // 第二個(gè)參數(shù)靴迫，更新狀態(tài)檢測(cè)祈坠，返回?cái)?shù)字
      //0 已經(jīng)是最新，1 安裝完成矢劲、等待生效赦拘，2 忽略更新，3 未知錯(cuò)誤芬沉，4 已經(jīng)在下載了躺同，5 查詢更新阁猜，6 彈出了更新確認(rèn)界面，7 下載中蹋艺，8下載完成
      (status)=>{

        switch (status){
          case 0: alert('已經(jīng)是最新版本');
            break;
          case 1 : !updateMessage.isMandatory && alert('更新完成, 再啟動(dòng)APP更新即生效');
            break;
          case 3: alert('出錯(cuò)了剃袍，未知錯(cuò)誤');
            break;
          case 7 : this.setState({showProcess: true});
            break;
          case 8 : this.setState({showProcess: false});
            break;
        }
      },
      // 第三個(gè)參數(shù)，檢測(cè)下載過程
      ({receivedBytes,totalBytes})=>{
        // console.log('DownloadProgress: ', receivedBytes, totalBytes);
        this.setState({receivedBytes: (receivedBytes/1024).toFixed(2), totalBytes: (totalBytes/1024).toFixed(2)})
      },
    );
    this.setState({showIndicator: false});
  };

  handleUpdate = () => this._handleUpdate().catch(()=>{
    this.setState({showIndicator: false});
    alert('網(wǎng)絡(luò)錯(cuò)誤')
  });

• 這個(gè)配置稍微復(fù)雜一點(diǎn)捎谨，但是自定義程度很高民效，比如要做下載滾動(dòng)條，查看更新日志涛救，都可以實(shí)現(xiàn)畏邢。默認(rèn)情況下，再次啟動(dòng)app的時(shí)候检吆，更新生效舒萎。

  
  
  1.gif

推送更新

設(shè)置完客戶端之后，須要在服務(wù)端推送更細(xì)蹭沛，客戶端才能檢測(cè)到更新臂寝。以上效果都是已經(jīng)從服務(wù)端做了更新推送的。

• 推送命令摊灭，在項(xiàng)目根目錄運(yùn)行 appcenter codepush release-react -a <ownerName>/MyApp咆贬。

//  在默認(rèn)情況下，更新會(huì)推送到Staging的部署
$ appcenter codepush release-react -a kk412027247/splashExample-ios
$ appcenter codepush release-react -a kk412027247/splashExample-android

//  指定版本更新 -d 加部署名
$ appcenter codepush release-react -a kk412027247/splashExample-ios -d Production
$ appcenter codepush release-react -a kk412027247/splashExample-android -d Production

// 設(shè)置更新日志帚呼，供前端讀取
$ appcenter codepush release-react -a kk412027247/splashExample-ios  --description '1800的更新'
$ appcenter codepush release-react -a kk412027247/splashExample-android  --description '1800的更新'

• 強(qiáng)制更新素征，在項(xiàng)目根目錄運(yùn)行 appcenter codepush release-react -a <ownerName>/MyApp -m true
• 其實(shí)就是多了個(gè)-m true 參數(shù)而已，強(qiáng)制更新的默認(rèn)效果是萝挤，用彈窗確認(rèn)更新時(shí)候御毅，只有確認(rèn)鍵，并且安裝成功后是立即生效怜珍，所以app可能會(huì)閃一下端蛆。

$ appcenter codepush release-react -a kk412027247/splashExample-ios -m true  --description '1052的更新'
$ appcenter codepush release-react -a kk412027247/splashExample-android -m true  --description '1052的更新'

2.gif

• 查看更新看歷史appcenter codepush deployment history -a <ownerName>/<appName> <deploymentName>

// 顯示歷史
$ appcenter codepush deployment history -a kk412027247/splashExample-ios Staging

// 清空歷史
$ appcenter codepush deployment clear Staging -a kk412027247/splashExample-ios

官方資料

React Native Client SDK安裝與配置
App Center CLI安裝與配置
js api

項(xiàng)目代碼地址