React-Native Android集成熱更新Code-Push

React-Native Android集成熱更新Code-Push

更新流程（圖片來(lái)源：http://www.itdecent.cn/p/cbc6a1dbfe30）

更新流程

主要參考github上的demo：
https://github.com/lisong/code-push-server

客戶端eg.

ReactNative CodePushDemo
可以clone or download下來(lái)正常運(yùn)行
然后參照文檔：https://github.com/lisong/code-push-server/blob/master/docs/react-native-code-push.md 執(zhí)行

安裝依賴包
1. react-native-cli react-native命令行工具，安裝后可以在終端使用react-native命令
$ npm install react-native-cli@latest -g
2. code-push-cli 連接微軟云端，管理發(fā)布更新版本命令行工具，安裝后可以在終端使用code-push命令
$ npm install code-push-cli@latest -g
3. react-native-code-push 集成到react-native項(xiàng)目，按照以下步驟安裝并修改配置既可集成
$ react-native init CodePushDemo #初始化一個(gè)react-native項(xiàng)目
$ cd CodePushDemo
$ npm install --save react-native-code-push@latest  #安裝react-native-code-push
$ react-native link react-native-code-push  #連接到項(xiàng)目中，提示輸入配置可以先行忽略
4. code-push-server 微軟云服務(wù)在中國(guó)太慢，可以用它搭建自己的服務(wù)端。具體配置參考該項(xiàng)目
$ npm install code-push-server -g
$ code-push-server-db init --dbhost localhost --dbuser root --dbpassword #初始化數(shù)據(jù)庫(kù)
$ code-push-server #啟動(dòng)服務(wù) 瀏覽器中打開(kāi) http://127.0.0.1:3000
創(chuàng)建服務(wù)端應(yīng)用

基于code-push-server服務(wù)

$ code-push login http://127.0.0.1:3000  #瀏覽器中登錄獲取token，用戶名:admin, 密碼:123456
$ code-push app add CodePushDemo-ios #創(chuàng)建iOS版, 獲取Production DeploymentKey
$ code-push app add CodePushDemo-android #創(chuàng)建android版，獲取獲取Production DeploymentKey

配置CodePushDemo react-native項(xiàng)目
iOS 配置

編輯Info.plist文件，添加CodePushDeploymentKey和CodePushServerURL

  1. CodePushDeploymentKey值設(shè)置為CodePushDemo-ios的Production DeploymentKey值。

  2. CodePushServerURL值設(shè)置為code-push-server服務(wù)地址 http://127.0.0.1:3000/ 不在同一臺(tái)機(jī)器的時(shí)候，請(qǐng)將127.0.0.1改成外網(wǎng)ip或者域名地址。

  3. 將默認(rèn)版本號(hào)1.0改成三位1.0.0

...
<key>CodePushDeploymentKey</key>
<string>YourCodePushKey</string>
<key>CodePushServerURL</key>
<string>YourCodePushServerUrl</string>
...
android 配置

編輯MainApplication.java

  1. YourKey替換成CodePushDemo-android的Production DeploymentKey值

  2. YourCodePushServerUrl值設(shè)置為code-push-server服務(wù)地址 http://127.0.0.1:3000/ 不在同一臺(tái)機(jī)器的時(shí)候，請(qǐng)將127.0.0.1改成外網(wǎng)ip或者域名地址。

  3. 將默認(rèn)版本號(hào)1.0改成三位1.0.0

  4. android模擬器和code-push-server在同一臺(tái)機(jī)器上時(shí)，需要額外運(yùn)行命令adb reverse tcp:3000 tcp:3000 代理端口，否則無(wú)法訪問(wèn)127.0.0.1:3000端口

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new CodePushBuilder("YourKey", getApplicationContext())
          .setIsDebugMode(BuildConfig.DEBUG)
          .setServerUrl("YourCodePushServerUrl")
          .build()
  );
}
添加更新檢查

可以參考demo.js 可以在入口componentDidMount添加

CodePush.sync({
    installMode: CodePush.InstallMode.IMMEDIATE,
    updateDialog: true
});

不要忘記頭部引入

import CodePush from "react-native-code-push"

notice:

demo.js中用到ECMAScript中Decorators語(yǔ)法,需要安裝$ npm install babel-preset-react-native-stage-0 --save， 同時(shí)在.babelrc中添加'react-native-stage-0/decorator-support'.

eg. { "presets": ["react-native", "react-native-stage-0/decorator-support"] }

運(yùn)行CodePushDemo react-native項(xiàng)目

按照下面的步驟打包發(fā)布熱更新

base on

fork from https://github.com/Microsoft/react-native-code-push examples

iOS eg.
$ cd /path/to/code-push-demo-app
$ npm install
$ open ios/CodePushDemoApp.xcodeproj

在Xcode中打開(kāi)菜單 Product > Scheme > Edit Scheme... > Run 選項(xiàng)中Build Configuration修改成Release, 然后運(yùn)行編譯

android eg.
$ cd /path/to/code-push-demo-app
$ npm install
$ cd android
$ ./gradlew assembleRelease
$ cd app/build/outputs/apk #install app-release.apk into your phone
發(fā)布更新到服務(wù)上
$ code-push login http://api.code-push.com:8080 #登錄code-push-server
$ code-push app add CodePushReactNativeDemo-ios ios react-native  #iOS版
$ code-push app add CodePushReactNativeDemo-android android react-native #android版
$ cd /path/to/code-push-demo-app
$ npm install
$ code-push release-react CodePushReactNativeDemo-ios ios -d Production #發(fā)布到code-push-server ios
$ code-push release-react CodePushReactNativeDemo-android android -d Production #發(fā)布code-push-server android

在登錄的時(shí)候，會(huì)進(jìn)入該頁(yè)面，獲取token后在終端命令執(zhí)行填寫處粘貼即可


獲取登錄的token

在按照demo執(zhí)行的時(shí)候，如果自己搭建server，
需要修改application中設(shè)置的url地址setServerUrl("yourUrl"),
同時(shí)code-push登錄的時(shí)候也需要是自己的地址：code-push login yourUrl
終端登錄成功后，會(huì)返回key,然后對(duì)應(yīng)修改，如下形式：


YourKey

按照demo中執(zhí)行的命令語(yǔ)句可能會(huì)不成功，修改如下：
可以參考code-push常用命令發(fā)布更新，命令A(yù)ndroid，iOS都可用，對(duì)應(yīng)更換平臺(tái)及文件名

工程根目錄新增 bundles文件夾：
mkdir bundles
發(fā)布更新
  1. 自動(dòng)生成bundles文件發(fā)布:
code-push release-react 《app名稱》《平臺(tái)》 -t 《版本號(hào)》 -d Production --des "描述" -m true
例如
code-push release-react CodePushDemo-android android -t 1.0.0 -d Production --des "添加熱更新" -m true
  1. 手動(dòng)生成bundles文件發(fā)布， 首先在根目錄創(chuàng)建bundles文件夾（每次重新生成文件時(shí)需刪除上次的文件）
  • 單js文件
1. 創(chuàng)建bundles里的文件
打包命令
react-native bundle --platform 平臺(tái) --entry-file 啟動(dòng)文件 --bundle-output 打包js輸出文件 --assets-dest 資源輸出目錄 --dev 是否調(diào)試 

打包整個(gè)項(xiàng)目的js文件，例如: 
react-native bundle --platform android --entry-file index.js --bundle-output ./bundles/index.android.bundle --dev false

2. 發(fā)布更新
發(fā)布命令: 
code-push release <應(yīng)用名稱> <Bundles所在目錄> <對(duì)應(yīng)的應(yīng)用版本> --deploymentName 更新環(huán)境 --description 更新描述 --mandatory 是否強(qiáng)制更新

例如:
code-push release CodePushDemo-android ./bundles/index.android.bundle 1.0.0 --deploymentName Production --description "熱更新" --mandatory true
  • js文件+圖片資源，–assets-dest 后就是放圖片的文件夾路徑
打包命令：–assets-dest 后就是放圖片的文件夾路徑
react-native bundle --platform android --entry-file index.js --bundle-output ./bundles/index.android.bundle --assets-dest ./bundles --dev false

發(fā)布bundles文件：
code-push <release/debug> <projectName(與注冊(cè)的app同名)><bundle文件名> <版本號(hào)> --deploymentName 更新環(huán)境 --description 更新描述 --mandatory 是否強(qiáng)制更新
例如：
code-push release CodePushDemo-android ./bundles 1.0.0  //省略默認(rèn)是發(fā)布Staging
code-push release CodePushDemo-android ./bundles 1.0.0 -d Production --des "熱更新" --mandatory true
查看發(fā)布信息
查看已a(bǔ)dd appName
code-push app list 

查看部署的歷史版本信息
code-push deployment ls CodePushDemo-android -k

其他需要注意的，這里的版本versionName需要是“1.0.0”這種格式的，可以app/build.gradle里的配置修改

defaultConfig {
        //其他代碼
        versionCode 1
        versionName VERSION_NAME
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

versionName放在了gradle.properties

VERSION_CODE = 1
VERSION_NAME = 1.0.0
最后編輯于 ：
?著作權(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)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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