React-Native热更新
?
安裝環境：
React-native 0.63.3
React-native-code-push 0.6.3
- 全局安裝?App Center CLI
第一步全局安裝appcenter的腳手架，通過npm安裝，（國內用戶可能會比較慢，請添加淘寶鏡像）
npm install -g appcenter-cli
?
- 登錄appcenter
* 首次登錄
執行appcenter login 數秒后會打開瀏覽器，需要先登錄，登陸后顯示授權碼，復制授權碼粘貼到終端回車
* 已登錄（登陸后，后面如果不退出，不需要再次登錄）
執行appcenter login 數秒后會打開瀏覽器并顯示授權碼，復制授權碼粘貼到終端回車
- 添加(創建)項目
分別創建android和ios 應用到appcenter:
?
appcenter apps create -d 項目名-android -o Android -p React-Native
appcenter apps create -d 項目名-ios -o iOS -p React-Native
?
例子：
appcenter apps create -d xmzj-android -o Android -p React-Native
appcenter apps create -d xmzj-ios -o iOS -p React-Native
?
?
?
四、檢查是否添加成功
appcenter apps list
?
?
五、部署 （生成key）
appcenter codepush deployment add -a 賬號/應用名稱Staging
?
例子：
appcenter codepush deployment add -a 賬號/xmzj-android Staging
appcenter codepush deployment add -a 賬號/xmzj-android Production
?
查看部署碼：
appcenter codepush deployment list -a 賬號/應用名稱?-k
?
- 添加?CodePush SDK 到app
安卓部分：
?1、Android:（react-native version大于 0.60）
1）項目目錄下安裝react-native-code-push
npm install --save react-native-code-push
注意：（如果沒有現成項目需要先react-native init創建項目，然后進行1）
2）在?android/settings.gradle文件添加
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-code-push/android/app')
?
3）在?android/app/build.gradle文件，在react.gradle后面追加codepush.gradle
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
?
4）更新MainApplication.java文件
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
? private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
? @Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
? };
}
?
?
?
android {
????buildTypes {
????????debug {
????????????resValue "string", "CodePushDeploymentKey", '""'
????????}
????????releaseStaging {
????????????resValue "string", "CodePushDeploymentKey",’這里添加stageing的key’
????????????matchingFallbacks = ['release']
????????????
????????}
????????release {
????????????resValue "string", "CodePushDeploymentKey", '這里添加production的key'
????????}
????}
}
?
?
注意：配置完成如找不到react-native-code-push在android/app/build.gradle增加以下配置
project.ext.react?=?[
????enableHermes:?false,??//?clean?and?rebuild?if?changing
????entryFile:?"index.js",
????bundleAssetName:?"index.android.bundle",
????bundleInDebug:?true,
????bundleInRelease:?true
]
?
當然 如果由于項目過大導致無法啟動，可對安卓項目項目進行分包處理
?
?
?
?
?
appcenter codepush release-react -a 賬號/項目名?--t 版本號?-d Production -m false --description "1.測試"
?
其中參數–t為二進制(.ipa與apk)安裝包的的版本；–d是要發布更新的環境分Production與Staging(默認為Staging)；–description?為更新說明；–m 是強制更新
?
例子：
appcenter codepush release-react -a 賬號/項目名-ios?-d Stageing
appcenter codepush release-react -a 賬號/項目名-android?-d Staging
?
iOS配置
稍后補充。。。
?
?
?
allowRestart?允許重啟更新
disallowRestart?不允許重啟
checkForUpdate?檢查是否有可用的更新
getUpdateMetadata?檢索已安裝更新的元數據（如description，必選）
notifyAppReady?通知CodePush運行時已安裝的更新被視為成功。如果您正在手動檢查和安裝更新（不是使用sync方法為您處理所有更新），則必須調用此方法；否則，CodePush會將更新視為失敗，并在應用程序下次重新啟動時回滾到以前的版本。
restartApp?立即重新啟動應用程序。如果有一個更新掛起，它將立即顯示給最終用戶。否則，調用此方法與最終用戶終止并重新啟動進程的行為相同。
sync?允許檢查更新、下載和安裝，所有操作都只需一次調用
?
?
<1>靜默更新：
應用程序啟動時的靜默同步（最簡單的默認行為）。你的應用程序將自動下載可用的更新，并在下次應用程序重新啟動時應用這些更新（如操作系統或最終用戶終止了它，或設備重新啟動）。這樣，整個更新體驗對最終用戶來說是“無聲的”，因為他們看不到任何更新提示和/或“合成”應用程序重新啟動。
class MyApp extends Component {} MyApp = codePush(MyApp);
?
<2>從后端進入前臺更新：
每次應用程序恢復時進行靜默同步。與1相同，除了我們檢查更新，或者在每次應用程序“后臺”后返回前臺時應用一個更新（如果存在）。
?
class MyApp extends Component {}
MyApp = codePush({ checkFrequency: codePush.CheckFrequency.ON_APP_RESUME, installMode: codePush.InstallMode.ON_NEXT_RESUME })(MyApp);
?
<3>詢問用戶，同意立即更新
互動的。當更新可用時，請在下載之前提示最終用戶獲得權限，然后立即應用更新。如果使用強制標志發布更新，最終用戶仍然會收到有關更新的通知，但他們不能選擇忽略它。
class MyApp extends Component {} MyApp = codePush({ updateDialog: true, installMode: codePush.InstallMode.IMMEDIATE })(MyApp);
?
<4>記錄/顯示進度
記錄/顯示進度。當應用程序與服務器同步以進行更新時，請使用codePushStatusDidChange和/或codePushDownloadDidProgress事件鉤子記錄此過程的不同階段，甚至向用戶顯示進度條。
?
class MyApp extends Component {
codePushStatusDidChange(status) {
switch(status) {
?case codePush.SyncStatus.CHECKING_FOR_UPDATE:
console.log("正在檢查更新...");
break;
case codePush.SyncStatus.DOWNLOADING_PACKAGE:
console.log("正在下載安裝包");
?break;
case codePush.SyncStatus.INSTALLING_UPDATE:
console.log("正在安裝更新");
?break;
case codePush.SyncStatus.UP_TO_DATE:
?console.log("更新到最新");
break;
?case codePush.SyncStatus.UPDATE_INSTALLED:
console.log("已安裝更新");
break;
?}
}
codePushDownloadDidProgress(progress) {
console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
?}
}
MyApp = codePush(MyApp);
?
CodePushOptions
?
<1>codePush.CheckFrequency.
檢查頻率
//ON_APP_RESUME APP恢復到前臺的時候
//ON_APP_START APP開啟的時候
//MANUAL 手動檢查
<2>deploymentKey（String）
指定要查詢更新的部署密鑰。默認情況下，此值從信息列表文件（iOS）和java.main活動文件（Android），但如果需要動態使用不同的部署，則此選項允許您從腳本端重寫它
?
<3>codePush.InstallMode
指定何時安裝可選更新（未標記為必需的更新)
默認為codePush.InstallMode.ON_NEXT_RESTART. 有關可用選項及其作用的說明，請參閱InstallMode enum參考。
?
//ON_NEXT_RESUME 下次恢復到前臺時
//ON_NEXT_RESTART 下一次重啟時
//IMMEDIATE 馬上更新
?
<4>mandatoryInstallMode動態安裝模式
?
<5>minimumBackgroundDuration?(Number)?默認值為0，??指定重新啟動應用程序之前應用程序需要在后臺運行的最小秒數。
此屬性僅適用于使用安裝的更新?InstallMode.ON_NEXT_RESUME?or?InstallMode.ON_NEXT_SUSPEND?時使用
?
<6>uploadDialog一個“選項”對象，用于確定當更新可用時，是否應向最終用戶顯示確認對話框
?
//是否顯示更新描述
????????????????????appendReleaseDescription : true ,
????????????????????//更新描述的前綴。 默認為"Description"
????????????????????descriptionPrefix : "更新內容：" ,
????????????????????//強制更新按鈕文字，默認為continue
????????????????????mandatoryContinueButtonLabel : "立即更新" ,
???????????????????//強制更新時的信息. 默認為"An update is available that must be installed."
????????????????????mandatoryUpdateMessage : "必須更新后才能使用" ,
????????????????????//非強制更新時，按鈕文字,默認為"ignore"
????????????????????optionalIgnoreButtonLabel : '稍后' ,
????????????????????//非強制更新時，確認按鈕文字. 默認為"Install"
????????????????????optionalInstallButtonLabel : '后臺更新' ,
????????????????????//非強制更新時，檢查到更新的消息文本
????????????????????optionalUpdateMessage : '有新版本了，是否更新？' ,
????????????????????//Alert窗口的標題
????????????????????title : '更新提示'
?
?
?
詳細請參考appcenter官網：https://docs.microsoft.com/en-us/appcenter/distribution/codepush/
?
總結
以上是生活随笔為你收集整理的React-Native热更新的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA架构师年薪40W的水平竟然是这样
- 下一篇： 多功能全能计算机,全能计算机app