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

1. 全局安裝code-push-cli

npm install -g code-push-cli

2. 注冊code-push帳號

code-push register
Please login to Mobile Center in the browser window we've just opened.

Enter your token from the browser: 
#會彈出一個瀏覽器,讓你注冊,可以使用github帳號對其進(jìn)行授權(quán),授權(quán)成功會給一串Token,點擊復(fù)制,在控制進(jìn)行粘貼回車(或者使用code-push login命令)晋控。

Enter your token from the browser:  casfwa1234xxxxxxxxxxxxxxxxx
#如果成功的話會有下面提示:
Successfully logged-in. Your session file was written to /Users/huanghuanlai/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

3. 在code-push添加一個ios的app

code-push app add 3271450-ios ios react-native
#成功提示如下方
Successfully added the "3271450-ios" app, along with the following default deployments:
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ eWkbCoUBPWQhK4hPFDFdijwqV3GWcc988a73-c917-4dba-bd40-1837998442a6 │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ sYvpLUxuBU9FxICqJ5sccL2GDUPZcc988a73-c917-4dba-bd40-1837998442a6 │
└────────────┴──────────────────────────────────────────────────────────────────┘

4. 在code-push添加一個android的app

code-push app add 3271450-android android react-native
#成功提示如下方
Successfully added the "3271450-android" app, along with the following default deployments:
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name       │ Deployment Key                                                   │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ yGi8qCCYL5s6BKR1S82I1z4OXF2Pcc988a73-c917-4dba-bd40-1837998442a6 │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging    │ fqdFCqLyL4XclNZjWvNN3KNhImR5cc988a73-c917-4dba-bd40-1837998442a6 │
└────────────┴──────────────────────────────────────────────────────────────────┘

5. 在項目根目錄添加react-native-code-push

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

6.執(zhí)行:react-native link react-native-code-push

Scanning folders for symlinks in /Users/huanghuanlai/dounine/oschina/dounineApp/node_modules (8ms)
? What is your CodePush deployment key for Android (hit <ENTER> to ignore) fqdFCqLyL4XclNZjWvNN3KNhImR5cc988a73-c917-4dba-bd40-1837998442a6
#添加的Android App的Deployment Key里面的Staging的Key。
image.png
? What is your CodePush deployment key for iOS (hit <ENTER> to ignore) sYvpLUxuBU9FxICqJ5sccL2GDUPZcc988a73-c917-4dba-bd40-1837998442a6

#添加的ios App的Deployment Key里面的Staging的Key

Running android postlink script

7. 在App.js文件添加以下代碼

...
import codePush from "react-native-code-push";
const codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
export default class App extends Component<{}> {

  componentDidMount(){
    codePush.sync({
      updateDialog: true,
      installMode: codePush.InstallMode.IMMEDIATE,
      mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
      //deploymentKey為剛才生成的,用Platform判斷下平臺
      deploymentKey: Platform.OS === 'ios'?'sYvpLUxuBU9FxICqJ5sccL2GDUPZcc988a73-c917-4dba-bd40-1837998442a6':'fqdFCqLyL4XclNZjWvNN3KNhImR5cc988a73-c917-4dba-bd40-1837998442a6',
      });
  }
  ...

8. 模擬器上運行項目

react-native run-ios
react-native run-android

如圖下所顯
1:開啟debug調(diào)試


image.png

2:出現(xiàn)以下內(nèi)容說明CodePush已經(jīng)成功運行

image.png

9. 發(fā)布一個ios/android新版本
執(zhí)行:code-push release-react 3271450-ios ios 或code-push release-react 3271450-android android


Detecting ios app version:

Using the target binary version value "1.0" from "ios/vv/Info.plist".

Running "react-native bundle" command:

node node_modules/react-native/local-cli/cli.js bundle --assets-dest /var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush --bundle-output /var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush/main.jsbundle --dev false --entry-file index.js --platform ios
Scanning folders for symlinks in /Users/ct/Desktop/demo/vv/node_modules (20ms)
Scanning folders for symlinks in /Users/ct/Desktop/demo/vv/node_modules (100ms)
Loading dependency graph, done.

bundle: Writing bundle output to: /var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush/main.jsbundle
bundle: Done writing bundle output

Releasing update contents to CodePush:

Upload progress:[==================================================] 100% 0.0s
Successfully released an update containing the "/var/folders/w5/lh1853r53v9c07p_1m6blttm0000gn/T/CodePush/CodePush" directory to the "Staging" deployment of the "3271450-ios" app.

10. 刷新頁面
放的是安卓的,ios顯示樣式一樣

image.png

11. 修改更新彈出框內(nèi)容
進(jìn)入node_modules->react-native-code-push->Codepush.js修改以下內(nèi)容

image.png

修改以后效果:
image.png

12. 需要用戶強制更新

code-push release-react 3271450-android android --m true

效果如下


image.png
(樣式修改:同樣進(jìn)入node_modules->react-native-code-push->Codepush.js修改以下內(nèi)容)
image.png

以下為進(jìn)階內(nèi)容:

在app 版本號默認(rèn)的情況下以上是沒問題,但app肯定是需要迭代破停!

下面是安卓版本號修改以后的截圖

android/app/build.gradle中的android.defaultConfig.versionName屬性轧铁,需要把應(yīng)用版本改成 1.0.0(默認(rèn)是1.0,但是codepush需要三位數(shù))癌椿。

image.png

這樣的話上面代碼就失效了。

需要使用下面命令:
code-push release-react <Appname> <Platform> --t <本更新包面向版本號> --des <本次更新說明(可不加)> --m true < --m true 可不加>
code-push release-react 3271450-android android --t 1.0.1;  //非強制更新(1.0.1是versionNmae)
code-push release-react 3271450-android android --t 1.0.1 --m true; //強制更新(1.0.1是versionNmae)

??????大家注意:修改了原生文件代碼(例如MainActivity.java等原生文件,或者添加新插件)時CodePush是無法進(jìn)行更新的菱阵,必須通過提交到應(yīng)用商店進(jìn)行更新L叨怼!晴及!

親測沒有問題都办,覺得有用的小伙伴點個小紅心就行??,么么噠虑稼。

問題總結(jié):

1琳钉、app:recordFilesBeforeBundleCommandDebug

將node-module/react-native-code-push/codepush.gradle修改如下


def nodeExecutableAndArgs = config.nodeExecutableAndArgs ?: ["node"]
//修改成以下代碼
def nodeExecutableAndArgs = config.nodeExecutableAndArgs ?: ["/usr/local/bin/node"]

2、 [Error:Execution failed for task ':app:transformClassesWithDexForDebug]

在項目android/app/build.gradle下添加

 defaultConfig {
        ...
        multiDexEnabled true
}
友情提示:在開發(fā)中有遇到RN相關(guān)的技術(shù)問題蛛倦,歡迎小伙伴加入交流群(620792950)歌懒,在群里提問、互相交流學(xué)習(xí)溯壶。交流群也定期更新最新的RN學(xué)習(xí)資料給大家及皂,謝謝大家支持甫男!
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市验烧,隨后出現(xiàn)的幾起案子板驳,更是在濱河造成了極大的恐慌,老刑警劉巖碍拆,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件若治,死亡現(xiàn)場離奇詭異,居然都是意外死亡感混,警方通過查閱死者的電腦和手機端幼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來弧满,“玉大人静暂,你說我怎么就攤上這事∑谆啵” “怎么了?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵摹迷,是天一觀的道長疟赊。 經(jīng)常有香客問我,道長峡碉,這世上最難降的妖魔是什么近哟? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮鲫寄,結(jié)果婚禮上吉执,老公的妹妹穿的比我還像新娘。我一直安慰自己地来,他們只是感情好戳玫,可當(dāng)我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著未斑,像睡著了一般咕宿。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蜡秽,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天府阀,我揣著相機與錄音,去河邊找鬼芽突。 笑死试浙,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的寞蚌。 我是一名探鬼主播田巴,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼钠糊,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了固额?” 一聲冷哼從身側(cè)響起眠蚂,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎斗躏,沒想到半個月后逝慧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡啄糙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年笛臣,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片隧饼。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡沈堡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出燕雁,到底是詐尸還是另有隱情诞丽,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布拐格,位于F島的核電站僧免,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏捏浊。R本人自食惡果不足惜懂衩,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望金踪。 院中可真熱鬧浊洞,春花似錦、人聲如沸胡岔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽姐军。三九已至铁材,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間奕锌,已是汗流浹背著觉。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留惊暴,地道東北人饼丘。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像辽话,于是被迫代替她去往敵國和親肄鸽。 傳聞我的和親對象是個殘疾皇子卫病,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,860評論 2 361

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

  • 《擺渡人》,講的是一個少女死亡后典徘,在踏入另一個世界的過程中蟀苛,穿過荒原時與她的靈魂引導(dǎo)者慢慢相愛的故事。他們勇敢地面...
    吃素的萌虎閱讀 240評論 0 0
  • 郁悶的年小年將剛寫好的通訊稿拿給宋瀛逮诲,“今天開會了帜平,我想著寫了一篇通訊稿∶佛校” “好事啊裆甩,那你為什么不開心?”宋瀛從...
    晏蘋閱讀 478評論 0 0
  • 這是本我把它歸入了值得再讀一次的書籍之一。 是在亞馬遜上看到這本書的箍邮,在我的亞馬遜首頁推薦上茉帅,幾乎是一看題目就馬上...
    曉曉的窩閱讀 660評論 0 1
  • 這是一座偏僻的小鎮(zhèn),因為觀星的魔鬼巖而出名锭弊,每天人來人往担敌。 何浪是一家店的老板,店里很小只有一個木臺廷蓉,上面擺著照片...
    霧中魚閱讀 285評論 1 3