轻松配置react native热更新 - 简书

标签: | 发表时间:2021-05-24 15:01 | 作者:
出处:https://www.jianshu.com

react-native项目有个优势就是可以动态更新bundle.js,从而更新App。

1.gif

项目代码传送门

框架选择

  • 使用微软出的热更新套件 react-native-code-push
  • 框架包括客户端SDK,以及配套的服务端。

服务端配置

  • 要使用 code push服务,必须在服务端配置好 app的信息。
  • 安装 App Center CLI,用于服务端信息管理。
    $ sudo npm install -g appcenter-cli
  • 登陆 app cetner
    $ appcenter login
  • 运行以上命令并在命令行确认后,网页会弹出一个要求登陆的页面,登陆后,会得到一串 Access code,复制粘贴回命令行,成功的话会返回登陆账号。
    $ appcenter login
Opening your browser... 
? [Visit]:https://appcenter.ms/cli-login?hostname=assetfundeMacBook-Pro.local and enter the code:
? Access code from browser:  0cd185da****36a****7295b3****c8da9ba766a
Logged in as kk412027247
  • 添加 App信息,这里要分别添加 安卓iOS,我的 app名字是 splashExample,以此为例
    // -d 后面接的是app显示的名字,为了区分不同平台后面也写上平台命
// -o 表示运行系统(operation) 安卓/iOS
// -p 表示平台(Platform)这里是 react-native
$ appcenter apps create -d splashExample-android -o Android -p React-Native
$ appcenter apps create -d splashExample-ios -o iOS -p React-Native
  • 接下来运行一下 appcenter apps list检测是否添加成功
    $  appcenter apps list
  kk412027247/splashExample-android
  kk412027247/splashExample-ios
  • 将已添加的 app部署热更新服务,一般会部署两个用于灰度更新,和正式更新,这里分别叫做 StagingProduction。分别给安卓和iOS部署,所以一共要运行四行命令。

建议部署其中一个叫做 Staging,命令行一些默认行为会执行这个部署,如果没有这个名称,推送更新到部署的时候,要指定部署的名称,若不指定则会报错。

    // -a 是指应用(application),这里要写上“用户名和程序名”

// 部署IOS
$ appcenter codepush deployment add -a kk412027247/splashExample-ios Staging
$ appcenter codepush deployment add -a kk412027247/splashExample-ios Production
// 部署安卓
$ appcenter codepush deployment add -a kk412027247/splashExample-android Staging
$ appcenter codepush deployment add -a kk412027247/splashExample-android Production
  • 获取 部署码,运行以上命令之后,命令行会返 部署码,但是有可能没记下就关掉了命令行
  • appcenter codepush deployment list -a <ownerName>/<appName> <deploymentName> -k命令可以查看部署码
    $ appcenter codepush deployment list -a kk412027247/splashExample-ios -k
Name Key
Staging mgqluuNp1DTWNA5xn_c2YWWyLKGxBJA67O7UN
Production miDM42DG-ooHvW0VVa0tdPNAgRH2BJJ6j_X8V
    $ appcenter codepush deployment list -a kk412027247/splashExample-android -k
Name Key
Staging 2CFJps8zo4gguRDddWp7POP0psZCrJnAXOQIE
Production cskcQEjzC5kbOelsPgwA4zaDac6SS1ow0tQIV

运行了一堆命令,最终得到这两组四个 部署码,接下来须要将这些 部署码按需配置到客户端里面。


客户端安装与配置

  • 安装依赖包
    $ npm install --save react-native-code-push
$ react-native link

运行 react-native link的时候,命令行会提示输入部署码 What is your CodePush deployment key for Android (hit <ENTER> to ignore),这个提示只是第一次输入有效。

  • 填写 部署码,我这里都是输入 Staging部署码。如果是正式环境,建议写 Production部署码

    • iOS平台,修改 /splashExample/ios/splashExample/Info.plist文件, CodePushDeploymentKey标签的值。
      iosDeploymentKey.png
    • 安卓平台,修改 /splashExample/android/app/src/main/java/com/splashexample/MainApplication.java
      androidDeploymentKey.png
  • api调用(安静模式)

    import CodePush from "react-native-code-push";
// 静默方式,app每次启动的时候,都检测一下更新 'ON_APP_RESUME'
const codePushOptions = { checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME };
import _App from './App';
// 在组件根节点的地方设置热更新。
const App = CodePush(codePushOptions)(_App);
  • 这个安静模式是我最喜欢一种,配置简单,在用户没察觉的情况下就更新了app。在用户打开app的时候,自动下载更新包,下次再启动的时候自动安装更新包。


    0.gif
  • api调用(自定义模式),在更新之前可以获取更新包的大小,更新的具体信息,监听下载进度等等。

    import CodePush from "react-native-code-push";
...

  state = {receivedBytes : 0, totalBytes : 0, showProcess: false, showIndicator:false};

  _handleUpdate = async () => {
    this.setState({showIndicator: true});

    // checkForUpdate 返回promise,包含了服务端安装包的各种信息,包的大小版本之类的,
    // 如果要构建构建个性化更新界面,需要用到此方法
    const updateMessage = await CodePush.checkForUpdate() || {};

    // console.log(updateMessage);
    // return;

    // 执行更新
    await CodePush.sync(
      // 第一个参数吗,是个对象,可定义更新的动作
      {
        // 安装模式 'IMMEDIATE' 立刻安装, ON_NEXT_RESUME 下次启动安装
        installMode: CodePush.InstallMode.ON_NEXT_RESUME,

        // 强制更新模式下的安装,默认是IMMEDIATE 直接安装
        mandatoryInstallMode: CodePush.InstallMode.IMMEDIATE,

        //更新确认弹窗设置,设置系统自带弹窗中的内容
        updateDialog:{
          mandatoryUpdateMessage:'强制更新内容: '+updateMessage.description,
          mandatoryContinueButtonLabel:'强制更新/确认',
          optionalIgnoreButtonLabel:'取消',
          optionalInstallButtonLabel:'安装',
          optionalUpdateMessage:'本次更新内容: '+updateMessage.description,
          title:'发现新版本'
        }},
      // 第二个参数,更新状态检测,返回数字
      //0 已经是最新,1 安装完成、等待生效,2 忽略更新,3 未知错误,4 已经在下载了,5 查询更新,6 弹出了更新确认界面,7 下载中,8下载完成
      (status)=>{

        switch (status){
          case 0: alert('已经是最新版本');
            break;
          case 1 : !updateMessage.isMandatory && alert('更新完成, 再启动APP更新即生效');
            break;
          case 3: alert('出错了,未知错误');
            break;
          case 7 : this.setState({showProcess: true});
            break;
          case 8 : this.setState({showProcess: false});
            break;
        }
      },
      // 第三个参数,检测下载过程
      ({receivedBytes,totalBytes})=>{
        // console.log('DownloadProgress: ', receivedBytes, totalBytes);
        this.setState({receivedBytes: (receivedBytes/1024).toFixed(2), totalBytes: (totalBytes/1024).toFixed(2)})
      },
    );
    this.setState({showIndicator: false});
  };

  handleUpdate = () => this._handleUpdate().catch(()=>{
    this.setState({showIndicator: false});
    alert('网络错误')
  });
  • 这个配置稍微复杂一点,但是自定义程度很高,比如要做下载滚动条,查看更新日志,都可以实现。默认情况下,再次启动app的时候,更新生效。


    1.gif

推送更新

设置完客户端之后,须要在服务端推送更细,客户端才能检测到更新。以上效果都是已经从服务端做了更新推送的。

  • 推送命令,在项目根目录运行 appcenter codepush release-react -a <ownerName>/MyApp
    //  在默认情况下,更新会推送到Staging的部署
$ appcenter codepush release-react -a kk412027247/splashExample-ios
$ appcenter codepush release-react -a kk412027247/splashExample-android

//  指定版本更新 -d 加部署名
$ appcenter codepush release-react -a kk412027247/splashExample-ios -d Production
$ appcenter codepush release-react -a kk412027247/splashExample-android -d Production

// 设置更新日志,供前端读取
$ appcenter codepush release-react -a kk412027247/splashExample-ios  --description '1800的更新'
$ appcenter codepush release-react -a kk412027247/splashExample-android  --description '1800的更新'
  • 强制更新,在项目根目录运行 appcenter codepush release-react -a <ownerName>/MyApp -m true
  • 其实就是多了个 -m true参数而已,强制更新的默认效果是,用弹窗确认更新时候,只有确认键,并且安装成功后是立即生效,所以app可能会闪一下。
    $ appcenter codepush release-react -a kk412027247/splashExample-ios -m true  --description '1052的更新'
$ appcenter codepush release-react -a kk412027247/splashExample-android -m true  --description '1052的更新'
2.gif
  • 查看更新看历史 appcenter codepush deployment history -a <ownerName>/<appName> <deploymentName>
    // 显示历史
$ appcenter codepush deployment history -a kk412027247/splashExample-ios Staging

// 清空历史
$ appcenter codepush deployment clear Staging -a kk412027247/splashExample-ios

官方资料

React Native Client SDK安装与配置
App Center CLI安装与配置
js api


项目代码地址

相关 [react native 更新] 推荐:

谈谈 React Native

- - 唐巧的技术博客
几天前,Facebook 在 React.js Conf 2015 大会上推出了 React Native( 视频链接). 我发了一条微博( 地址),结果引来了 100 多次转发. 为什么 React Native 会引来如此多的关注呢. 我在这里谈谈我对 React Native 的理解. 一个新框架的出现总是为了解决现有的一些问题,那么对于现在的移动开发者来说,到底有哪些问题 React Native 能涉及呢.

轻松配置react native热更新 - 简书

- -
react-native项目有个优势就是可以动态更新bundle.js,从而更新App. 框架包括客户端SDK,以及配套的服务端. code push服务,必须在服务端配置好. App Center CLI,用于服务端信息管理. 运行以上命令并在命令行确认后,网页会弹出一个要求登陆的页面,登陆后,会得到一串.

React Native 原理与实践

- - 掘金 前端
React Native 介绍. 什么是 React Native. React Native 是一个由 Facebook 于 2015 年 9 月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用. 它既保留了 React 的开发效率,又同时拥有 Native 应用的良好体验,加上 Virtual DOM 跨平台的优势,实现了真正意义上的:.

React Native通信机制详解

- - bang's blog
React Native是facebook刚开源的框架,可以用javascript直接开发原生APP,先不说这个框架后续是否能得到大众认可,单从源码来说,这个框架源码里有非常多的设计思想和实现方式值得学习,本篇先来看看它最基础的JavaScript-ObjectC通信机制(以下简称JS/OC). 普通的JS-OC通信实际上很简单,OC向JS传信息有现成的接口,像webview提供的-stringByEvaluatingJavaScriptFromString方法可以直接在当前context上执行一段JS脚本,并且可以获取执行后的返回值,这个返回值就相当于JS向OC传递信息.

使用 BaaS 工具 与 React Native 构建原生应用

- - SegmentFault 最新的文章
React Native 是 Facebook 在今年的 F8 大会上发布的移动应用开发方案. 它基于JavaScript 和 React,可以让 Web 应用开发者在保持原有的开发体验和效率的同时,为 Web 应用带来原生应用的体验. React Native 使用 JavaScript 作为开发语言,其内建的打包系统支持包括 CommonJS 在内的多种模块化标准,因此很多支持浏览器运行环境的 Node Package 也可以运行在 React Native 中.

浅谈移动应用的跨平台开发工具(Xamarin和React Native)

- - 酷 壳 – CoolShell.cn
谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与原生应用仍然存在着明显的差距. 与上述HTML5平台不同,Xamarin和React Native通过各自的方式来实现跨平台.

NervJS/taro: 开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/

- -
👽Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. Taro是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用. 现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要.

Webpack 和 React 小书

- - SegmentFault 最新的文章
Webpack 和 React 小书. 这本小书的目的是引导你进入 React 和 Webpack 的世界. 他们两个都是非常有用的技术,如果同时使用他们,前端开发会更加有趣. 这本小书会提供所有相关的技能. 如果你只是对 React 感兴趣,那可以跳过 Webpack 相关的内容,反之亦然. 如果想学习更多的相关知识可以移步 SurviveJS - Webpack and React.

React入门实例学习

- - JavaScript - Web前端 - ITeye博客
        React可以在浏览器运行,也可以在服务器运行,但是在这为了尽量保持简单,且React语法是一致的,服务器的用法和浏览器差别不大,在这只涉及浏览器. 一. HTML模板.         使用React的网页源码,结构大致如下:.         1.最后一个script标签的type属性为text/jsx.

轻松入门React和Webpack

- - SegmentFault 最新的文章
小广告:更多内容可以看 我的博客和 读书笔记. 最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰. 一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件.