2. 程式人生 > >react-native熱更新

react-native熱更新

阿新 • • 發佈：2018-11-14

一、全域性安裝 code-push-cli

$ npm i -g code-push-cli

二、註冊 App Center

執行以下命令

$ code-push register

或直接開啟 https://appcenter.ms/ 註冊

三、登入App Center

回車後，會開啟 App Center 的網址。根據提示覆制金鑰到命令列中回車即可：

四、 在App Center註冊App

為了讓 App Center 有我們的App，我們需要 App Center 註冊App，輸入下面命令即可完成註冊，這裡需要注意如果我們的應用分為iOS和Android兩個平臺，這時我們需要分別註冊兩套key。

應用新增成功後就會返回對應的 production 和 Staging 兩個key，production 代表生產版的熱更新部署，Staging 代表開發版的熱更新部署，在 ios 中將 staging 的部署 key 複製在 info.plist的 CodePushDeploymentKey 值中，在 android 中複製在 Application 的 getPackages 的 CodePush 中。

4.1 新增iOS平臺應用

$ code-push app add iOSRNHybrid ios react-native

執行結果：

4.2 新增 android 命令

$ code-push app add iOSRNHybridForAndroid Android react-native

執行結果：

五、檢視新增的App

$ code-push app list

六、RN 整合 code-push

6.1 安裝

執行 link 命令會讓你輸入 Android 和 iOS 兩個平臺的 key，可以忽略，也可以直接填寫。
在 ios 中將 staging

 的部署 key 複製在 info.plist的 CodePushDeploymentKey 值中，
在 android 中複製在 Application 的 getPackages 的 CodePush 中。

$ yarn add react-native-code-push
$ react-native link react-native-code-push

6.2 配置

我們在RN專案的根元件中新增熱更新邏輯程式碼如下：

App.jsx

import React, { Component } from 'react'
import { StyleSheet, Image, View, Text } from 'react-native'
import CodePush from 'react-native-code-push'
import checkHotUpdate from './src/utils/checkHotUpdate'

const codePushOptions = {
  // 設定檢查更新的頻率
  // ON_APP_RESUME APP恢復到前臺的時候
  // ON_APP_START APP開啟的時候
  // MANUAL 手動檢查
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
}

class App extends Component {
  componentDidMount() {
    CodePush.disallowRestart()// 禁止重啟
    checkHotUpdate(CodePush) // 開始檢查更新
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
          resizeMode="cover"
          source={{ uri: 'https://placeimg.com/400/400/any' }}
          style={[styles.welcome]}
        />
        <Text onPress={() => { alert('我是文字') }}>React Native Text</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F2F2F2',
  },
  welcome: {
    width: 400,
    height: 400,
  },
})

export default CodePush(codePushOptions)(App)

checkHotUpdate.js

export default (CodePush) => {
  CodePush.sync(
    {
      installMode: CodePush.InstallMode.IMMEDIATE,
      // updateDialog: {},
    },
    (status) => {
      switch (status) {
        case CodePush.SyncStatus.CHECKING_FOR_UPDATE: // 檢查更新
          break
        case CodePush.SyncStatus.DOWNLOADING_PACKAGE: // 正在下載
          break
        case CodePush.SyncStatus.AWAITING_USER_ACTION: // 等待使用者操作
          break
        case CodePush.SyncStatus.INSTALLING_UPDATE: // 下載更新
          break
        case CodePush.SyncStatus.UP_TO_DATE: // 已更新
          break
        case CodePush.SyncStatus.UPDATE_IGNORED: // 忽略更新
          break
        case CodePush.SyncStatus.UPDATE_INSTALLED:
          break
        case CodePush.SyncStatus.UNKNOWN_ERROR: // 未知錯誤
          break
      }
    },
    ({ receivedBytes, totalBytes }) => {
      // const progress = parseFloat(receivedBytes / totalBytes).toFixed(2)
      if (receivedBytes >= totalBytes) {
        CodePush.allowRestart() // 強制更新
      }
    },
  )
}

七、 如何釋出CodePush更新包

7.1、手動生成bundle包【可略過】

在將RN的 bundle 放到 AppCenter 伺服器之前，我們需要先生成 bundle，再將 bundle上傳到 AppCenter。用到的資料夾必須已經存在。

生成 bundle 命名：react-native bundle --platform 平臺 --entry-file 啟動檔案 --bundle-output 打包js輸出檔案 --assets-dest 資源輸出目錄 --dev 是否除錯

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

7.2、生成並上傳bundle

生成bundle檔案並上傳到CodePush，我們直接執行下面的命令即可

$ code-push release-react <AppName> <Platform> --t <本更新包面向的舊版本號> --des <本次更新說明>

CodePush 預設是更新 Staging 環境的，如果釋出生產環境的更新包，需要指定 -d 引數：-d Production，如果釋出的是強制更新包，需要加上 -m true 強制更新

$ code-push release-react iOSRNHybrid ios --t 1.0.0 --dev false --des '這是第一個更新包' -d Production  -m true

7.3、檢視釋出的歷史記錄

$ code-push deployment history <projectName> <Staging/Production>

八、部署管理

8.1、新增部署環境（可選）

當一個用 AppCenter 服務註冊的應用，它預設包含兩個部署環境：Staging 和 Production 。這讓你可以理解發布更新到一個內部的環境，你可以在推送到終端使用者之前徹底的測試每個更新。這個工作流是至關重要的，以確保你的版本準備好給大眾，而且這是一個在Web上實踐很久的慣例。

如果你的App有 Staging 和 Production 環境其實已經滿足了你的需求，然後你不需要做任何事情。不過，如果你需要 alpha，dev等部署環境，那你可以簡單的使用如下命令建立：

$ code-push deployment add <appName> <deploymentName>

8.2、部署環境key配置

安卓

  1. 開啟android/app/build.gradle,找到 android { buildTypes {} } 部分併為你的 debug 和 release 構建型別都定義 buildConfigField 配置項。構建型別 debug 對應 AppCenter 釋出型別 Staging，同理 release 對應 Production。如果你喜歡，你可以定義把你的key定義在 gradle.properties，然後引用他們。怎麼配置全憑個人喜好。
android {
    ...
    buildTypes {
        debug {
            ...
            // 注意： 由於會被 RN packager 覆蓋，所以CodePush 更新不應該在 Debug 模式下被測試。然而由於 CodePush 在所有模式下都會檢查更新，所有我們必須提供一個key（如果你在前端判斷了模式，那就不用）
            buildConfigField "String", "CODEPUSH_KEY", '""'
            ...
        }

        releaseStaging {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_STAGING_KEY>"'
            ...
        }

        release {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
            ...
        }
    }
    ...
}
  1. 提醒一句，你可以在命令列通過 code-push deployment ls <APP_NAME> -k 獲取他們的 keys。

  2. releaseStaging 的命名是由於這一行

  3. 通過剛剛定義的構建配置將部署金鑰傳遞給CodePush建構函式，而不是字串文字。

開啟 src/main/.../MainApplication.java 檔案並做如下配置：

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        ...
        new CodePush(BuildConfig.CODEPUSH_KEY, MainApplication.this, BuildConfig.DEBUG), // Add/change this line.
        ...
    );
}

九、附錄

9.1、參考

9.2、命令

手動生成bundle

$ react-native bundle --platform 平臺 --entry-file 啟動檔案 --bundle-output 打包js輸出檔案 --assets-dest 資源輸出目錄 --dev 是否除錯

賬號相關

  • code-push register: 註冊
  • code-push login: 登陸
  • code-push login --accessKey <accessKey>: 執行“無頭”身份驗證，而不是啟動一個瀏覽器
  • code-push logout: 登出
  • code-push whoami: 顯示與你當前認證會話相關的e-mail帳號

token相關

  • code-push access-key ls: 列出登陸的token
  • code-push access-key rm <accessKye>: 刪除某個 access-key
  • code-push access-key add "VSTS Integration": 建立一個持久的Access Key(連同一個描述)

app相關

  • code-push app add iOSRNHybrid ios react-native: 新增ios平臺應用
  • code-push app add iOSRNHybridForAndroid Android react-native: 新增android平臺應用
  • code-push app ls: 檢視新增的app
  • code-push app rm <appName>: 在賬號裡移除一個app
  • code-push app rename <appName> <newAppName>: 重新命名一個存在的app
  • code-push app transfer: 把app的所有權轉移到另外一個賬號

應用合作

  • $ code-push collaborator add <appName> <collaboratorEmail>: 和其它開發者在一起合作同一個CodePush應用
  • code-push collaborator rm <appName> <collaboratorEmail>: 解除合作者關係
  • code-push collaborator ls <appName>: 列出所有合作者

釋出相關

  • code-push release-react <AppName> <Platform> --t <本更新包面向的舊版本號> --des <本次更新說明> -d <Staging/Production> -m <是否強制更新>: 釋出新的熱更新版本

部署相關

  • code-push deployment add <appName> <deploymentName>: 新增部署環境
  • code-push deployment rm <appName> <deploymentName>: 刪除部署環境
  • code-push deployment rename <appName> <deploymentName> <newDeploymentName>: 重新命名部署環境
  • code-push deployment ls <appName> [--displayKeys|-k]: 檢視部署環境列表
  • code-push deployment history <projectName> <Staging/Production>: 檢視釋出歷史
  • code-push deployment clear <appName> <deploymentName>: 清除釋出歷史

 

私塾國際學府·技術團隊 創建於 2018/11/13 下午6:31:01

 

 

本部落格所有文章均採用CC BY-NC-SA 3.0許可協議。

 

原文 http://techblog.sishuxuefu.com/atricle.html?5beaa7e59f5454007039e01c

相關推薦

React Native熱更新（CodePush使用）

dfa epush nodejs 管理 push alpha 輸入 進制 通過 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　React Native熱更新（CodePush使用） 　　在移動應用開發過程中，應用的發布上線一直是個耗時且長時間沒有

react-native熱更新

一、全域性安裝 code-push-cli $ npm i -g code-push-cli 二、註冊 App Center 執行以下命令 $ code-push register 或直接開啟 https://appcenter.ms/ 註冊 三、登入

react native 熱更新與程式簡單除錯

1.如何開啟Developer Menu          模擬器：ctrl+m          真機：搖一搖手機即可 2.除錯及熱更新準備工作：當真機使用資料線或者模擬器時可以忽略，建議

React-Native 熱更新以及增量更新

不是增量更新，Rn的熱更新，流程是下載伺服器端上的一個解壓包到本地 解壓到應用的檔案目錄 這是一個打包後的apk檔案，在Rn中我們的js程式碼都是打包後存放在assets目錄中，其中index.android.bundle,可以理解我們js寫後打包

React-Native 熱更新嘗試（Android）

前言：由於蘋果釋出的ios的一些rn的app存在安全問題，主要就是由於一些第三方的熱更新庫導致的，然而訊息一出就鬧得沸沸揚揚的，導致有些人直接認為“學了大半年的rn白學啦～～！！真是哭笑不得。廢話不多說了，馬上進入我們今天的主題吧。“ 因為一直在做androi

React Native熱更新

官方相關資源： iOS的部署方式： Android的部署方式： code push的使用步驟： 1、安裝code push 的 react native的sdk npm install --save [email protected] react-native link react-nati

搭建code-push-server伺服器用於react-native熱更新

之前我做熱更新使用了微軟的code-server，如果只是測試demo還好，要是真實專案中用別人的伺服器，程式碼都要傳到別人的伺服器，那豈不是坑爹？所以今天自己搭建了一個code-push-server，遇到了挺多坑的，網上的唯一的幾篇文章也沒什麼說明，只好自己摸索，經過大

react-native熱更新之CodePush詳細介紹及使用方法

react-native熱更新之CodePush詳細介紹及使用方法 2018年03月04日 17:03:21 clf_programing 閱讀數：7979 標籤： react native熱更新code pus

[深入剖析React Native]熱更新之react-native-pushy使用指南(IOS)

本文使用RN版本：0.33.0 準備工作 首先你應該有一個基於React Native開發的應用，我們把具有package.json的目錄叫做你的”應用根目錄”。 如果你還沒有初始化應用，請參閱開始使用React Native。 所以我們也假

[深入剖析React Native]熱更新之react-native-pushy使用指南(Android)

本文使用RN版本：0.33.0 準備工作 首先你應該有一個基於React Native開發的應用，我們把具有package.json的目錄叫做你的”應用根目錄”。 如果你還沒有初始化應用，請參閱開始使用React Native。 所以我們也假

3分鐘完成React-Native熱更新

此文使用當下最新版本的RN與Code-Push進行演示，其中的引數不會過多進行詳細解釋，更多引數解釋可參考其它文章，這裡只保證APP能正常進行熱更新操作，方便快速入門，開始來快活吧。 操作指南

微軟的React Native熱更新

官方相關資源： iOS的部署方式： Android的部署方式： 我的步驟： 1、安裝code push 的 react native的sdk npm install --save react-native-code-push@latest react-nat

React native 熱更 快速實現方案

  採用 code-push-server 和 react-native-code-push 參考 https://www.jianshu.com/p/ca4beb5973bb   服務端 react-native

react-antive 熱更新

GitHub：https://github.com/Microsoft/react-native-code-push 全域性安裝： npm install -g code-push-cli (Mac 加 sudo) 命令列註冊賬號：code-push register 然後跳轉到一

react 模組熱更新（Hot Module Replacement）

1  修改package.json中的設定 2   修改index.js  當模組更新的時候， 通知index.js 3  使用npm start  修改頁面的內容發現不會再重新整理頁面，只是替換了修改的部分 tip

實現 React Naitve 熱更新 (client && server) 客戶端以及伺服器端

目前針對react native 熱更新的方案比較成熟的選擇有microsoft公司的code-push 傳送門，與react-native 中文網的pushy 傳送門 本文選擇code-push 用來進行對react-native 實現熱更新，code-pus

iOS客戶端React-Native增量更新實踐

市場上現存方案：微軟的 CodePush 以及React-Native中文網的Pushy，大家可根據公司實際情況酌情選擇。 處於安全性的考慮，公司禁止向第三方平臺上傳原始碼相關檔案，所以要自己動手實現。 增量更新主要實現流程 1.使用react-nativ

【0.42】React Native 中文更新日誌

本文為 Marno 原創，轉載必須保留出處！ 公眾號【 aMarno 】，關注後回覆 RN 加入交流群 一、前言 想必也沒什麼人愛看更新日誌這種東西，所以我直接總結

webpack+webpack-dev-server+react搭建熱更新專案

由於之前對webpack的瞭解也沒有那麼的多，所以在自己去搭建的時候就會遇到各種問題，這次自己從頭到尾的搭建了一次，對webpack進行一次梳理1、首先本人使用的版本是 [email protected]、[email protected]（webpack

Android原生整合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 l