2. 程式人生 > >ReactNative基於CodePush實現熱更新整合詳解

ReactNative基於CodePush實現熱更新整合詳解

阿新 • • 發佈：2019-01-30

安裝工具介紹

根據最新的官方文件和實際整合經驗整理 http://www.jianshu.com/p/54cd13ed9e95

工具名稱 描述 備註
Chocolatey Windows上的包管理器（需翻牆） 通常不安裝，使用 npm 即可
Python 2 注意目前不支援Python 3版本 不需安裝
NodeJs Javascript執行環境(runtime) 自帶 npm
Yarn Facebook提供的替代npm的工具，可以加速node模組的下載 通常不安裝使用，國內可通過設定設定npm映象達到同樣效果
NPM 包管理工具，主要用於解決NodeJS程式碼部署問題 NodeJS中已安裝
react-native-cli React Native的命令列工具用於執行建立、初始化、更新專案、執行打包服務（packager）等任務 直接使用npm即可安裝

Android 開發環境要求

  • Android Studio2.0或更高版本
  • [JDK] 1.8或更高版本
  • 必須安裝Android Support Repository

環境變數相關

ANDROID_HOME制定到本地 \sdk 對應目錄下
至少需配置：%Android_Home%\tools;%Android_Home%\platform-tools;


當前線上專案相關版本資訊


環境搭建如上圖，如有問題及時聯絡
下面是CodePush的Android客戶端整合部分（熱更新暫時使用微軟的遠端服務）

開啟workspace目錄初始化專案

$ react-native init RnApp


在對應的工作空間生成React Native工程目錄


根目錄下的 package.json 包管理配置檔案

注意：使用命令列初始化的RN工程預設使用官網最新的組建版本，可能存在和某些三方組建的相容性問題（如微軟的CodePush）；
如果希望指定RN組建版本初始化，可使用：$ react-native init RnApp --version 0.39.2

{
    "name": "RnApp",//工程名稱
    "version": "0.0.1",//工程版本號
    "private"
 
: true,//讀寫許可權
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",//React Native啟動入口
        "test": "jest"
    },
    "dependencies": {
        "react": "15.4.2",//依賴的react版本
        "react-native": "0.42.3"//依賴的react-native版本
    },
    "devDependencies": {//開發除錯依賴庫
        "babel-jest": "19.0.0",
        "babel-preset-react-native": "1.9.1",
        "jest": "19.0.2",
        "react-test-renderer": "15.4.2"
    },
    "jest": {
        "preset": "react-native"
    }
}

在初始化的RN工程的根目錄下根據提示啟動並執行Android專案


會自動啟動一個本地開發伺服器：如圖代表開發伺服器執行正常


使用 React Native 命令列工具啟動專案異常處理

隨著 React Native 版本不斷升級，Android Studio 的版本變更，包括當前系統環境的差異性，導致在執行RN工程時會存在各種奇奇怪怪的問題；
此時需要將RN工程匯入到當前系統環境的 Android studio 中直接執行，可以避免由於各個工具直接版本的差異導致執行失敗的問題。


使用 Android Studio 開啟初始化的 RN 工程


注意需要在 AS 中選擇RN根目錄結構下的 Android 開啟


如圖表示 React Native 工程在 IDE 中編譯成功


RN初始化工程 App 下的 build.gradle 檔案
可以看到RN的最小SDK構建版本是 16 對應的Android系統版本是 V_4.1.2

apply plugin: "com.android.application"

import com.android.build.OutputFile

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

def enableSeparateBuildPerCPUArchitecture = false

def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "com.rnapp"
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}

dependencies {
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

如果將最小構建版本修改至低於 sdk16,則會導致工程構建失敗，如圖所示：
根據錯誤資訊：如果需要使用 React Native 元件，則需要最低的sdk構建版本不低於16，
如果需要向下相容，則需要使用工具重寫“com.facebook.react”原始碼。


在RN專案根目錄下開啟除錯伺服器

$ npm start


使用AS直接執行RnApp，安裝成功後部分手機需要使用者授權懸浮窗許可權


授權成功後重新開啟專案


如果出現不能獲取除錯橋的錯誤提示，請手動設定除錯埠號為：8081 後點擊 RELOAD（R,R）

設定除錯伺服器埠方式一：adb reverse tcp:8081 tcp:8081


等待 JsBundle 檔案解析完成即可渲染出 RN 頁面


設定除錯伺服器埠方式二：在開發模式下搖晃手機調用出開服者選項設定項


設定除錯伺服器主機名和埠號：


按照如下格式輸入主機名和埠號：

注意：所輸入的主機名一定是當前執行開發伺服器計算機的IP地址，並且除錯機和開發伺服器需要要在同一個區域網環境下；
方式二優點：如果設定成功，在除錯過程中就不需使用USB資料線和計算機連線了。


至此，一個RN工程的 hello world 工程就完成了...

備註：初始化後的RN工程啟動檔案和啟動頁原始碼

程式啟動入口： Application.java 檔案：

package com.rnapp;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

RN頁面入口： ReactActivity.java 檔案子類：

package com.rnapp;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "RnApp";
    }
}

下面是 CodePush 整合詳解

CodePush 簡介

CodePush 是微軟提供的一套用於熱更新 React Native 和 Cordova 應用的服務。
CodePush 是提供給 React Native 和 Cordova 開發者直接部署移動應用更新給使用者裝置的雲服務。CodePush 作為一箇中央倉庫，開發者可以推送更新 (JS, HTML, CSS and images)，應用可以從客戶端 SDK 裡面查詢更新。CodePush 可以讓應用有更多的可確定性，也可以讓你直接接觸使用者群。在修復一些小問題和新增新特性的時候，不需要經過二進位制打包，可以直接推送程式碼進行實時更新。

安裝 CodePush CLI

引數 -g 表示安裝位置為全域性，請不要安裝在當前專案目錄下


建立CodePush賬號

涉及到公司開發者賬號，此處省略截圖

  • 在終端輸入$ code-push register，會開啟如下注冊頁面讓你選擇授權賬號。
  • 授權通過之後，CodePush會告訴你 access key ，複製此key到終端即可完成註冊。
  • 然後終端輸入 $ code-push login 進行登陸，登陸成功後，你的session檔案將會寫在 /Users/你的使用者名稱/.code-push.config。

在CodePush伺服器註冊app

終端輸入：$ code-push app add RnApp完成註冊並獲取部署鍵值

Production 表示生產環境 唯一識別的部署鍵值：K1pkiaHC2-w-0M3iRaABluolNtRL4JHzHx0MG
Staging 表示開發環境 唯一識別的部署鍵值：_lvQXBDZ0m_2rFdBlnZ5pkd0fa-n4JHzHx0MG
建議：Android和IOS使用單獨的專案部署獲取兩套 Deployment Key


安裝 react-native-code-push外掛

切換到RN工程根目錄 終端輸入命令：$ npm install react-native-code-push --save

注意：--save 引數表示是否將當前依賴寫入 package.json 檔案


將會在 package.json 檔案中寫入依賴配置


注意：切換到RN工程根目錄 終端輸入命令：$ rnpm link react-native-code-push 將會自動幫我們進行code-push外掛在原生中的gradle配置，
但是不建議使用，我們可以手動的進行 CodePush 的 gradle 配置以達到同樣的效果。

這是引入RN官網的文件：
安裝完node後建議設定npm映象以加速後面的過程（或使用科學上網工具）。注意：不要使用cnpm！cnpm安裝的模組路徑比較奇怪，packager不能正常識別！
即：不建議使用類似 cnpm 活著 rnpm 進行相關模組的操作。

在原生專案中手動整合 CodePush

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')

3. 在 android/app/build.gradle檔案裡面添如下程式碼將CodePush新增專案編譯:

 compile project(':react-native-code-push')

4. 執行 $ code-push deployment ls RnApp -k 命令獲取 部署祕鑰.


5. 在 MainApplication.java 中新增如下程式碼：

 //注意需要將部署鍵值替換成自己的專案的唯一鍵值
 new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)

6. 在index.Android.js 中呼叫更新服務


相應程式碼可直接複製使用

componentDidMount(){
    codePushUpdate();
  }

  //遠端服務檢測更新
  codePushUpdate(){
    codePush.sync({
      installMode: codePush.InstallMode.IMMEDIATE,
      updateDialog: true
     },
     (status) => {
      switch (status) {
        case codePush.SyncStatus.CHECKING_FOR_UPDATE:
            console.log('codePush.SyncStatus.CHECKING_FOR_UPDATE');
          break;
        case codePush.SyncStatus.AWAITING_USER_ACTION:
          console.log('codePush.SyncStatus.AWAITING_USER_ACTION');
          break;
        case codePush.SyncStatus.DOWNLOADING_PACKAGE:
          console.log('codePush.SyncStatus.DOWNLOADING_PACKAGE');
          break; 
        case codePush.SyncStatus.INSTALLING_UPDATE:
          console.log('codePush.SyncStatus.INSTALLING_UPDATE');
          break;
        case codePush.SyncStatus.UP_TO_DATE:
          console.log('codePush.SyncStatus.UP_TO_DATE');
          break;
        case codePush.SyncStatus.UPDATE_IGNORED:
          console.log('codePush.SyncStatus.UPDATE_IGNORED');
          break;
        case codePush.SyncStatus.UPDATE_INSTALLED:
          console.log('codePush.SyncStatus.UPDATE_INSTALLED');
          break;
        case codePush.SyncStatus.SYNC_IN_PROGRESS:
          console.log('codePush.SyncStatus.SYNC_IN_PROGRESS');
          break;
        case codePush.SyncStatus.UNKNOWN_ERROR:
          console.log('codePush.SyncStatus.UNKNOWN_ERROR');
          break;
      }
     },
     ({ receivedBytes, totalBytes, }) => {
      console.log('receivedBytes / totalBytes: ------------    ' + receivedBytes+'/'+totalBytes);
      }
    );
  }

8. 在RN更目錄下新建兩個資料夾

注意：將專案的VersionName修改為三位數！


9. CodePush命令列打JsBundle包（存於本地）

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

10. 執行如下命令部署到微軟伺服器

$ code-push release PatientMRB ./bundles 1.0.0 --deploymentName Staging --description “RN熱更新測試“ --mandatory true

11. 執行專案日誌輸出如下


至此：一個簡單的RN整合CodePush實現熱更新已經完成...
後續期待和大家一起爬坑...

附錄：CodePush 常用命令總結

  • code-push login
  • code-push logout
  • code-push access-key ls 列出登陸的token
  • code—push access-key rm <accessKey> 刪除某個access-key
  • code-push app ls
  • code-push app add <appName>
  • code-push app rm <appName>
  • code-push app rename <appName>
  • code-push app transfer 轉移app所有權到另一個賬號
  • code-push deployment add <appName> 部署
  • code-push deployment rename <appName> 重新命名
  • code-push deployment ls <appName>
  • code-push deployment ls <appName> -k
  • code-push deployment history <appName> <deploymentName>(Production||Staging)
  • code-push rollback <appName> <deploymentName> “appName”中的測試||生產環境的部署執行回滾
  • code-push rollback <appName> <deploymentName> —targetRelease v6 回滾到指定的部署標籤

簡書處女座，如有書寫不妥的地方請留言更正，同時歡迎拍磚吐槽...
最後有一個願望：希望藉此愛上技術寫作...

相關推薦

ReactNative基於CodePush實現熱更新整合詳解

安裝工具介紹 根據最新的官方文件和實際整合經驗整理 http://www.jianshu.com/p/54cd13ed9e95 工具名稱 描述 備註 Chocolatey Windows上的包管理器（需翻牆） 通常不安裝，使用 npm 即可 Pyth

React Native用CodePush實現熱更新(一)

本文介紹用微軟預設的CodePush Cloud和將code-push-server放在本地伺服器上，以local作為storageType實現熱更新。1. 安裝 CodePush CLI:npm in

Android 手動實現熱更新

前言 在上篇Android ClassLoader淺析中我們分析了安卓ClassLoader和熱更新的原理，這篇我們在上篇熱更新分析的基礎上寫個簡單的demo實踐一下。 概述 我們先回顧下熱更新的原理 PathClassLoader是安卓中預設的類載入器，載入類是通過fi

騰訊Bugly熱更新整合以及問題

ClassLoader 我們知道Java在執行時載入對應的類是通過ClassLoader來實現的，ClassLoader本身是一個抽象來，Android中使用PathClassLoader類作為Android的預設的類載入器，  PathClassLoader其實實現的就是簡單的從檔案

Spring Boot 整合 Mybatis 實現 Druid 多資料來源詳解

“清醒時做事，糊塗時跑步，大怒時睡覺，獨處時思考” 本文提綱 一、多資料來源的應用場景 二、執行 springboot-mybatis-mutil-datasource 工程案例 三、springboot-mybatis-mutil-datasource 工程程式碼配置詳解 一、多資料來

基於MeanShift的Camshift演算法原理詳解(opencv實現，有原始碼)

基於MeanShift的Camshift演算法原理詳解(整理) 第一篇MeanShift原理和實現 1  MeanShift原理 如下圖所示：矩形視窗中的紅色點代表特徵資料點，矩形中的圓圈代表選取視窗。meanshift演算法的目的是找到含有最多特徵的視窗區域，即使圓心與概

騰訊Bugly熱更新整合總結

熱更新：多麼高大上的名字，Android 開發者應該都知道這麼個東西，原理呢！請自行百度，這裡只是整合總結，謝謝！！！ 對於第三方SDK的使用，大家都知道用“步步高點讀機，哪裡不會點哪裡”—— 所以第一步肯定是看官方整合文件：地址：https://bugly.

Android 網路請求登入後更新頁面實現 Handler+HTTP請求詳解

為了實現登入功能，我們需要一下幾步：1、獲取UI資料，並向伺服器傳送請求2、等待返回資料，解析3、將返回資料更新到UI執行緒中為了完成以上幾步，我根據每步的功能提出自己的解決方法，順便整理出對應的知識供大家參考。Handler眾所周知，Android程式執行會開啟一個UI執行

Cordova - 實現熱更新 !

原文: Cordova - 實現熱更新 ! Cordova版本：8.0.0 更新APP平臺：Android 作業系統：Windows Cordova的熱更新，作用是把www內的變動部分更新到APP中，實現主程式不動，完成更新！！這個熱更新功能，對於IOS APP更有意義，因為，可以避免繁瑣的蘋果稽核！

unity dll實現熱更新

大家都知道一談起熱更新的話首選是Ulua這個外掛, 其實Unity可以使用dll熱更新的,如果你實在不想用Lua來編寫邏輯,0.0請下看Dll+AssetBundle如何實現熱更新的.讓你看完這個文章之後只是認識DLL熱更新的方式和概念,掌握熱更新的實戰框架還需要你自己=

手把手教你實現熱更新功能，帶你瞭解 Arthas 熱更新背後的原理

文章來源：https://studyidea.cn/java-hotswap 一、前言 一天下午正在摸魚的時候，測試小姐姐走了過來求助，說是需要改動測試環境 mock 應用。但是這個應用一時半會又找不到原始碼存在何處。但是測試小姐姐的活還是一定要幫，突然想起了 Arthas 可以熱更新應用程式碼，按照

基於Spring Boot的可直接執行的分散式ID生成器的實現以及SnowFlake演算法詳解

背景 最近對snowflake比較感興趣，就看了一些分散式唯一ID生成器（發號器）的開源專案的原始碼，例如百度的uid-generator，美團的leaf。大致看了一遍後感覺uid-generator程式碼寫的要更好一些，十分的精煉，短小精悍。 正好手頭有個任務要搞個發號器，百度的這個原始碼是不能直接執行

SylixOS 基於ZYNQ的時鐘頻率修改詳解

時鐘頻率 zynq 倍頻 概述 本文檔以ZYNQ7000平臺為例，詳細介紹如何去修改ZYNQ的時鐘頻率。 時鐘頻率修改流程 ZYNQ7000的時鐘頻率修改流程，如圖 2.1所示。具體步驟如下： 步驟一：解除ZYNQ7000的寄存器寫鎖定； 步驟二：向

14.linux-platform機制實現驅動層分離(詳解)

擴展性 blank 事件處理 相關 技術分享 消息 驅動 array iou 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 本節目標: 學習platform機制,如何實現驅動層分離 1.先來看看我們之前分析輸入子系統的分層概念

zabbix實現原理及架構詳解

收集 信息 核心 狀態 start 原理 整體架構 比較 zabbix 想要用好zabbix進行監控，那麽我們首要需要了解下zabbix這個軟件的實現原理及它的架構。建議多閱讀官方文檔。 一、總體上zabbix的整體架構如下圖所示： 重要組件說明： 1）zabbix se

Linux如何實現開機啟動程序詳解(轉)

window 自己的 進行 執行時間 dns服務 全部 星期 ext 例如 Linux開機啟動程序詳解我們假設大家已經熟悉其它操作系統的引導過程，了解硬件的自檢引導步驟，就只從Linux操作系統的引導加載程序(對個人電腦而言通常是LILO)開始，介紹Linux開機引導的步驟

排序算法（四）堆排序的Python實現及算法詳解

python 堆排序 一、前言如果需要Java版本的堆排序或者堆排序的基礎知識——樹的概念，請參看本人博文《排序算法（二）堆排序》關於選擇排序的問題選擇排序最大的問題，就是不能知道待排序數據是否已經有序，比較了所有數據也沒有在比較中確定數據的順序。堆排序對簡單選擇排序進行了改進。二、準備知識堆：它是一

DRBD實現文件同步詳解

drbd一、簡單介紹????Distributed Replicated Block Device(DRBD)是一個用軟件實現的、無共享的、服務器之間鏡像塊設備內容的存儲復制解決方案。其核心功能通過Linux的內核實現，比文件系統更加靠近操作系統內核及IO棧。DRBD是由內核模塊和相關腳本而構成，用以構建高可

27.QT-QProgressBar動態實現多彩進度條(詳解)

ID public lin 就是 def nim qslider etl #define 如下圖所示: 效果如下: (gif錄制的動畫效果不好,所以顏色有間隙) 介紹 通過qss實現,只需要一個多彩背景圖,通過QImage獲取顏色,然後來設置進度條,便

基於JDK的動態代理技術詳解

end course log 些許 private provide url 模仿 ade 雖然對於Spring的基本思想Aop是基於動態代理和CGlib這一點很早就有所認識,但是什麽是動態代理卻不甚清楚。為了對Spring加深理解,我覺得好好學習一下java