React Native熱更新（CodePush使用）

　　在移動應用開發過程中，應用的發布上線一直是個耗時且長時間沒有很好解決的問題。特別是對於蘋果開發者，受蘋果的生態環境影響每次審核時間一到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使用）