1. 程式人生 > >原生整合react-native(二)-熱更新

原生整合react-native(二)-熱更新

使用code-push 和code-push-server 實現熱更新

1.安裝code-push-server:

npm install code-push-server -g

2.初始化mySQL資料庫:

code-push-server-db init --dbhost localhost --dbuser root --dbpassword

可以通過code-push-server-db --help檢視相關命令

注意:確保mySql服務已經啟動!

3.啟動code-push-server服務:

啟服務之前,修改config.js(路徑:/usr/local/lib/node_modules/code-push-server/config/config.js),以便本地測試. 僅修改db,local的內容:

4.終端輸入:code-push-server 啟動服務, 瀏覽器開啟http://localhost:3000 賬號:admin 密碼:123456

登入來獲取token

5.安裝code-push:(也可以獲取token)

npm install code-push-cli -g

code-push login http://127.0.0.1:3000

(如果服務不是搭建本機,填寫伺服器地址http://IP:3000,預設埠3000)

把獲取的token 複製貼上上 ,如果輸出 :Successfully logged-in 就行了 ,接下來就是新增app了

6.先了解下code-push 相關命令:

code-push app add 相關命令:

7.在Code-Push伺服器上註冊自己的app:(我的應用名稱:android)

code-push app add android android react-native

獲取部署到伺服器的key(預設使用Staging)

8.在原生android專案裡整合code-push:

8.1: npm install react-native-code-push

可以看到node_modules/react-native-code-push下檔案目錄

8.2:將codepush包和codepush.gradle複製到自己的專案路徑下然後修改路徑包名等錯誤資訊

同時在libs下新增:nimbus-jose-jwt-5.1.jar 包

8.3:在app/build.gradle(或者Library/build.gradle)中新增

apply from: "../node_modules/react-native/react.gradle"

apply from: "./codepush.gradle"

8.4:為了在原生專案裡以單獨的庫使用rn,可以直接在容器裡新增codePush模組,

新增deploymentKey和本地伺服器地址.

CodePush.getJSBundleFile() , bundle檔案的從預設路徑()獲取.

9. 在 android/app/build.gradle中有個 android.defaultConfig.versionName屬性,我們需要把 應用版本改成 1.0.0(預設是1.0,但是codepush需要三位數).

android{

            defaultConfig{

                      versionName "1.0.0"

                               }

}

10.在第一個js頁面中觸發更新

9.通過react-native bundle命令打離線包

9.1 老版本bundle路徑(lib-rn/src/main/assets)

react-native bundle --platform android --dev false --entry-file index.js --bundle-output lib-rn/src/main/assets/index.android.bundle --assets-dest lib-rn/src/main/res/

註釋:

lib-rn/src/main/assets/index.android.bundle (老版本bundle包的資源地址)

--entry-file index.js :入口js可以寫成自己的

--bundle-output :bundle包的輸出路徑 src/main/assets

9.2新版本的bundle包直接放到工程下的bundles檔案下(如果沒有,mkdir bundles)

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

10 釋出更新:

10.1可以先了解下code-push release相關命令:

這是我的輸入:

code-push release android ./bundles 1.0.2

釋出更新成功.

注意:

  • CodePush預設是更新 staging 環境的,如果是staging.
  • 如果有 mandatory 則會讓客戶端強制更新
  • 對應的應用版本(targetBinaryVersion)是指當前app的版本,而不是你填寫的更新版本。譬如客戶端版本是 1.0.0,如果我們需要更新客戶端,那麼targetBinaryVersion填的就是 1.0.0。

11.通過code-push deployment history android Staging 命令檢視歷史版本

:code-push deployment ls android -k (產看已經部署的app的key)

JS API

CHECKFORUPDATE

詢問伺服器是否有新版本。譬如:

CodePush.checkForUpdate() .then( (update) =>{ if( !update ){ console.log("app是最新版了"); }else { console.log("有更新哦"); } });

GETCURRENTPACKAGE

獲取當前已安裝更新的元資料(描述、安裝時間、大小等)。譬如:

CodePush.getCurrenPackage() .then( (info) =>{ console.log(info); })

NOTIFYAPPLICATIONREADY

通知CodePush程序,一個更新安裝好了,當檢測並安裝更新,這個方法必須被呼叫。

否則在app重啟時,Codepush會認為update失敗,並回滾版本。

當使用 sync方法時,不需要呼叫此方法,因為它會預設呼叫

RESTARTAPP

立即重啟App

SYNC

允許檢測更新,下載並安裝。除非我們需要自定義UI表現,不然直接用這個方法就可以了。

注意

  • CodePush只能更新 js或圖片,原生程式碼的改變(二進位制打包)是不能通過它更新的。

資源地址: