React Native熱更新(CodePush使用)

來源:互聯網
上載者:User

標籤: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使用)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.