1. 程式人生 > >關於react native code push的JS端配置攻略

關於react native code push的JS端配置攻略

1. 引用CodePush高階元件,應用在專案根元件中:

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

class App extends Component {
}

const codePushOptions = { checkFrequency: CodePush.CheckFrequency.MANUAL };

App = CodePush(codePushOptions)(App);

export default codePush(App);

2. 使用CodePush提供的檢查更新並執行更新的方法:

    // 檢測是否有新的更新
      CodePush.checkForUpdate(codePushDeploymentKey)
        .then((update) => {
          console.log('update', update);
          if (!update) {
            return;
          }
          CodePush.sync(
            {
              deploymentKey: codePushDeploymentKey,
              installMode: update.isMandatory ? CodePush.InstallMode.IMMEDIATE :
                CodePush.InstallMode.ON_NEXT_RESTART, // 強制熱更則立即安裝,靜默則下次啟動時安裝
              updateDialog:
                update.isMandatory ?
                {
                  appendReleaseDescription: true, // 是否顯示更新描述
                  descriptionPrefix: '我們做了一些內容邀您更新體驗:\n', // 更新描述的字首。 預設為"Description"
                  mandatoryContinueButtonLabel: '立即更新', // 強制更新按鈕文字,預設為continue
                  mandatoryUpdateMessage: '', // 強制更新時的資訊.
                  optionalIgnoreButtonLabel: '稍後', // 非強制更新時,按鈕文字
                  optionalInstallButtonLabel: '後臺更新', // 非強制更新時,確認按鈕文字. 預設為"Install"
                  optionalUpdateMessage: '有新版本了,是否更新?', // 非強制更新時,檢查到更新的訊息文字
                  title: '更新提示' // Alert視窗的標題
                } : false
            },
            (syncStatus) => {
              switch (syncStatus) {
                case CodePush.SyncStatus.CHECKING_FOR_UPDATE: // 正在查詢CodePush伺服器以進行更新。
                  break;
                case CodePush.SyncStatus.DOWNLOADING_PACKAGE: // 正在從CodePush伺服器下載可用更新。
                  if (!update.isMandatory) {
                    return;
                  }
                  // 強制彈窗更新,下載啟動時顯示進度條modal
                  DeviceEventEmitter.emit(DeviceEventName.HOT_UPDATE_MODAL_VISIBLE, {
                    totalPackageSize: conver(update.packageSize), // 熱更新包總大小
                  });
                  break;
                case CodePush.SyncStatus.AWAITING_USER_ACTION: // 提供更新,並向終端使用者顯示確認對話方塊。
                  break;
                case CodePush.SyncStatus.INSTALLING_UPDATE: // 已下載可用更新,即將安裝。
                  break;
                case CodePush.SyncStatus.UP_TO_DATE: // 該應用程式是CodePush伺服器的最新版本。
                  break;
                case CodePush.SyncStatus.UPDATE_IGNORED: // 應用程式有一個可選的更新,終端使用者選擇忽略。
                  break;
                case CodePush.SyncStatus.UPDATE_INSTALLED: // 已安裝可用更新
                  break;
                case CodePush.SyncStatus.UNKNOWN_ERROR: // 同步操作遇到未知錯誤
                  break;
                default:
                  break;
              }
            },
            ({ receivedBytes, totalBytes }) => {
              if (!update.isMandatory) {
                return;
              }
              // 標記熱更新進度事件
              DeviceEventEmitter.emit(DeviceEventName.HOT_UPDATE_PROGRESS,
                {
                  progress: parseFloat(receivedBytes / totalBytes)
                    .toFixed(2) * 100, // 當前下載進度(0~100)
                  receivedPackageSize: conver(receivedBytes), // 熱更新包下載過程大小
                });
            },
            ({ isUpdateAppVersion, appVersion }) => {
              console.log('appVersion更新', `${isUpdateAppVersion}&&${appVersion}`);
            }
          );
        });

接下來詳細描述幾個重要的屬性:

1. “checkFrequency”即檢查頻率, 在步驟1的codePushOptions中配置了這個引數,啥意思呢,我解釋為檢查更新的方式,有如下三種:

 // 禁用自動檢查更新,用於手動檢查更新,只有主動呼叫sync方法時檢查
CodePush.CheckFrequency.MANUAL
// 熱啟動時檢查更新,即APP在使用時退到後臺重新開啟時檢查
CodePush.CheckFrequency.ON_APP_RESUME
// 冷啟動時檢查更新,即APP殺死程序後重啟時檢查
CodePush.CheckFrequency.ON_APP_START

2. “installMode”即安裝模式

codePush.InstallMode.IMMEDIATE 安裝更新並立刻重啟應用

codePush.InstallMode.ON_NEXT_RESTART 安裝更新,但不立馬重啟,直到下一次重新進入

codePush.InstallMode.ON_NEXT_RESUME 安裝更新,但是不立馬重新啟動,直到下一次從後臺恢復到前臺

codePush.InstallMode.ON_NEXT_SUSPEND 下一次處於後臺時

3. "isMandatory" 是CheckForUpdate返回的一個重要引數,即是否強制熱更新。true 強制,false 不強制。

相關推薦

關於react native code push的JS配置

1. 引用CodePush高階元件,應用在專案根元件中: import CodePush from "react-native-code-push"; class App extends Component { } const codePushOptions = { c

關於react-native-code-push的原生整合

注:此文整合code-push是基於自建熱更新伺服器來維護的,如果使用微軟的熱更新伺服器整合有部分區別。 首先通過npm 或者 yarn 將依賴下載下來: npm install --save react-native-code-push  or yarn add r

關於react native code push 更新的設計

方案一:(彈窗強更和靜默更新) 1. 我採用的是設定checkFrequency: CodePush.CheckFrequency.MANUAL,只有在呼叫CodePush.sync才檢查更新; 2. 然後通過CodePush.checkForUpdate返回是否強制熱更

React Native Code Push

deploy ext androi cas epush nload idm res title Code Push是微軟提供的一套可以熱更新React Native的服務。可以使用微軟的服務器也可以自己部署服務器。 1.安裝Code Push 使用命令npm insta

React Native Android開發環境配置

環境變量 all hotspot book environ mod 安裝atom 出現 facebook 近些年,Web前端甚是火爆,火爆程度堪比我畢業時的移動端開發一般。隨著JavaScript的火爆,移動端也不安分了起來,ReactNative就異軍突起了,幾乎要做到“

react-native-gp-utils(對react-native全局進行配置,對內置對象原型)

catch 形式 使用 新項目 format) 三種 prop 指定元素 zha react-native-gp-utils 對react-native全局進行配置,對內置對象原型鏈增加方法,增加常用全局方法. 每次新建react-native項目之後都會發現有一些很常用的

VS2010+Opencv-2.4.9的配置

1、下載軟體   vs2010入門書籍,免積分下載   http://download.csdn.net/detail/u014112584/7325617         opencv2.4.0版本和一些例子,免積分下載 

react-native code-push使用日誌

1.安裝cli npm install -g code-push-cli 2.註冊 code-push register 3.在服務端註冊你的APP,獲取code-push-Key //code-push + app + add + APP名 + 平臺 + 語言環境 code-

React Native在Windows下配置

React Native在Windows下配置 1、安裝JDK,SDK JDK和SDK需要設定環境變數,設定成功分別在cmd中通過”java -version”和”adb”進行檢測是否配置成功 2、安裝node Node下載地址https://nodejs.o

教你輕鬆修改React Native埠(如何同時執行多個React Native、8081口占用問題)

期待已久的新課上線啦!解鎖React Native開發新姿勢,一網打盡React Native最新與最熱技術,點我Get!!! 當我們執行一個React Native專案的時候,React Native會啟動一個預設埠號為8081的本地服務,該8081的服務就是Reac

react-native-code-push的整合

react-native-code-push 是微軟提供的一套可用於React Native的熱更新服務 開啟終端: 1.安裝 CodePush Cli npm install -g code-push-cli 2.註冊CodePush 賬號 code-push reg

4.React Native專案開發如何配置除錯

本篇主要專案開發中如何除錯及除錯配置; RN除錯感覺比較痛苦,沒有Android開發或者IOS開發那麼靈活,說說如何配置; 1.在你執行起來的Android專案介面按住⌘-M會彈出如下列表 2.選擇Debug JS Remotely選項會自動開啟瀏覽器http://

react native打包apk時配置gradle阿里雲maven倉庫加速依賴下載

前言使用react native進行打包apk時,因為maven倉庫的原因會導致某些依賴和包沒有新增成功,會導致一些問題。所以做法就是將gradle中的倉庫地址進行配置。而且配置過程中有一些注意事項要注意。問題詳解進入android目錄下,找到buid.gradle檔案,對下

react native開發中eslint配置和初始化

先簡單介紹一下mac系統環境下,eslint的配置。 首先開啟命令列工具,cd到專案根目錄下。 一次輸入命令並等待下載完成。 npm install eslint --save-dev npm ins

SSL證書申請 IIS設定 配置

 我們都知道SSL加密通道, 走https通訊協議時, 會需要申請一個 SSL的憑證.網站在資料保護上會更安全。     SSL憑證是可以自己簽發的, 在自家內部網路上用不成問題, 可以將自建的CA加入在公司內的電腦主機上, 但是在公眾網路上,瀏覽器沒有我們內建的CA時,

React Native從急診到重症監護》-- React Native for mac 環境配置

這段時間移動前端開發有兩個技術很火,一個就是HTML5,一個就是React Native,這兩個非要說誰好誰差,這個我認識淺薄不太好說,剛剛接觸,還在學習的過程中。好與壞很多大神已經發表了自己的意見,對於這個不再贅述。 搭建Mac的環境比較簡單,想要更深入的瞭解,可以登陸官網去檢視相關

React Native開發環境的配置

1.安裝Homebrew: 在MAC中開啟終端工具並輸入如下語句: ruby -e "$(curl --insecure -fsSL https://raw.githubusercontent.com/Homebrew/install/master/inst

react-native 安裝與環境配置(踩坑版,基於android studio)

一.安裝java環境 先去官網下載最近java 8版本,並進行安裝,注意:java 8之前的版本是不支援react native的,必須使用java 8,下載連結接:java jdk,下載完成之後進行環境變數配置,可以參考此連結進行配置,網頁:java8 環境變數配置,至

cloudstack4.2+xenserver6.0.2 詳細配置

搭建一臺安裝了XenServer的伺服器搭建一臺安裝了CloudStack的伺服器用以管理雲平臺可以使用CloudStack雲平臺進行虛擬機器管理使用遠端桌面訪問windows虛擬機器由於最近實驗室要搭建cloudstack+xenserver環境,先寫出這個配置文件,以

Logback日誌系統配置

logback是log4j作者推出的新日誌系統,原生支援slf4j通用日誌api,允許平滑切換日誌系統,並且對簡化應用部署中日誌處理的工作做了有益的封裝。 官方地址為:http://logback.qos.ch/  Logback日誌需要依賴一下jar包: