React Native熱更新（CodePush使用）

標籤：image   one   htm   adc   web   導航   class   關聯   new   

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　React Native熱更新（CodePush使用）

　　在行動裝置 App開發過程中，應用的發布上線一直是個耗時且長時間沒有很好解決的問題。特別是對於蘋果開發人員，受蘋果的生態環境影響每次審核時間一到7天不等。筆者記得15年曾有新應用上線多次被拒，從提交審核到正式上線前前後後磨蹭了半個多月才真正發布成功。安卓的相對就不會產生那麼多不愉快，審核時間半天左右。今天筆者想向大家分享的是跨平台開發中的CodePush使用，CodePush的出現有效解決了React Native 應用在動態更新方面耗時過長問題。

    1.CodePush簡介

CodePush是微軟開發的雲端服務器。通過它開發人員可以直接在使用者的裝置上部署手機應用程式更新。CodePush 作為一個中央倉庫，開發人員可以推送更新 (JS, HTML, CSS and images)，應用可以從用戶端 SDK 裡面查詢更新。CodePush 可以讓應用有更多的可確定性，也可以讓你直接接觸使用者群。在修複一些小問題和添加新特性的時候，不需要經過二進位打包，可以直接推送代碼進行即時更新。

    2.CodePush優勢

CodePush可以即時推送代碼的更新、直接對使用者部署代碼更新、支援React Native和Cordova、支援JavaScript檔案與圖片資源的更新、管理Alpha，Beta和生產環境應用。

    3.CodePush安裝

        a.安裝CodePush CLI，通過NodeJS-based CLI管理CodePush帳號。

            1.開啟蘋果電腦終端，輸入sudonpm install -g code-push-cli；

            2.驗證是否安裝成功，輸入code-push -v查看版本。

  

         b.建立codePush帳號

            1.在終端輸入code-push register，進入網頁註冊頁面，註冊成功後得到.

  

得到的這個值就是你終端裡需要輸入的token;

             2.在終端輸入得到的token，成功後得到如下反饋；

  

             3.在終端輸入code-push app add （應用程式名稱）；

             code-push相關命令:

  

              code-push app下相關命令

  

完成上述操作後，你的應用已經註冊到codepush服務端。

            4.終端中輸入code-push deployment ls （應用程式名稱）-k，查看對應的Deployment Key；

  

             5.終端輸入code-push access-key ls；(建立時間和名字）

  

    4.整合CodePush SDK

        1.iOS整合，CodePush官方提供RNPM、CocoaPods與手動三種在iOS項目中整合CodePush的方式。

            a.React Native項目中安裝codePush依賴，終端輸入：npm i react-native-code-push --save

            b.react-native和react-native-code-push的構建關聯，終端輸入：react-native link react-native-code-push，可以選擇輸入對應的deployment key或者直接跳過，筆者選擇輸入對應發deployment key,RN項目中安卓跟iOS都需要.

            c.Xcode中的配置

            1.引入CodePush.xcodeproj，相同的方法只是你需要的CodePush.xcodeproj

  

            2.引入CodePush SDK、libz.tbd

  

            3.添加code-push標頭檔檢索

  

        4.配置deployment key

        在react-native link react-native-code-push環節我們跳過了deployment key在Xcode端的配置，在這裡我們需要手動設定。

            a.在Xcode的項目導航視圖中的PROJECT下選擇你的項目，選擇Info頁簽，在Configurations節點下單擊+按鈕，選擇Duplicate“Release Configaration，輸入Staging。

  

            b.在build Settings頁簽中單擊+按鈕然後選擇Add User-Defined Setting，然後輸入CODEPUSH_KEY，然後填入deployment key。

 

  

新增的CODEPUSH_KEY節點下Debug不用填，Release填入的是CodePush上Production的key值，Staging填入的是CodePush上Staging的key值：

  

            c.開啟Info.plist檔案，在CodePushDeploymentKey中輸入$(CODEPUSH_KEY)，並修改Bundle versions為三位，

  

至此，ios原生層的CodePush整合已經完成，接下來在React-native使用接入CodePush。

         2.安卓整合

              a.在項目中安裝react-native-code-push外掛程式,終端輸入：npm install --save react-native-code-push；（如果你在項目中iOS已經整合可以省略）

              b.在Android project中安裝外掛程式,CodePush提供了兩種方式：RNPM和Manual。筆者使用RNPM，在終端輸入sudo npm i -g rnpm；

  

              c.自動在android檔案中配置codePush，終端輸入：rnpm link react-native-code-push；

  

              d.查看安卓中配置；

                1.在android/app/build.gradle檔案是否有apply from: "../../node_modules/react-native-code-push/android/codepush.gradle" 

                2.在/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‘)

              e.配置deployment key

                1.擷取項目deployment key,終端輸入：code-push deployment ls （應用程式名稱）-k

  

                2.在MainApplication.java檔案中修改deployment key

  

            f.修改versionName（codepush要三位元字的形式），在android/app/build.gradle中有個android.defaultConfig.versionName屬性

  

至此，android原生層的CodePush整合已經完成，接下來在React-native使用接入CodePush。

      4.RN中添加對應codePush

在js中載入CodePush模組：import codePush from ‘react-native-code-push’,在componentDidMount中調用sync方法，後台請求更新codePush.sync().

  

      5.使用CodePush進行熱更新

CodePush支援兩種發布更新的方式，一是code-push release-react簡化方式，另一種是code-push release的複雜方式。

        a.通過code-push release-react發布更新,此方法將打包與發布合二為一，在終端輸入：code-push release-react

eg.

    

        其他形式語句：code-push release-react hello-world ios  --t 1.0.0 --dev false --d Production --des“更新內容：…”--m true.(註：參數--t為二進位.ipa或者.apk安裝包版本號碼；--dev為是否啟用開發人員模式(預設為false)；--d是要發布更新的環境分Production與Staging(預設為Staging)；--des為更新說明；--m是強制更新。)

綜上最簡單的codePush算是完成，後續繼續完善。（親測可以用）

React Native熱更新（CodePush使用）