react-native集成code-push(熱更新)

安裝與注冊CodePush

安裝CodePush CLI

在終端輸入

npm install -g code-push-cli

安裝完成后輸入code-push -v 查看版本號

code-push -v
image.png

創(chuàng)建一個CodePush 賬號

在終端輸入code-push register 瀏覽器會打開注冊頁面 選擇一個品臺注冊成功后code-push 會給一個access key,復(fù)制溃卡,然后登錄

code-push register
image.png

在CodePush服務(wù)器注冊app

為了讓CodePush服務(wù)器知道你的app芬沉,我們需要向它注冊app: 在終端輸入code-push app add <appName> <os> <platform> 即可完成注冊。

image.png

注冊完成之后會返回一套deployment key,該key在后面步驟中會用到瘸爽。

集成CodePush SDK

android

下面我們通過如下步驟在Android項目中集成CodePush域那。
第一步:在項目中安裝 react-native-code-push插件,終端進(jìn)入你的項目根目錄然后運(yùn)行

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

第二步: 運(yùn)行 react-native link react-native-code-push审编。這條命令將會自動幫我們在anroid文件中添加好設(shè)置撼班。

第三步: 在 android/app/build.gradle文件里面添代碼(如果存在就不用添加):

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

然后在/android/settings.gradle中添加如下代碼(如果存在就不用添加):

include ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

第四步: 在終端運(yùn)行 code-push deployment ls <appName> -k獲取 部署秘鑰。


image.png

第五步:添加配置
①打開android/app/build.gradle文件,找到android { buildTypes {} }然后添加如下代碼即可:

release {
//省略其他代碼
          buildConfigField "String", "CODE_PUSH_KEY", CODE_PUSH_KEY_PRODUCTION
        }
debug {
            buildConfigField "String", "CODE_PUSH_KEY", CODE_PUSH_KEY_STAGING
        }

②android項目下gradle.properties添加


image.png
CODE_PUSH_KEY_PRODUCTION="你的production_key XXXXXXXXXXXXXXXXXXXXXXXXXXXX"
CODE_PUSH_KEY_STAGING="你的staging_key XXXXXXXXXXXXXXXXXXXXXXXX"

③更新 MainApplication.java文件

 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
            new CodePush(BuildConfig.CODE_PUSH_KEY, getApplicationContext(), BuildConfig.DEBUG),
      );
    }
// 如果已經(jīng)自動生成就不用添加
 @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

④修改versionName
在 android/app/build.gradle中有個 android.defaultConfig.versionName屬性垒酬,我們需要把 應(yīng)用版本改成 1.0.0(默認(rèn)是1.0砰嘁,但是codepush需要三位數(shù))。

android{
    defaultConfig{
        versionName "1.0.0"
    }
}

android 集成完畢勘究。

使用CodePush進(jìn)行熱更新

最好在項目根矮湘。component中進(jìn)行上述策略控制
引入

import codePush from 'react-native-code-push' 

.在 componentDidMount中調(diào)用 sync方法,后臺請求更新

componentDidMount(){
  codePush.sync({
            updateDialog:{
                appendReleaseDescription:true,
                descriptionPrefix:'更新內(nèi)容',
                title:'更新',
                mandatoryUpdateMessage:'',
                mandatoryContinueButtonLabel:'更新',
            }
        })
}

sync方法口糕,提供了如下屬性以允許你定制sync方法的默認(rèn)行為

deploymentKey (String): 部署key缅阳,指定你要查詢更新的部署秘鑰,默認(rèn)情況下該值來自于Info.plist(Ios)和MianActivity.java(Android)文件景描,你可以通過設(shè)置該屬性來動態(tài)查詢不同部署key下的更新十办。
installMode (codePush.InstallMode): 安裝模式,用在向CodePush推送更新時沒有設(shè)置強(qiáng)制更新(mandatory為true)的情況下超棺,默認(rèn)codePush.InstallMode.ON_NEXT_RESTART即下一次啟動的時候安裝向族。
mandatoryInstallMode (codePush.InstallMode):強(qiáng)制更新,默認(rèn)codePush.InstallMode.IMMEDIATE。
minimumBackgroundDuration (Number):該屬性用于指定app處于后臺多少秒才進(jìn)行重啟已完成更新说搅。默認(rèn)為0炸枣。該屬性只在installMode為InstallMode.ON_NEXT_RESUME情況下有效。
updateDialog (UpdateDialogOptions) :可選的,更新的對話框适肠,默認(rèn)是null,包含以下屬性
appendReleaseDescription (Boolean) - 是否顯示更新description霍衫,默認(rèn)false
descriptionPrefix (String) - 更新說明的前綴。 默認(rèn)是” Description: “
mandatoryContinueButtonLabel (String) - 強(qiáng)制更新的按鈕文字. 默認(rèn) to “Continue”.
mandatoryUpdateMessage (String) - 強(qiáng)制更新時侯养,更新通知. Defaults to “An update is available that must be installed.”.
optionalIgnoreButtonLabel (String) - 非強(qiáng)制更新時敦跌,取消按鈕文字. Defaults to “Ignore”.
optionalInstallButtonLabel (String) - 非強(qiáng)制更新時,確認(rèn)文字. Defaults to “Install”.
optionalUpdateMessage (String) - 非強(qiáng)制更新時逛揩,更新通知. Defaults to “An update is available. Would you like to install it?”.
title (String) - 要顯示的更新通知的標(biāo)題. Defaults to “Update available”.

=======================================================
如果可以進(jìn)行更新柠傍,CodePush會在后臺靜默地將更新下載到本地,等待APP下一次啟動的時候應(yīng)用更新辩稽,以確保用戶看到的是最新版本惧笛。
如果更新是強(qiáng)制性的,更新文件下載好之后會立即進(jìn)行更新逞泄。
如果你期望更及時的獲得更新患整,可以在每次APP從后臺進(jìn)入前臺的時候去主動的檢查更新:
在應(yīng)用的根component的componentDidMount中添加如下代碼:

AppState.addEventListener("change", (newState) => {
    newState === "active" && codePush.sync();
});

發(fā)布更新

CodePush支持兩種發(fā)布更新的方式,一種是通過code-push release-react簡化方式喷众,另外一種是通過code-push release的復(fù)雜方式各谚。
①code-push release-react <appName> <platform>

code-push release-react aaa android
or
code-push release-react aaa android  --t 1.0.0 --dev false --d Production --des "更新內(nèi)容" --m true
// 其中參數(shù)–t為二進(jìn)制(.ipa與apk)安裝包的的版本;–dev為是否啟用開發(fā)者模式(默認(rèn)為false)到千;–d是要發(fā)布更新的環(huán)境分Production與Staging(默認(rèn)為Staging)昌渤;–des為更新說明;–m 是強(qiáng)制更新憔四。

這種方式將打包與發(fā)布兩個命令合二為一膀息,可以說大大簡化了我們的操作流程,建議大家多使用這種方式來發(fā)布更新了赵。
②code-push release 方式(沒有使用不說了_).

圖片


image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末履婉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子斟览,更是在濱河造成了極大的恐慌毁腿,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件苛茂,死亡現(xiàn)場離奇詭異已烤,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)妓羊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門胯究,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人躁绸,你說我怎么就攤上這事裕循〕枷” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵剥哑,是天一觀的道長硅则。 經(jīng)常有香客問我,道長株婴,這世上最難降的妖魔是什么怎虫? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮困介,結(jié)果婚禮上大审,老公的妹妹穿的比我還像新娘。我一直安慰自己座哩,他們只是感情好徒扶,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著根穷,像睡著了一般酷愧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缠诅,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機(jī)與錄音乍迄,去河邊找鬼管引。 笑死,一個胖子當(dāng)著我的面吹牛闯两,可吹牛的內(nèi)容都是我干的褥伴。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼漾狼,長吁一口氣:“原來是場噩夢啊……” “哼重慢!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起逊躁,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤似踱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后稽煤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體核芽,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年酵熙,在試婚紗的時候發(fā)現(xiàn)自己被綠了轧简。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡匾二,死狀恐怖哮独,靈堂內(nèi)的尸體忽然破棺而出拳芙,到底是詐尸還是另有隱情,我是刑警寧澤皮璧,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布舟扎,位于F島的核電站,受9級特大地震影響恶导,放射性物質(zhì)發(fā)生泄漏浆竭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一惨寿、第九天 我趴在偏房一處隱蔽的房頂上張望邦泄。 院中可真熱鬧,春花似錦裂垦、人聲如沸顺囊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽特碳。三九已至,卻和暖如春晕换,著一層夾襖步出監(jiān)牢的瞬間午乓,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工闸准, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留益愈,地道東北人。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓夷家,卻偏偏與公主長得像蒸其,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子库快,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容