用CodePush在React Native App中做熱更新

最近在學React Native，學到了CodePush熱更新。

老師講了兩種實現的方法，現將其記錄一下。

相比較原生開發，使用React Native開發App不僅能節約開發成本，還能做原生開發不能實現的熱更新功能。

使用原生技術開發App時，每次代碼做了改動后，都需要提交到應用商店進行審核，審核通過后，需要等用戶重新下載安裝后才會生效。而如果使用React Native開發App，開發者可隨時發布新版本，不用經過應用商店的審核，用戶即可使用到新版本，並且還可做到不用經過用戶的同意就強制安裝新版本。

CodePush是微軟的技術，因為服務器在國外，所以不太穩定。如果開發的App是針對國內市場的，應該使用CodePush中國。

要使用CodePush，需安裝cpcn-react-native依賴包。可使用官方提供的工具cpcn-client來安裝依賴包。cpcn-client的下載地址是：http://code-push.cn/docs/1010.htm　。

代碼實現比較簡單。第一種方法是直接改變App.js組件：

import cpcn from 'cpcn-react-native';

class App  extends Component {
    
}

App = cpcn(App);

export default App;

這種方法在有新版本更新時，會使用默認的提示框，提示框中的文字也是默認的。靈活性不夠。

第二種方法比較靈活，可以自定義對話框和進度條。這種方法使用 cpcn.check() 方法。

import cpcn from "cpcn-react-native";

class App extends Component {
    componentDidMount(){
        cpcn.check({
            checkCallback: (remotePackage, agreeContinueFun) => {
                if(remotePackage){

                }
            },
            downloadProgressCallback: (downloadProgress) => {

            },
            installedCallback: (restartFun) => {

            }
        });
    }
}

export default App;

將 cpcn.check() 方法寫在 App.js 的 componentDidMount 方法內，當 App 組件加載后調用此依法。

cpcn.check() 方法的參數：

checkCallback： 在檢查是否有可更新的版本后調用這個方法，如果 remotePackage 不是 null，表示有可更新的版本。如果要繼續更新，就調用 agreeContinueFun(true)，如果不想繼續更新，就調用 agreeContinueFun(false)。

downloadProgressCallback： 在下載新版本的過程中調用這個方法。可用它的參數 downloadProgress 做進度條。downloadProgress.receivedBytes 是已經下載的字節數，downloadProgress.totalBytes 是總字節數。

installedCallback： 當新版本安裝完成后調用這個方法。需調用 restartFun(true) 重啟App，重啟后新版本就生效了。