ReactNative CodePush熱更新集成

經(jīng)測(cè)試CodePush的熱更新效果還是很穩(wěn)定的,集成方法如下:<br />官網(wǎng) https://github.com/Microsoft/react-native-code-push<br />注冊(cè)地址 https://appcenter.ms/apps<br />參考文章 https://blog.csdn.net/qq_33323251/article/details/79437932 部分內(nèi)容有改動(dòng)<br />Step1!<br />安裝CodePush客戶端

npm install -g code-push-cli

這個(gè)在一臺(tái)計(jì)算機(jī)上運(yùn)行一次就可以了

code-push -v

執(zhí)行上面這個(gè)命令,如果看到版本證明安裝成功<br />Step2!<br />CodePush注冊(cè)

code-push register

輸入后跳網(wǎng)頁(yè),登錄后會(huì)返給一個(gè)KEY,控制臺(tái)輸入這個(gè)key即可。

code-push login

使用上述指令登錄。<br />Step3!<br />注冊(cè)APP<br />安卓IOS需要分開(kāi)注冊(cè)

code-push app add <appName> <os> <platform>

例如直播項(xiàng)目

code-push app add StreamProjectIOS ios react-native
code-push app add StreamProjectAndroid android react-native

注冊(cè)完成后會(huì)返回一套deployment key<br />
1560851357276-84dc42dc-b8a6-40fd-9dc0-29905a2b9770.png

<br />Production為最終上線后的KEY,Staging是灰度測(cè)試的KEY,一般先用staging,測(cè)試成功后codePush有指令將灰度的內(nèi)容推到正式版上。<br />Step4!<br />集成<br />建議采用rnpm集成,現(xiàn)在react-native已經(jīng)集成了rnpm,使用非常簡(jiǎn)易

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

link的時(shí)候會(huì)提示輸入key,先使用注冊(cè)APP時(shí)返回的staging即可,IOS安卓分別輸入。<br />至此IOS集成完成,安卓按官網(wǎng)說(shuō)也已經(jīng)完成,但測(cè)試時(shí)發(fā)現(xiàn)Package沒(méi)有導(dǎo)入,還需要一些步驟<br />MainApplication里

@Override
    protected List<ReactPackage> getPackages() {
      // 3. Instantiate an instance of the CodePush runtime and add it to the list of
      // existing packages, specifying the right deployment key. If you don't already
      // have it, you can run "code-push deployment ls <appName> -k" to retrieve your key.
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
      );
    }

具體參考開(kāi)頭鏈接╮(╯▽╰)╭<br />Step5!<br />RN代碼更新<br />默認(rèn)采取靜默更新,打開(kāi)APP檢查是否有更新==》有的話下載安裝==》下次啟動(dòng)即為更新后的<br />rn代碼更新index.js文件(app根目錄)

import codePush from "react-native-code-push";  //導(dǎo)包
class MyApp extends Component<{}>{
    //打印一些狀態(tài),optional
    codePushStatusDidChange(status) {
        switch(status) {
            case codePush.SyncStatus.CHECKING_FOR_UPDATE:
                console.log("Checking for updates.");
                break;
            case codePush.SyncStatus.DOWNLOADING_PACKAGE:
                console.log("Downloading package.");
                Alert.alert('Downloading package');
                break;
            case codePush.SyncStatus.INSTALLING_UPDATE:
                console.log("Installing update.");
                break;
            case codePush.SyncStatus.UP_TO_DATE:
                console.log("Up-to-date.");
                Alert.alert('Up-to-date');
                break;
            case codePush.SyncStatus.UPDATE_INSTALLED:
                console.log("Update installed.");
                break;
        }
    }
    //打印下載進(jìn)度,optional
    codePushDownloadDidProgress(progress) {
        console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
    }
    render(){
        return(
            <App/>  //APP是react-navigation導(dǎo)入的
        )
    }
}
MyApp=codePush(MyApp);  //就這一行是必須的
AppRegistry.registerComponent('ZhuoShopping', () => MyApp);

如果需要其他更新方式(例如彈出提示更新)在codePush(MyApp)方法中再傳入Option的參數(shù),具體參考官網(wǎng)。<br />至此全部準(zhǔn)備工作完成。<br />Step 6!<br />發(fā)布熱更新<br />修改了RN代碼后,運(yùn)行下面指令發(fā)布更新

code-push release-react StreamProjectIOS ios  //更新IOS包
code-push release-react StreamProjectAndroid android  //更新Android包

完事!<br />注意事項(xiàng)!?。?!<br />android打包使用Build==》general signed Apk這樣生成的APK熱更新后再打開(kāi)就回滾,所以打包時(shí)需要使用官網(wǎng)的打包方式:<br />https://facebook.github.io/react-native/docs/signed-apk-android.html

cd android && ./gradlew assembleRelease   //使用此命令打包

CodePush是微軟的,服務(wù)器在國(guó)外,速度是個(gè)隱患(測(cè)試時(shí)還行)<br />構(gòu)建自己的CodePushServer<br />https://github.com/lisong/code-push-server

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容