1. 程式人生 > >react-antive 熱更新

react-antive 熱更新

GitHub:https://github.com/Microsoft/react-native-code-push

全域性安裝:

npm install -g code-push-cli  (Mac 加 sudo)

命令列註冊賬號:code-push register

然後跳轉到一個網址進行註冊登入,成功之後返回

新增應用:

code-push app add <appName>  android  react-native 

                             名稱         平臺

成功後如下圖(這是Android下的,iOS同理):

儲存圖中的 Key 後面會用到,Production(正式版)     Staging(測試版)

 

如果沒有儲存,也不要緊,使用如下命令,即可進行檢視:

 code-push deployment ls appName -k 

結果如下圖:

 


 

專案中安裝使用:

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

或者

yarn add react-native-code-push

安裝依賴:

專案只有一個包的話可以使用命令: 

react-native link

如果已經安裝過的別的,例如(react-native-video等),使用如下命令

react-native link react-native-code-push

 

提示輸入 key ,根據對應的平臺進行輸入,忘記的話,可以看上面的命令:

 

1、專案中新建 bundles 資料夾,

mkdir bundles

2、更新:

react-native bundle --platform android --entry-file index.js --bundle-output ./bundles/index.android.bundle --dev false
code-push release <appName> <updateContentsPath> <targetBinaryVersion> [options]

code-push release <appName> <bundles資料夾路徑> 1.0.0 --deploymentName Production --des "新的更新" --m false

每次先執行上面打成bundle檔案,再上傳到code-push

 react-native bundle --platform android --entry-file index.js --bundle-output ./bundles/index.android.bundle --dev false


code-push release code ./bundles/index.android.bundle 1.1.0 --deploymentName Production --des "本次更新1" --m false

// 返回的結果
Successfully released an update containing the "./bundles/index.android.bundle" file to the "Production" deployment of the "code" app.

 react-native bundle --platform android --entry-file index.js --bundle-output ./bundles/index.android.bundle --dev false


code-push release code ./bundles/index.android.bundle 1.1.0 --deploymentName Production --des "本次更新2" --m false

// 返回的結果
Successfully released an update containing the "./bundles/index.android.bundle" file to the "Production" deployment of the "code" app.

注:

1.targetBinaryVersion是指當前app的版本(對應build.gradle中設定的versionName "1.0.0")

2.預設為 staging 環境更新,若是 staging ,則不需要填寫 deploymentName

3.des 更新描述

4.mandatory(--m) 是否強制更新。預設情況下mandatory為false即不強制更新

 

正式版更新:

1、打包成APK 

cd android && ./gradlew assembleRelease

2、更改正式版的 key, 在 res/values/strings.xml 中進行修改

<resources>
    <string moduleConfig="true" name="reactNativeCodePush_androidDeploymentKey">對應的key</string>
    <string name="app_name">codePush</string>
</resources>

更新同上,注意將環境改為正式版:  --deploymentName Production

 

引數

/**
 * aync 方法
 * deploymentKey 部署key
 * installMode   安裝模式
 *               用在向CodePush推送更新時沒有設定強制更新(mandatory為true)的情況下
 *               預設codePush.InstallMode.ON_NEXT_RESTART即下一次啟動的時候安裝
 * mandatoryInstallMode
 *               強制更新,預設codePush.InstallMode.IMMEDIATE
 * minimumBackgroundDuration
 *               app處於後臺多少秒才進行重啟已完成更新。預設為0
 *               該屬性只在installMode為InstallMode.ON_NEXT_RESUME情況下有效
 * updateDialog  更新的對話方塊,可選
 *      -appendReleaseDescription   是否顯示更新description,預設false
 *      -descriptionPrefix          更新說明的字首。 預設是” Description: “
 *      -mandatoryContinueButtonLabel   強制更新的按鈕文字. 預設 to “Continue”
 *      -mandatoryUpdateMessage     強制更新時,更新通知. Defaults to “An update is available that must be installed.”.
 *      -optionalIgnoreButtonLabel  非強制更新時,取消按鈕文字. Defaults to “Ignore”
 *      -optionalInstallButtonLabel 非強制更新時,確認文字. Defaults to “Install”.
 *      -optionalUpdateMessage      非強制更新時,更新通知. Defaults to “An update is available. Would you like to install it?”
 *      -title  更新通知的標題. Defaults to “Update available”.
 */

自動更新:

import codePush from "react-native-code-push";
componentDidMount() {
        codePush.sync({
            updateDialog: {
                // 非強制更新
                optionalIgnoreButtonLabel: '取消',
                optionalInstallButtonLabel: '更新',
                optionalUpdateMessage: '是否選擇更新',
                title: '新版本',

            },
            installMode: codePush.InstallMode.IMMEDIATE,
            mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
        });
 }

 

手動檢查:

 


 

 

code-push 常用命令

新增 app 專案:

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

code-push app add app-amdroid   android   <react-native>
 

code-push app add MyApp ios react-native

code-push app add MyApp windows react-native

code-push app add MyApp android cordova

檢視列表及刪除:

code-push app remove 或者 rm 在賬號裡移除一個app

code-push app rename 重新命名一個存在app

code-push app list 或則 ls 列出賬號下面的所有app

code-push app transfer 把app的所有權轉移到另外一個賬號



code-push deployment rename appName 重新命名

code-push deployment rm appName 刪除部署

code-push deployment ls appName 列出應用的部署情況

code-push deployment ls appName -k 檢視部署的key

code-push deployment history appName deploymentNmae

code-push deployment add appName deploymentNmae 新新增部署

code-push deployment rm appName deploymentNmae 刪除部署

登入登出:

code-push login 登陸

code-push logout 登出

code-push access-key ls 列出登陸的

token code-push access-key rm <accessKye> 刪除某個 access-key

 


 

iOS  手動配置

1、配置deployment-key的設定

用Xcode 開啟專案 ➜ Xcode的專案導航檢視中的PROJECT下選擇你的專案 ➜ 選擇Info頁籤 ➜ 在Configurations節點下單擊 + 按鈕 ➜ 選擇Duplicate "Release ➜ 輸入Staging(名稱可以自定義取)

然後到 Build Settings 進行 key 值的填寫


 

輸入之前的 deployment-key

 

 

如果之前建立時沒有儲存,可用下面的命令檢視部署的key

code-push deployment ls appName -k 

 

開啟 Info.plist檔案,在CodePushDeploymentKey列的Value中輸入$(CODEPUSH_KEY)

 

釋出同 Android 一樣,都是兩步

 react-native bundle --platform ios --entry-file index.js --bundle-output ./bundles/index.ios.bundle --dev false


code-push release code-ios ./bundles/index.ios.bundle 1.1.0 --deploymentName Production --des "本次更新" --m false