CodePush自定义更新弹框及下载进程条,CodePush最新集成计算

By admin in 4858美高梅 on 2019年3月22日

CodePush 热更新之自定义更新弹框及下载进程

CodePush是1个微软开发的云服务器。通过它,开发者能够直接在用户的配备上配置手提式有线电话机使用立异。CodePush也正是贰个基本仓库,开发者能够推送当前的更新(包涵JS/HTML/CSS/IMAGE等)到CoduPush,然后选择将会询问是或不是有更新。

React Native应用布署/热更新-CodePush最新集成总括(新)

本文来源《React
Native学习笔记》铺天盖地小说。
打探越多,能够关爱笔者的GitHub和加入:
React
Native学习沟通群

4858美高梅 1

React Native学习交流群


履新表明:
此次博文更新适配了流行版的CodePush
v1.17.0;添加了iOS的购并格局与调节技巧;添加了进一步精简的CodePush揭橥更新的点子以及实行了部分别样的优化。

React Native的出现为移动支付领域带来了两大革命性的立异:

  1. 构成了运动端APP的付出,不仅减弱了APP的付出时间,也增进了APP的开发功用。
  2. 为移动APP动态更新提供了基础。

本文将向大家分享React Natvie应用铺排/动态更新方面包车型大巴内容。

React Native协理大家用React
Native技术开发APP,并打包生成一个APP。在动态更新方面React
Native只是提供了动态更新的基本功,对将动用安插到哪个地方,怎么样进展动态更新并不曾帮助的那么完美。幸好微软花费了CodePush,填补React
Native 应用在动态更新方面的空域。CodePush 是微软提供的一套用于热更新
React Native 和 Cordova利用的劳务。上面将向大家分享怎么着使用CodePush实时更新您的施用,前期会享受不应用CodePush,怎么着团结去贯彻React
Native应用热更新。

React Native应用安排/热更新-CodePush最新集成总计(新)

本文来源《React
Native学习笔记》一而再串小说。
打探越来越多,能够关心自个儿的GitHub和加入:
React
Native学习交换群

4858美高梅 2

React Native学习交换群


立异表达:
这一次博文更新适配了最新版的CodePush
v1.17.0;添加了iOS的购并情势与调节技巧;添加了进一步精简的CodePush公布更新的法门以及举办了有个别别样的优化。

React Native的面世为活动支付领域带来了两大革命性的换代:

  1. 构成了移动端APP的费用,不仅减少了APP的耗时,也拉长了APP的开支功用。
  2. 为移动APP动态更新提供了基础。

本文将向大家分享React Natvie应用安插/动态更新方面包车型客车始末。

React Native补助大家用React
Native技术开发APP,并打包生成3个APP。在动态更新方面React
Native只是提供了动态更新的底子,对将动用布置到哪个地方,怎样开始展览动态更新并没有帮助的那么完美。幸而微软开发了CodePush,填补React
Native 应用在动态更新方面包车型客车空域。CodePush 是微软提供的一套用于热更新
React Native 和 Cordova利用的劳动。下边将向我们享受怎么样使用CodePush实时更新您的施用,早先时期会分享不利用CodePush,怎样团结去达成React
Native应用热更新。

先来几张弹框效果图

  • 非强制更新场景
![](https://upload-images.jianshu.io/upload_images/6342050-88272b9206a60848.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)  
image
  • 强制更新场景
![](https://upload-images.jianshu.io/upload_images/6342050-61760fbf4d8a0c5f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)  
image
  • 更新包下载进程效果
![](https://upload-images.jianshu.io/upload_images/6342050-4508fa6ce0a48b60.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)  
image
  • 安装 CodePush CLI
  • 注册 CodePush账号
  • 在CodePush服务器注册App
  • 途达N代码中集成CodePush
  • 原生应用中陈设CodePush
  • 揭橥更新的本子

CodePush简介

CodePush 是微软提供的一套用于热更新 React Native 和 Cordova使用的服务。
CodePush 是提需要 React Native 和 Cordova开发者直接配备活动选拔立异给用户设备的云服务。CodePush
作为1个宗旨仓库,开发者能够推送更新 (JS, HTML, CSS and
images),应用能够从客户端 SDK 里面查询更新。CodePush
能够让动用有更多的可明明,也能够让你间接接触用户群。在修补一些不奇怪和添加新特点的时候,不要求通过二进制打包,可以直接推送代码举办实时更新。

CodePush 可以拓展实时的推送代码更新:

  • 一向对用户安插代码更新
  • 治本 Alpha,Beta 和生产环境应用
  • 支持 React Native 和 Cordova
  • 支撑JavaScript 文件与图片能源的创新

CodePush开源了react-native版本,react-native-code-push托管在GitHub上。

CodePush简介

CodePush 是微软提供的一套用于热更新 React Native 和 Cordova行使的劳动。
CodePush 是提需求 React Native 和 Cordova开发者间接配置活动应用立异给用户设备的云服务。CodePush
作为一个主旨仓库,开发者能够推送更新 (JS, HTML, CSS and
images),应用能够从客户端 SDK 里面查询更新。CodePush
能够让使用有越多的可显然,也足以让您一向触及用户群。在修补一些没非常和丰盛新性格的时候,不须要通过二进制打包,能够平昔推送代码进行实时更新。

CodePush 能够拓展实时的推送代码更新:

  • 直白对用户计划代码更新
  • 管理 Alpha,Beta 和生育环境应用
  • 支持 React Native 和 Cordova
  • 帮忙JavaScript 文件与图片能源的换代

CodePush开源了react-native版本,react-native-code-push托管在GitHub上。

宗旨代码

那里的热更新Modal框,是封装成二个功力独立的机件来使用的,需不必要更新以及是或不是为威迫更新等逻辑均在组件内实现

4858美高梅 3

image

UpdateComp 热更新组件宗旨代码如下:

/**
 * Created by guangqiang on 2018/3/29.
 */
import React, {Component} from 'react'
import {View, Text, StyleSheet, Modal, TouchableOpacity, Image} from 'react-native'
import Progress from './index'
import {GlobalStyles} from '../../../constants/GlobalStyles'
import {deviceInfo} from "../../../constants/DeviceInfo"
import {Icon} from '../../../utils/iconFont'
import CodePush from "react-native-code-push"
import {Toast} from "../../../utils/toast"

const CODE_PUSH_KEY = 'jE39cjdnkzqfpXgRylPXDDNkEzJm3ac740b8-b071-474f-afbf-369c6e4642ab'
let codePushOptions = {
  checkFrequency : CodePush.CheckFrequency.ON_APP_START
}

class ProgressBar extends Component {

  constructor(props) {
    super(props)
    this.currProgress = 0.0
    this.syncMessage = ''
    this.state = {
      modalVisible: false,
      isMandatory: false,
      immediateUpdate: false,
      updateInfo: {}
    }
  }

  codePushStatusDidChange(syncStatus) {
    if (this.state.immediateUpdate) {
      switch(syncStatus) {
        case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
          this.syncMessage = 'Checking for update'
          break;
        case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
          this.syncMessage = 'Downloading package'
          break;
        case CodePush.SyncStatus.AWAITING_USER_ACTION:
          this.syncMessage = 'Awaiting user action'
          break;
        case CodePush.SyncStatus.INSTALLING_UPDATE:
          this.syncMessage = 'Installing update'
          break;
        case CodePush.SyncStatus.UP_TO_DATE:
          this.syncMessage = 'App up to date.'
          break;
        case CodePush.SyncStatus.UPDATE_IGNORED:
          this.syncMessage = 'Update cancelled by user'
          break;
        case CodePush.SyncStatus.UPDATE_INSTALLED:
          this.syncMessage = 'Update installed and will be applied on restart.'
          break;
        case CodePush.SyncStatus.UNKNOWN_ERROR:
          this.syncMessage = 'An unknown error occurred'
          Toast.showError('更新出错,请重启应用!')
          this.setState({modalVisible: false})
          break;
      }
    }
  }

  codePushDownloadDidProgress(progress) {
    if (this.state.immediateUpdate) {
      this.currProgress = parseFloat(progress.receivedBytes / progress.totalBytes).toFixed(2)
      if(this.currProgress >= 1) {
        this.setState({modalVisible: false})
      } else {
        this.refs.progressBar.progress = this.currProgress
      }
    }
  }

  syncImmediate() {
    CodePush.checkForUpdate(CODE_PUSH_KEY).then((update) => {
      console.log('-------' + update)
      if (!update) {
        Toast.showLongSuccess('已是最新版本!')
      } else {
        this.setState({modalVisible: true, updateInfo: update, isMandatory: update.isMandatory})
      }
    })
  }

  componentWillMount() {
    CodePush.disallowRestart()
    this.syncImmediate()
  }

  componentDidMount() {
    CodePush.allowRestart()
  }

  _immediateUpdate() {
    this.setState({immediateUpdate: true})
    CodePush.sync(
        {deploymentKey: CODE_PUSH_KEY, updateDialog: {}, installMode: CodePush.InstallMode.IMMEDIATE},
        this.codePushStatusDidChange.bind(this),
        this.codePushDownloadDidProgress.bind(this)
    )
  }

  renderModal() {
    return (
        <Modal
            animationType={"none"}
            transparent={true}
            visible={this.state.modalVisible}
            onRequestClose={() => alert("Modal has been closed.")}>
          <View style={styles.modal}>
            <View style={styles.modalContainer}>
              {
                !this.state.immediateUpdate ?
                    <View>
                      <Image style={{width: deviceInfo.deviceWidth - 60}} source={require('../../../assets/images/me/updateBg.png')} resizeMode={'stretch'}/>
                      <View style={{backgroundColor: GlobalStyles.white}}>
                        <View style={{marginHorizontal: 15}}>
                          <Text style={{marginVertical: 20, fontSize: 17, color: GlobalStyles.textBlockColor, fontWeight: 'bold'}}>更新内容</Text>
                          <Text style={{lineHeight: 20}}>{this.state.updateInfo.description}</Text>
                        </View>
                        <View style={{alignItems: GlobalStyles.center, marginTop: 20}}>
                          <Text style={{fontSize: 14, color: GlobalStyles.textGrayColor}}>wifi情况下更新不到30秒</Text>
                        </View>
                        {
                          !this.state.isMandatory ?
                              <View style={{flexDirection: GlobalStyles.row, height: 50, alignItems: GlobalStyles.center, marginTop: 20, borderTopColor: GlobalStyles.lineColor, borderTopWidth: 1 }}>
                                <TouchableOpacity
                                    onPress={() => this.setState({modalVisible: false})}>
                                  <View style={{flexDirection: GlobalStyles.row, alignItems: GlobalStyles.center, width: (deviceInfo.deviceWidth - 60) / 2, height: 50, borderRightColor: GlobalStyles.lineColor, borderRightWidth: 1, alignItems: GlobalStyles.center, justifyContent: GlobalStyles.center}}>
                                    <Icon name={'oneIcon|reject_o'} size={20} color={'#B6B6B6'}/>
                                    <Text style={{fontSize: 17, fontWeight: 'bold', color: GlobalStyles.textGrayColor, marginLeft: 10}}>残忍拒绝</Text>
                                  </View>
                                </TouchableOpacity>
                                <TouchableOpacity
                                    style={{flexDirection: GlobalStyles.row, alignItems: GlobalStyles.center, width: (deviceInfo.deviceWidth - 60) / 2, height: 50, alignItems: GlobalStyles.center, justifyContent: GlobalStyles.center}}
                                    onPress={() => this._immediateUpdate()}
                                >
                                  <View style={{backgroundColor: '#3496FA', flex: 1, height: 40, alignItems: GlobalStyles.center, justifyContent: GlobalStyles.center, margin: 10, borderRadius: 20}}>
                                    <Text style={{fontSize: 17, color: GlobalStyles.white, fontWeight: 'bold'}}>极速下载</Text>
                                  </View>
                                </TouchableOpacity>
                              </View> :
                              <View style={{flexDirection: GlobalStyles.row, height: 60, alignItems: GlobalStyles.center, marginTop: 20, borderTopColor: GlobalStyles.lineColor, borderTopWidth: 1, width: deviceInfo.deviceWidth - 60}}>
                                <TouchableOpacity
                                    style={{flexDirection: GlobalStyles.row, alignItems: GlobalStyles.center, width: (deviceInfo.deviceWidth - 60), height: 50, alignItems: GlobalStyles.center, justifyContent: GlobalStyles.center}}
                                    onPress={() => this._immediateUpdate()}
                                >
                                  <View style={{backgroundColor: '#3496FA', flex: 1, height: 40, alignItems: GlobalStyles.center, justifyContent: GlobalStyles.center, borderRadius: 20, marginHorizontal: 40}}>
                                    <Text style={{fontSize: 17, color: GlobalStyles.white, fontWeight: 'bold'}}>立即更新</Text>
                                  </View>
                                </TouchableOpacity>
                              </View>
                        }
                      </View>
                    </View> :
                    <View>
                      <Image style={{width: deviceInfo.deviceWidth - 60}} source={require('../../../assets/images/me/updateBg.png')} resizeMode={'stretch'}/>
                      <View style={{backgroundColor: GlobalStyles.white, paddingVertical: 20, backgroundColor: GlobalStyles.white, alignItems: GlobalStyles.center}}>
                        <Progress
                            ref="progressBar"
                            progressColor={'#89C0FF'}
                            style={{
                              marginTop: 20,
                              height: 10,
                              width: deviceInfo.deviceWidth - 100,
                              backgroundColor: GlobalStyles.bgColor,
                              borderRadius: 10,
                            }}
                        />
                        <View style={{alignItems: GlobalStyles.center, marginVertical: 20}}>
                          <Text style={{fontSize: 14, color: GlobalStyles.textGrayColor}}>版本正在努力更新中,请等待</Text>
                        </View>
                      </View>
                    </View>
              }
            </View>
          </View>
        </Modal>
    )
  }

  render(){
    return(
        <View style={styles.container}>
          {this.renderModal()}
        </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: GlobalStyles.bgColor
  },
  modal: {
    height: deviceInfo.deviceHeight,
    width: deviceInfo.deviceWidth,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.3)'
  },
  modalContainer: {
    marginHorizontal: 60,
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
  }
})

export default CodePush(codePushOptions)(ProgressBar)

下载进程条组件Progress 那里也是封装成三个零件,大旨代码如下:

4858美高梅 4

image

/**
 * Created by guangqiang on 2018/3/29.
 */
import React, {Component}from 'react'
import {View, StyleSheet, Animated, Easing}from 'react-native'

import PropTypes from 'prop-types'

export default class CusProgressBar extends Component {

  static propTypes = {
    ...View.propTypes,
    // 当前进度
    progress: PropTypes.number,
    // second progress进度
    buffer: PropTypes.number,
    // 进度条颜色
    progressColor: PropTypes.string,
    // buffer进度条颜色
    bufferColor: PropTypes.string,
    // 进度动画时长
    progressAniDuration: PropTypes.number,
    // buffer动画时长
    bufferAniDuration: PropTypes.number
  }

  static defaultProps = {
    // 进度条颜色
    progressColor: 'white',
    // buffer进度条颜色
    bufferColor: 'rgba(255,0,0,0.7)',
    // 进度条动画时长
    progressAniDuration: 100,
    // buffer进度条动画时长
    bufferAniDuration: 100
  }

  constructor(props) {
    super(props)
    this._progressAni = new Animated.Value(0)
    this._bufferAni = new Animated.Value(0)
  }

  componentWillReceiveProps(nextProps) {
    this._progress = nextProps.progress
    this._buffer = nextProps.buffer
  }

  componentWillMount() {
    this._progress = this.props.progress
    this._buffer = this.props.buffer
  }

  render() {
    return (
        <View
            style={[styles.container,this.props.style]}
            onLayout={this._onLayout.bind(this)}>
          <Animated.View
              ref="progress"
              style={{
                position:'absolute',
                width: this._progressAni,
                backgroundColor:this.props.progressColor,
                borderRadius: 10
              }}/>
          <Animated.View
              ref="buffer"
              style={{
                position:'absolute',
                width: this._bufferAni,
                backgroundColor:this.props.bufferColor,
                borderRadius: 10,
              }}/>
        </View>
    )
  }

  _onLayout({nativeEvent: {layout:{width, height}}}) {
    // 防止多次调用,当第一次获取后,后面就不再去获取了
    if (width > 0 && this.totalWidth !== width) {
      // 获取progress控件引用
      let progress = this._getProgress()
      // 获取buffer控件引用
      let buffer = this._getBuffer()
      // 获取父布局宽度
      this.totalWidth = width
      //给progress控件设置高度
      progress.setNativeProps({
        style: {
          height: height
        }
      })

      // 给buffer控件设置高度
      buffer.setNativeProps({
        style: {
          height: height
        }
      })

      // 开始执行进度条动画
      this._startAniProgress(this.progress)
      // 开始执行buffer动画
      this._startAniBuffer(this.buffer)
    }
  }

  _startAniProgress(progress) {
    if (this._progress >= 0 && this.totalWidth !== 0) {
      Animated.timing(this._progressAni, {
        toValue: progress * this.totalWidth,
        duration: this.props.progressAniDuration,
        easing: Easing.linear
      }).start()
    }
  }

  _startAniBuffer(buffer) {
    if (this._buffer >= 0 && this.totalWidth !== 0) {
      Animated.timing(this._bufferAni, {
        toValue: buffer * this.totalWidth,
        duration: this.props.bufferAniDuration,
      }).start()
    }
  }

  _getProgress() {
    if (typeof this.refs.progress.refs.node !== 'undefined') {
      return this.refs.progress.refs.node
    }
    return this.refs.progress._component
  }

  _getBuffer() {
    if (typeof this.refs.buffer.refs.node !== 'undefined') {
      return this.refs.buffer.refs.node;
    }
    return this.refs.buffer._component;
  }
}

Object.defineProperty(CusProgressBar.prototype, 'progress', {
  set(value){
    if (value >= 0 && this._progress !== value) {
      this._progress = value;
      this._startAniProgress(value);
    }
  },
  get() {
    return this._progress;
  },
  enumerable: true,
})

Object.defineProperty(CusProgressBar.prototype, 'buffer', {
  set(value){
    if (value >= 0 && this._buffer !== value) {
      this._buffer = value;
      this._startAniBuffer(value);
    }
  },
  get() {
    return this._buffer;
  },
  enumerable: true,
})

const styles = StyleSheet.create({
  container: {
    height: 4,
    backgroundColor: 'blue'
  }
})

1、安装 CodePush CLI

安装CodePush指令,直接在终点上输入如下命令即可,注意:以此CodePush指令只须要全局安装3遍即可,借使第①回安装成功了,那前面就不在必要安装

$ npm install -g code-push-cli

4858美高梅 5image

安装与登记CodePush

使用CodePush此前率先要设置CodePush客户端。本文以OSX
10.11.5作为平台展开出现说法。

安装与登记CodePush

动用CodePush从前率先要设置CodePush客户端。本文以OSX
10.11.5作为平台进行出现说法。

UpdateComp零件中的热更新宗旨代码讲解

4858美高梅 6

image

那大家在UpdateComp
组件中,在 componentWillMount 的生命周期函数中,大家调用codepush提供的那五个函数:并在syncImmediate 函数中,大家调用codepush的checkForUpdate 函数来检查是还是不是已有新本子,以及新本子的音信等,具体代码完结如下:

4858美高梅 7

image

注意:

codepush有多少个代理函数大家必要调用:

4858美高梅 8

image

  • codePushStatusDidChange: codepush状态的变迁的钩子函数

  • codePushDownloadDidProgress: codepush下载更新包的进程钩子函数

当大家处理完上边的内容,codepush的基本成效大家就处理完毕了,剩下的劳作正是处理局地逻辑了,包涵该不应当弹更新框,以及更新弹框和更新速度的拍卖

2、注册 CodePush账号

CodePush自定义更新弹框及下载进程条,CodePush最新集成计算。注册CodePush账号也很简短,同样是只需不难的实施上面包车型地铁吩咐,同样这些注册操作也是全局只须求登记2回即可

$ code-push register

注意:当执行完上边的通令后,会活动打开三个授权网页,让您采取接纳哪类方法进行授权登录,那里大家归总就接纳接纳GitHub即可

4858美高梅 9image

当注册成功后,CodePush会给大家一个key

4858美高梅 10image

作者们直接复制那个key,然后在终端上校以此key填写进去即可,填写key登录成功展现效果如下

4858美高梅 11image

咱俩采用上边包车型客车指令来表明自个儿的报到是不是成功

$ code-push login

4858美高梅 12image

CodePush注册登录相关命令:

  • code-push login 登陆
  • code-push loout 注销
  • code-push access-key ls 列出登陆的token
  • code-push access-key rm <accessKye> 删除有个别 access-key

安装 CodePush CLI

治本 CodePush 账号供给通过 NodeJS-based CLI。
只须要在巅峰输入 npm install -g code-push-cli,就能够安装了。
设置收尾后,输入 code-push -v翻看版本,如看到版本代表成功。
![安装 CodePush
CLI成功](https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/master/React%20Native动用布署、热更新-CodePush最新集成总括安装
CodePush CLI成功.png)
如今自作者的本子是 1.12.1-beta

PS.
npm为NodeJS的包管理器,假诺你没安装NodeJS请先安装。

安装 CodePush CLI

管住 CodePush 账号要求经过 NodeJS-based CLI。
只需求在终极输入 npm install -g code-push-cli,就能够安装了。
安装实现后,输入 code-push -v翻开版本,如看到版本代表成功。
![安装 CodePush
CLI成功](https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/master/React%20Native应用布置、热更新-CodePush最新集成总计安装
CodePush CLI成功.png)
日前本人的版本是 1.12.1-beta

PS.
npm为NodeJS的包管理器,假诺您没设置NodeJS请先安装。

总结:

本篇教程首假诺教课codepush中哪些处理安装包的下载速度,以及如何自定义更新弹框和下载进程条,上边的弹框成效和下载进程条功用为主都已处理完结,能够一贯复制四个零部件代码到温馨项目中,稍作修改即可使用。假诺还有同伙对codepush详细的连片流程不熟稔的,请点击查阅小编的CodePush热更新详细接入教程一文,假若还有其余的题材,也能够简书留言或然进群提问

三 、在CodePush服务器注册App

为了让CodePush服务器有大家的App,大家需求CodePush注册App,输入下边发号施令即可完毕注册,那里要求留意如若大家的利用分为iOS和Android七个阳台,那时大家须要各自注册两套key应用添加成功后就会重返对应的production
Staging
两个key,production意味着生产版的热更新布署,Staging意味着开发版的热更新计划,在ios中将staging的计划key复制在info.plist的CodePushDeploymentKey值中,在android中复制在Application的getPackages的CodePush中

添加iOS平台利用

$ code-push app add iOSRNHybrid ios react-native

4858美高梅 13image

添加Android平台运用

$ code-push app add iOSRNHybridForAndroid Android react-native

4858美高梅 14image

大家得以输入如下命令来查看我们刚刚添加的App

$ code-push app list

4858美高梅 15image

CodePush管理App的连锁命令:

  • code-push app add 在账号里面添加3个新的app
  • code-push app remove 或然 rm 在账号里移除叁个app
  • code-push app rename 重命名多少个设有app
  • code-push app list 或则 ls 列出账号上边包车型客车保有app
  • code-push app transfer 把app的全体权转移到此外贰个账号

始建二个CodePush 账号

在极限输入code-push register,会打开如下注册页面让您选用授权账号。

4858美高梅 16

注册codepush

授权通过之后,CodePush会告诉您“access
key”,复制此key到顶点即可成功登记。
![获取codepush access
key](https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/master/React%20Native运用安排、热更新-CodePush最新集成总计取得codepush
access key.png)
下一场终端输入code-push login开始展览登陆,登陆成功后,你的session文件将会写在
/Users/你的用户名/.code-push.config。

4858美高梅 17

登陆成功

PS.相关命令

  • code-push login 登陆
  • code-push loout 注销
  • code-push access-key ls 列出登陆的token
  • code-push access-key rm <accessKye> 删除有个别 access-key

创造一个CodePush 账号

在终点输入code-push register,会打开如下注册页面让您挑选授权账号。

4858美高梅 18

注册codepush

授权通过之后,CodePush会告诉您“access
key”,复制此key到终极即可到位登记。
![获取codepush access
key](https://raw.githubusercontent.com/crazycodeboy/RNStudyNotes/master/React%20Native运用计划、热更新-CodePush最新集成总结取得codepush
access key.png)
下一场终端输入code-push login开始展览登陆,登陆成功后,你的session文件将会写在
/Users/你的用户名/.code-push.config。

4858美高梅 19

登陆成功

PS.相关命令

  • code-push login 登陆
  • code-push loout 注销
  • code-push access-key ls 列出登陆的token
  • code-push access-key rm <accessKye> 删除有个别 access-key

凯雷德N实战总计

  • 作者React
    Native开源项目OneM地址(依照集团开销规范搭建框架形成开发的)::欢迎小伙伴们 star
  • 小编简书主页:包涵60多篇WranglerN开发相关的技巧小说迎接小伙伴们:多多关切,多多点赞
  • 我React Native QQ技术沟通群:620792950 欢迎小伙伴进群交换学习
  • 友情提醒:在支付中有相逢本田CR-VN相关的技术难点,欢迎小伙伴参加沟通群(620792950),在群里提问、互相沟通学习。沟通群也定期更新最新的揽胜N学习材质给大家,谢谢大家扶助!

四 、汉兰达N代码中集成CodePush

首先我们要求设置CodeoPush组件,然后经过link命令添加原生信赖,最终在君越N根零件中添加热更新逻辑代码

设置组件

$ npm install react-native-code-push --save

4858美高梅 20image

累加原生依赖,那里丰盛重视大家选用机关抬高注重的法门

$ react-native link react-native-code-push

4858美高梅 21image

作者们在奥迪Q7N项指标根组件中添加热更新逻辑代码如下

import React, { Component } from 'react';import { Platform, StyleSheet, Text, View} from 'react-native';import CodePush from "react-native-code-push"; // 引入code-pushlet codePushOptions = { //设置检查更新的频率 //ON_APP_RESUME APP恢复到前台的时候 //ON_APP_START APP开启的时候 //MANUAL 手动检查 checkFrequency : CodePush.CheckFrequency.ON_APP_RESUME};const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',});type Props = {};class App extends Component<Props> { //如果有更新的提示 syncImmediate() { CodePush.sync( { //安装模式 //ON_NEXT_RESUME 下次恢复到前台时 //ON_NEXT_RESTART 下一次重启时 //IMMEDIATE 马上更新 installMode : CodePush.InstallMode.IMMEDIATE , //对话框 updateDialog : { //是否显示更新描述 appendReleaseDescription : true , //更新描述的前缀。 默认为"Description" descriptionPrefix : "更新内容:" , //强制更新按钮文字,默认为continue mandatoryContinueButtonLabel : "立即更新" , //强制更新时的信息. 默认为"An update is available that must be installed." mandatoryUpdateMessage : "必须更新后才能使用" , //非强制更新时,按钮文字,默认为"ignore" optionalIgnoreButtonLabel : '稍后' , //非强制更新时,确认按钮文字. 默认为"Install" optionalInstallButtonLabel : '后台更新' , //非强制更新时,检查到更新的消息文本 optionalUpdateMessage : '有新版本了,是否更新?' , //Alert窗口的标题 title : '更新提示' } , } , ); } componentWillMount() { CodePush.disallowRestart();//禁止重启 this.syncImmediate(); //开始检查更新 } componentDidMount() { CodePush.allowRestart();//在加载完了,允许重启 } render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit App.js </Text> <Text style={styles.instructions}> {instructions} </Text> <Text style={styles.instructions}> 这是更新的版本 </Text> </View> ); }}// 这一行必须要写App = CodePush(codePushOptions)export default Appconst styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, },})

在CodePush服务器注册app

为了让CodePush服务器知道您的app,我们必要向它注册app:
在顶峰输入code-push app add <appName>即可到位登记。

4858美高梅 22

code-push-add-app

注册成功之后会回来一套deployment key,该key在末端步骤中会用到。

体验:若是您的运用分为Android和iOS版,那么在向CodePush注册应用的时候须要注册七个App获取两套deployment
key,如:

code-push app add MyApp-Android
code-push app add MyApp-iOS

PS.相关命令

  • code-push app add 在账号里面添加三个新的app
  • code-push app remove 恐怕 rm 在账号里移除贰个app
  • code-push app rename 重命名八个设有app
  • code-push app list 或则 ls 列出账号上边的装有app
  • code-push app transfer 把app的全数权转移到别的2个账号

在CodePush服务器注册app

为了让CodePush服务器知道您的app,咱们须求向它注册app:
在极限输入code-push app add <appName>即可形成登记。

4858美高梅 23

code-push-add-app

注册成功未来会回去一套deployment key,该key在背后步骤中会用到。

心得:假设你的采取分为Android和iOS版,那么在向CodePush注册应用的时候须求登记三个App获取两套deployment
key,如:

code-push app add MyApp-Android
code-push app add MyApp-iOS

PS.相关命令

  • code-push app add 在账号里面添加三个新的app
  • code-push app remove 只怕 rm 在账号里移除多个app
  • code-push app rename 重命名三个留存app
  • code-push app list 或则 ls 列出账号上边的具有app
  • code-push app transfer 把app的全部权转移到其它一个账号

伍 、原生应用中配备CodePush

这里原生应用中布置CodePush大家供给各自配备iOS平台和Android平台

  • 利用Xcode打开项目,Xcode的类型导航视图中的PROJECT下抉择你的类型,选取Info页签
    ,在Configurations节点下单击 + 按钮 ,选取Duplicate “Release
    Configaration,输入Staging

4858美高梅 24image

  • 选用Build Settings tab,搜索Build Location -> Per-configuration
    Build Products 帕特h ->
    Staging,将事先的值:$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME)
    改为:$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)

4858美高梅 25image

  • 选择Build Settings tab,点击 +
    号,选择Add User-Defined Setting,将key设置为CODEPUSH_KEY,Release
    和 Staging的值为方今创立的key,大家间接复制进去即可

4858美高梅 26image

  • 打开Info.plist文件,在CodePushDeploymentKey中输入$(CODEPUSH_KEY),并修改Bundle
    versions为三位

4858美高梅 27image

iOS平台CodePush环境集成达成

集成CodePush SDK

集成CodePush SDK

六 、揭橥更新的版本

在采纳在此之前供给考虑的是检查更新时机,更新是否强制,更新是或不是供给登时等

相似常见的使用内更新时机分为三种,一种是开拓App就反省更新,一种是身处设置界面让用户积极检查更新并设置

  • 打开APP就反省更新

    最为简练的采取格局在React
    Natvie的根组件的componentDidMount方法中通过codePush.sync()(必要起始入codePush包:import
    codePush from
    ‘react-native-code-push’)方法检查并设置更新,要是有更新包可供下载则会在重启后生效。不过那种下载和安装都以静默的,即用户不可知。倘使需求用户可知则须求至极的配备。具体能够参考codePush官方API文书档案,部分代码,完整代码请参见文书档案上面

    codePush.sync({ updateDialog: { appendReleaseDescription: true, descriptionPrefix:'\n\n更新内容:\n', title:'更新', mandatoryUpdateMessage:'', mandatoryContinueButtonLabel:'更新', }, mandatoryInstallMode:codePush.InstallMode.IMMEDIATE, deploymentKey: CODE_PUSH_PRODUCTION_KEY,});
    

    上边的布置在自作者批评更新时会弹出提醒对话框,
    mandatoryInstallMode表示强制更新,appendReleaseDescription表示在公布更新时的叙说会显获得革新对话框上让用户可知

  • 用户点击检查更新按钮

    在用户点击检查更新按钮后展开检查,假使有立异则弹出提示框让用户挑选是不是更新,假如用户点击登时更新按钮,则会议及展览开安装包的下载(实际上那时候应该展现下载进程,那里大致了)下载实现后会立时重启并生效,部分代码如下

    codePush.checkForUpdate(deploymentKey).then => { if  { Alert.alert("提示", "已是最新版本--", [ { text: "Ok", onPress: () => { console.log; } } ]); } else { codePush.sync({ deploymentKey: deploymentKey, updateDialog: { optionalIgnoreButtonLabel: '稍后', optionalInstallButtonLabel: '立即更新', optionalUpdateMessage: '有新版本了,是否更新?', title: '更新提示' }, installMode: codePush.InstallMode.IMMEDIATE, },  => { switch  { case codePush.SyncStatus.DOWNLOADING_PACKAGE: console.log("DOWNLOADING_PACKAGE"); break; case codePush.SyncStatus.INSTALLING_UPDATE: console.log(" INSTALLING_UPDATE"); break; } },  => { console.log(progress.receivedBytes + " of " + progress.totalBytes + " received."); } ); } }
    

比方是威胁更新须要在公布的时候内定,发表命令中安插–m true

在更新配备中经过点名installMode来决虞升卿装到位的重启时机,亦即更新生效时机

  • codePush.InstallMode.IMMEDIATE :安装完结马上重启更新
  • codePush.InstallMode.ON_NEXT_RESTAMuranoT
    :安装到位后会在下次重启后举行更新
  • codePush.InstallMode.ON_NEXT_RESUME
    :安装到位后会在动用进入后台后重启更新

在将LacrosseN的bundle放到CodePush服务器在此以前,大家需求先生成bundle,在将bundle上传来CodePush

生成bundle

  • 大家在LX570N项目根目录下线成立bundle文件夹,再在bundle中创设创立ios和android文件夹,最后将转变的bundle文件和财富文件拖到大家的花色工程中

4858美高梅 28image

  • 生成bundle命令
    react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试

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

4858美高梅 29image

  • 将扭转的bundle文件和财富文件拖到大家的品类工程

4858美高梅 30image

上传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 --d Production --des "这是第一个更新包" --m true

更新包上流传CodePush服务器成功后,效果图如下:

4858美高梅 31image

翻开发表的历史记录,命令如下

查询Production

$ code-push deployment history projectName Production

查询Staging

$ code-push deployment history projectName Staging

4858美高梅 32image

对1.0.0版本的运用怎样发表第①个、第n个更新包

操作步骤和上边公布第一个立异包流程一样,大家任然先须求打出bundle包,将转变的bundle文件和财富文件拖到工程中,然后再将bundle公布到CodePush

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

$ code-push release-react iOSRNHybrid ios --t 1.0.0 --dev false --d Production --des "这是第二个更新包" --m true
  • 当大家在翻云覆雨更新包在此之前,大家需求先将JS代码打包成bundle,然后拖拽到项目中,打包以前我们供给先自个儿树立输出bundle的文书夹bundle -> ios,打bundle命令如下:

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

4858美高梅 33image

  • 表露更新包命令中的 -- t
    对应的参数是和大家项目中的版本号同样的,这些不用误精通为是更新包的版本号,例如项目中的版本号为1.0.0
    那时若是大家必要对这一个1.0.0
    版本的体系展开第二回热更新,那么命令中的 -- t
    也为1.0.0,第②回热更新任然为1.0.0

  • 类型的版本号需求改为4个人的,暗中认可是两位的,但是CodePush供给肆人数的版本号

  • 公布更新应用时,应用的名目供给求和以前注册过的利用名称相同

4858美高梅 34image

  • 创建应用时,音讯要填写正确

4858美高梅 35image

  • 当执行link,命令卡住不实施时,这时直接按回车键先ignore key即可

4858美高梅 36image

  • 还有最要害的有个别内需专注的,正是包装证书环境一旦能够的,证书不能够报错

  • 小编React Native开源项目OneM【500+
    star】地址(依据公司开发规范搭建框架形成开发)::欢迎小伙伴们
    star
  • 笔者简书主页:蕴含60多篇PRADON开发有关的技巧小说
    欢迎小伙伴们:万般关切多多点赞
  • 小编React Native QQ技术交换群:620792950 欢迎小伙伴进群交换学习
  • 友情提示:在支付中有碰着LANDN相关的技巧难点,欢迎小伙伴加入调换群(620792950),在群里提问、相互交换学习。交换群也定期更新最新的索罗德N学习材质给大家,多谢大家帮忙!

4858美高梅 37QQ群二维码,500+
RAV4N工程师在等你进入哦

Android

下边大家经过如下步骤在Android项目中集成CodePush。
首先步:在类型中安装
react-native-code-push插件,终端进入你的门类根目录然后运维
npm install --save react-native-code-push

其次步:在Android project中装置插件。
CodePush提供了二种艺术:CR-VNPM 和 马努al,本次演示所采纳的是劲客NPM。
运行npm i -g rnpm,来安装RNPM。

在React Native v0.27及以往版本RubiconNPM已经被并入到了 React Native
CL中,就不要求再拓展安装了。

第三步: 运行
rnpm link react-native-code-push。那条命令将会自动帮大家在anroid文件中添加好设置。

4858美高梅 38

react-native-code-push has been successfully linked

在终点运维此命令之后,终端会唤醒让你输入deployment
key,那是您只需将你的deployment Staging
key输入进去即可,假设不输入则直接单击enter跳过即可。

第肆步: 在 android/app/build.gradle文件之中添如下代码:

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"  

下一场在/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')

第五步: 运行 code-push deployment -k ls <appName>4858美高梅 ,取得
布置秘钥。私下认可的计划名是 staging,所以 安插秘钥(deployment key ) 便是staging。
第伍步: 添加配置。当APP运维时大家需求让app向CodePush咨询JS
bundle的所在地点,那样CodePush就能够决定版本。更新
MainApplication.java文件:

public class MainApplication extends Application implements ReactApplication {
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
    @Override
    protected String getJSBundleFile() {
      return CodePush.getJSBundleFile();
    }
    @Override
    protected List<ReactPackage> getPackages() {
      // 3. Instantiate an instance of the CodePush runtime and add it to the list of
      // existing packages, specifying the right deployment key. If you don't already
      // have it, you can run "code-push deployment ls <appName> -k" to retrieve your key.
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
      );
    }
  };
  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

关于deployment-key的设置

在上述代码中我们在开创CodePush实例的时候须求设置3个deployment-key,因为deployment-key分生产环境与测试环境二种,所以建议大家在build.gradle中开始展览设置。在build.gradle中的设置方法如下:

打开android/app/build.gradle文件,找到android { buildTypes {} }然后添加如下代码即可:

android {
    ...
    buildTypes {
        debug {
            ...
            // CodePush updates should not be tested in Debug mode
            ...
        }

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

        release {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
            ...
        }
    }
    ...
}

体验:其余,我们也得以将deployment-key存放在local.properties中:

code_push_key_production=erASzHa1-wTdODdPJDh6DBF2Jwo94JFH08Kvb
code_push_key_staging=mQY75RkFbX6SiZU1kVT1II7OqWst4JFH08Kvb

如图:

4858美高梅 39

local.properties存放codepush-key

接下来在就能够在android/app/build.gradle能够经过上面方式来引用它了:

Properties properties = new Properties()
properties.load(project.rootProject.file('local.properties').newDataInputStream())
android {
    ...
    buildTypes {
        debug {
            ...
            // CodePush updates should not be tested in Debug mode
            ...
        }

        releaseStaging {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"'+properties.getProperty("code_push_key_production")+'"'
            ...
        }

        release {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"'+properties.getProperty("code_push_key_staging")+'"'
            ...
        }
    }
    ...
}

在android/app/build.gradle设置好deployment-key之后呢,大家就可以如此使用了:

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

第七步:修改versionName。
在 android/app/build.gradle中有个
android.defaultConfig.versionName属性,大家需求把 应用版本改成
1.0.0(暗中同意是1.0,但是codepush须要几人数)。

android{
    defaultConfig{
        versionName "1.0.0"
    }
}

从那之后Code Push for Android的SDK已经集成达成。

Android

下边我们透过如下步骤在Android项目中集成CodePush。
率先步:在品种中装置
react-native-code-push插件,终端进入你的连串根目录然后运维
npm install --save react-native-code-push

其次步:在Android project中装置插件。
CodePush提供了二种方法:RubiconNPM 和 马努al,这一次演示所利用的是HavalNPM。
运行npm i -g rnpm,来安装RNPM。

在React Native v0.27及之后版本PRADONPM已经被并入到了 React Native
CL中,就不需求再开始展览设置了。

第三步: 运行
rnpm link react-native-code-push。这条命令将会自动帮大家在anroid文件中添加好设置。

4858美高梅 40

react-native-code-push has been successfully linked

在终极运营此命令之后,终端会唤起让您输入deployment
key,那是您只需将你的deployment Staging
key输入进去即可,假诺不输入则平素单击enter跳过即可。

第伍步: 在 android/app/build.gradle文件之中添如下代码:

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"  

下一场在/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')

第五步: 运行 code-push deployment -k ls <appName>得到铺排秘钥。暗中认可的配置名是 staging,所以 布署秘钥(deployment key ) 正是staging。
第⑥步: 添加配置。当APP运营时大家必要让app向CodePush咨询JS
bundle的所在地点,这样CodePush就足以决定版本。更新
MainApplication.java文件:

public class MainApplication extends Application implements ReactApplication {
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
    @Override
    protected String getJSBundleFile() {
      return CodePush.getJSBundleFile();
    }
    @Override
    protected List<ReactPackage> getPackages() {
      // 3. Instantiate an instance of the CodePush runtime and add it to the list of
      // existing packages, specifying the right deployment key. If you don't already
      // have it, you can run "code-push deployment ls <appName> -k" to retrieve your key.
      return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CodePush("deployment-key-here", MainApplication.this, BuildConfig.DEBUG)
      );
    }
  };
  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

关于deployment-key的设置

在上述代码中大家在开立CodePush实例的时候需求安装3个deployment-key,因为deployment-key分生产条件与测试环境三种,所以提出大家在build.gradle中开始展览安装。在build.gradle中的设置方法如下:

打开android/app/build.gradle文件,找到android { buildTypes {} }接下来添加如下代码即可:

android {
    ...
    buildTypes {
        debug {
            ...
            // CodePush updates should not be tested in Debug mode
            ...
        }

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

        release {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"<INSERT_PRODUCTION_KEY>"'
            ...
        }
    }
    ...
}

体验:其余,大家也得以将deployment-key存放在local.properties中:

code_push_key_production=erASzHa1-wTdODdPJDh6DBF2Jwo94JFH08Kvb
code_push_key_staging=mQY75RkFbX6SiZU1kVT1II7OqWst4JFH08Kvb

如图:

4858美高梅 41

local.properties存放codepush-key

下一场在就足以在android/app/build.gradle能够经过上边格局来引用它了:

Properties properties = new Properties()
properties.load(project.rootProject.file('local.properties').newDataInputStream())
android {
    ...
    buildTypes {
        debug {
            ...
            // CodePush updates should not be tested in Debug mode
            ...
        }

        releaseStaging {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"'+properties.getProperty("code_push_key_production")+'"'
            ...
        }

        release {
            ...
            buildConfigField "String", "CODEPUSH_KEY", '"'+properties.getProperty("code_push_key_staging")+'"'
            ...
        }
    }
    ...
}

在android/app/build.gradle设置好deployment-key之后呢,大家就足以如此使用了:

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

第七步:修改versionName。
在 android/app/build.gradle中有个
android.defaultConfig.versionName属性,大家供给把 应用版本改成
1.0.0(暗中认可是1.0,但是codepush必要2位数)。

android{
    defaultConfig{
        versionName "1.0.0"
    }
}

迄今甘休Code Push for Android的SDK已经济合营并完毕。

iOS

CodePush官方提供ENCORENPM、CocoaPods与手动两种在iOS项目中集成CodePush的法门,接下去本身就以兰德TucsonNPM的章程来教学一下怎么样在iOS项目中集成CodePush。

率先步:在项目中安装react-native-code-push插件,终端进入你的连串根目录然后运转

npm install --save react-native-code-push

第二步: 运行
rnpm link react-native-code-push。那条命令将会活动帮大家在ios中添加好设置。

在极限运行此命令之后,终端会提醒让你输入deployment
key,那是您只需将你的deployment Staging
key输入进去即可,即使不输入则直接单击enter跳过即可。

关于deployment-key的设置

在大家想CodePush注册App的时候,CodePush会给我们多少个deployment-key分别是在生产条件与测试环境时选取的,我们可以透过如下步骤来安装deployment-key。

1.用Xcode 打开项目 ➜ Xcode的品类导航视图中的PROJECT下抉择你的项目 ➜
采取Info页签 ➜ 在Configurations节点下单击 + 按钮 ➜
选取Duplicate "Release ➜ 输入Staging(名称可以自定义);

4858美高梅 42

Duplicate-Release-Staging.png

2.然后选用Build Settings页签 ➜ 单击 +
按钮然后接纳丰富User-Defined Setting

4858美高梅 43

添加User-Defined-Setting

3.然后输入CODEPUSH_KEY(名称能够自定义)

4858美高梅 44

设置Staging deployment key

提示:你能够透过code-push deployment ls <APP_NAME> -k一声令下来查阅deployment
key。

4.打开
Info.plist文件,在CodePushDeploymentKey列的Value中输入$(CODEPUSH_KEY)

4858美高梅 45

引用CODEPUSH_KEY

到近期截至,iOS的设置已经到位了,和在Android上的合一相比较是还是不是差不离了累累吗。

iOS

CodePush官方提供TiguanNPM、CocoaPods与手动二种在iOS项目中集成CodePush的办法,接下去本人就以avancierNPM的点子来教学一下什么样在iOS项目中集成CodePush。

率先步:在项目中装置react-native-code-push插件,终端进入你的档次根目录然后运行

npm install --save react-native-code-push

第二步: 运行
rnpm link react-native-code-push。那条命令将会自行帮大家在ios中添加好设置。

在终点运转此命令之后,终端会提醒让你输入deployment
key,那是您只需将你的deployment Staging
key输入进去即可,若是不输入则直接单击enter跳过即可。

关于deployment-key的设置

在大家想CodePush注册App的时候,CodePush会给大家两个deployment-key分别是在生养条件与测试环境时选择的,大家可以透过如下步骤来安装deployment-key。

1.用Xcode 打开项目 ➜ Xcode的体系导航视图中的PROJECT下抉择你的类型 ➜
选取Info页签 ➜ 在Configurations节点下单击 + 按钮 ➜
接纳Duplicate "Release ➜ 输入Staging(名称能够自定义);

4858美高梅 46

Duplicate-Release-Staging.png

2.然后选拔Build Settings页签 ➜ 单击 +
按钮然后采取丰富User-Defined Setting

4858美高梅 47

添加User-Defined-Setting

3.然后输入CODEPUSH_KEY(名称能够自定义)

4858美高梅 48

设置Staging deployment key

提醒:你可以透过code-push deployment ls <APP_NAME> -k命令来查看deployment
key。

4.打开
Info.plist文件,在CodePushDeploymentKey列的Value中输入$(CODEPUSH_KEY)

4858美高梅 49

引用CODEPUSH_KEY

到方今甘休,iOS的安装已经完毕了,和在Android上的并轨相比较是否简约了累累吗。

动用CodePush进行热更新

采纳CodePush实行热更新

设置更新策略

在选用CodePush更新你的施用在此以前必要,先配备一下创新控制策略,即:

  • 什么样时候检查更新?(在APP运营的时候?在安装页面添加三个反省更新按钮?)
  • 如何时候能够立异,怎么样将更新显示给终端用户?

最不难易行的点子是在根component中开始展览上述政策控制。

  1. 在 js中加载 CodePush模块:
    import codePush from 'react-native-code-push'
    2.在 componentDidMount中调用 sync方法,后台请求更新
    codePush.sync()

假设得以开展更新,CodePush会在后台静默地将革新下载到本地,等待APP下一回运转的时候利用立异,以担保用户观察的是最新版本。
若果更新是强制性的,更新文件下载好以后会马上展开立异。
要是您希望更及时的获得更新,能够在历次APP从后台进入前台的时候去主动的反省更新:
在运用的根component的componentDidMount中添加如下代码:

AppState.addEventListener("change", (newState) => {
    newState === "active" && codePush.sync();
});

设置更新策略

在应用CodePush更新你的利用在此之前必要,先配备一下更新控制策略,即:

  • 何以时等候检查查更新?(在APP运行的时候?在装置页面添加一个反省更新按钮?)
  • 怎么时候能够立异,怎么着将履新展现给终端用户?

最简易的艺术是在根component中展开上述政策控制。

  1. 在 js中加载 CodePush模块:
    import codePush from 'react-native-code-push'
    2.在 componentDidMount中调用 sync办法,后台请求更新
    codePush.sync()

万一能够展开立异,CodePush会在后台静默地将履新下载到本地,等待APP下一次开发银行的时候使用创新,以保障用户看到的是时髦版本。
要是更新是强制性的,更新文件下载好之后会立时进行更新。
即使你期望更及时的获取创新,能够在每便APP从后台进入前台的时候去主动的自小编批评更新:
在应用的根component的componentDidMount中添加如下代码:

AppState.addEventListener("change", (newState) => {
    newState === "active" && codePush.sync();
});

宣布更新

CodePush支持二种宣布更新的法子,一种是因而code-push release-react简化情势,此外一种是经过code-push release的复杂性方法。

率先种办法:通过code-push release-react公告更新

那种格局将打包与发布多个指令合两为一,能够说大大简化了我们的操作流程,提议大家Dolly用那种措施来公布更新。

指令格式:

code-push release-react <appName> <platform>

eg:

code-push release-react MyApp-iOS ios
code-push release-react MyApp-Android android

再来个更高级的:

code-push release-react MyApp-iOS ios  --t 1.0.0 --dev false --d Production --des "1.优化操作流程" --m true

里头参数–t为二进制(.ipa与apk)安装包的的本子;–dev为是还是不是启用开发者格局(默许为false);–d是要公布更新的环境分Production与Staging(默许为Staging);–des为立异表达;–m
是胁迫更新。

关于code-push release-react越来越多可选的参数,能够在终极输入code-push release-react展开查看。

除此以外,大家能够透过code-push deployment ls <appName>来查阅发表详情与此次改进的设置意况。

其次中艺术:通过code-push release表露更新

code-push release发表更新呢大家先是供给将js与图片能源实行打包成
bundle。

通告更新

CodePush帮忙三种公布更新的办法,一种是经过code-push release-react简化情势,别的一种是由此code-push release的错综复杂方法。

第三种方式:通过code-push release-react颁发更新

那种方法将包裹与发表八个指令融为一炉,能够说大大简化了大家的操作流程,建议我们多利用这种措施来公布更新。

一声令下格式:

code-push release-react <appName> <platform>

eg:

code-push release-react MyApp-iOS ios
code-push release-react MyApp-Android android

再来个更高级的:

code-push release-react MyApp-iOS ios  --t 1.0.0 --dev false --d Production --des "1.优化操作流程" --m true

个中参数–t为二进制(.ipa与apk)安装包的的版本;–dev为是或不是启用开发者格局(暗许为false);–d是要颁发更新的环境分Production与Staging(暗中认可为Staging);–des为创新表达;–m
是威迫更新。

关于code-push release-react越来越多可选的参数,能够在顶峰输入code-push release-react拓展查看。

其余,大家能够通过code-push deployment ls <appName>来查阅发表详情与本次立异的安装景况。

其次中艺术:通过code-push release发表更新

code-push release揭橥更新呢大家率先须要将js与图片能源开展打包成
bundle。

生成bundle

颁发更新此前,必要先把 js打包成 bundle,如:

先是步: 在 工程目录里面新增 bundles文件:mkdir bundles

第1步: 运营命令打包
react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试
eg:
react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false

4858美高梅 50

生成bundle

亟需注意的是:

  • 忽略了能源输出是因为 输出财富文件后,会把bundle文件覆盖了。
  • 输出的bundle文件名不叫其余,而是 index.android.bundle,是因为
    在debug方式下,工程读取的bundle正是名叫 index.android.bundle。
  • 阳台能够接纳 android 或许 ios。

生成bundle

公布更新从前,供给先把 js打包成 bundle,如:

首先步: 在 工程目录里面新增 bundles文件:mkdir bundles

其次步: 运营命令打包
react-native bundle --platform 平台 --entry-file 启动文件 --bundle-output 打包js输出文件 --assets-dest 资源输出目录 --dev 是否调试
eg:
react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false

4858美高梅 51

生成bundle

亟需留意的是:

  • 不经意了能源输出是因为 输出能源文件后,会把bundle文件覆盖了。
  • 出口的bundle文件名不叫其余,而是 index.android.bundle,是因为
    在debug形式下,工程读取的bundle正是名叫 index.android.bundle。
  • 平台可以挑选 android 可能 ios。

揭橥更新

打包bundle停止后,就足以因而CodePush发布更新了。在终极输入
code-push release <应用名称> <Bundles所在目录> <对应的应用版本> --deploymentName: 更新环境 --description: 更新描述 --mandatory: 是否强制更新
eg:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.支持文章缓存。" --mandatory true

4858美高梅 52

推送更新到CodePush

注意:

  1. CodePush暗中同意是翻新 staging 环境的,要是是staging,则不须求填写
    deploymentName。
  2. 如若有 mandatory 则Code Push会依照mandatory
    是true或false来决定应用是还是不是强制更新。暗许情况下mandatory为false即不强制更新。
  3. 相应的利用版本(targetBinaryVersion)是指当前app的本子(对应build.gradle中设置的versionName
    “1.0.6”),也正是说此次更新的js/images对应的是app的不得了版本。不要将其掌握为本次js更新的版本。
    如客户端版本是
    1.0.6,那么我们对1.0.6的客户端更新js/images,targetBinaryVersion填的正是1.0.6。
  4. 对于对某些应用版本进行反复立异的场地,CodePush会检查每便上传的
    bundle,倘若在该版本下如1.0.6曾经存在与本次上传完全一样的bundle(对应多个版本有多个bundle的md5通通等同),那么CodePush会拒绝此次立异。
    如图:
    4858美高梅 53
    对应二个本子有七个bundle的md5截然一致

于是一旦我们要对某二个选拔版本举行反复创新,只须求上传与上次差别的bundle/images即可。如:
eg:
对1.0.6的本子实行第3回革新:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.支持文章缓存。" --mandatory true
对1.0.6的本子实行第②次立异:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.新添加收藏功能。" --mandatory true

  1. 在极限输入 code-push deployment history <appName> Staging
    能够看到Staging版本更新的年月、描述等等属性。
    eg:
    code-push release Equipment ./bundles 1.0.1

上边大家运维先期安装好的应用,看有啥影响:

4858美高梅 54

提醒更新

动用运行以后,从CodePush服务器询问更新,并下载到本地,下载好现在,提示用户进行革新。那就是CodePush用于热更新的万事经过。

越来越多安顿APP相关命令

  • code-push deployment add <appName> 部署
  • code-push deployment rename <appName> 重命名
  • code-push deployment rm <appName> 删除安顿
  • code-push deployment ls <appName> 列出利用的配备情形
  • code-push deployment ls <appName> -k 查看安排的key
  • code-push deployment history <appName> <deploymentNmae>
    查看历史版本(Production 或然 Staging)

揭露更新

打包bundle结束后,就能够透过CodePush公布更新了。在终点输入
code-push release <应用名称> <Bundles所在目录> <对应的应用版本> --deploymentName: 更新环境 --description: 更新描述 --mandatory: 是否强制更新
eg:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.支持文章缓存。" --mandatory true

4858美高梅 55

推送更新到CodePush

注意:

  1. CodePush暗许是翻新 staging 环境的,借使是staging,则不要求填写
    deploymentName。
  2. 一经有 mandatory 则Code Push会依据mandatory
    是true或false来控制应用是或不是强制更新。私下认可情形下mandatory为false即不强制更新。
  3. 相应的使用版本(targetBinaryVersion)是指当前app的本子(对应build.gradle中安装的versionName
    “1.0.6”),也便是说这一次更新的js/images对应的是app的丰富版本。不要将其知道为此次js更新的版本。
    如客户端版本是
    1.0.6,那么大家对1.0.6的客户端更新js/images,targetBinaryVersion填的就是1.0.6。
  4. 对于对某些应用版本进行数十次更新的情景,CodePush会检查每一趟上传的
    bundle,如若在该版本下如1.0.6一度存在与这一次上传完全平等的bundle(对应二个版本有多个bundle的md5完全相同),那么CodePush会拒绝本次更新。
    如图:
    4858美高梅 56
    对应二个本子有四个bundle的md5一心相同

由此假诺大家要对某二个使用版本举行数十一遍翻新,只须求上传与上次不等的bundle/images即可。如:
eg:
对1.0.6的本子举行第③回立异:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.支持文章缓存。" --mandatory true
对1.0.6的版本实行第②遍立异:
code-push release GitHubPopular ./bundles/index.android.bundle 1.0.6 --deploymentName Production --description "1.新添加收藏功能。" --mandatory true

  1. 在顶峰输入 code-push deployment history <appName> Staging
    能够看出Staging版本更新的时日、描述等等属性。
    eg:
    code-push release Equipment ./bundles 1.0.1

上边大家运转先期安装好的选取,看有啥反应:

4858美高梅 57

提醒更新

使用运转未来,从CodePush服务器询问更新,并下载到本地,下载好今后,提醒用户进行更新。那正是CodePush用于热更新的满贯经过。

越来越多布置APP相关命令

  • code-push deployment add <appName> 部署
  • code-push deployment rename <appName> 重命名
  • code-push deployment rm <appName> 删除部署
  • code-push deployment ls <appName> 列出利用的计划景况
  • code-push deployment ls <appName> -k 查看安顿的key
  • code-push deployment history <appName> <deploymentNmae>
    查看历史版本(Production 也许 Staging)

调节技巧

假使您用模拟器举办调节和测试CodePush,在暗中认可意况下是不或许直达调节效果的,因为在支付环境下装在模拟器上的React
Native应用每一次运转时都会从NodeJS服务器上收获最新的bundle,所以还没等CodePush从服务器将更新包下载下来时,APP就已经从NodeJS服务器完毕了履新。

Android

为回避那个难点在Android能够将开发条件的调剂地址改为3个不可用的地方,如下图:

4858美高梅 58

解决NodeJS对CodePush的影响

诸如此类APP就不可能连接受NodeJS服务器了,自然也就无法从NodeJS服务器下载bundle实行更新了,它也只能乖乖的等候从CodePush服务器下载更新包举办翻新了。

iOS

在iOS中大家需求上文中讲到的生成bundle,将bundle包与相应的图样能源拖到iOS项目中如图:

4858美高梅 59

导入bundle到xcode

下一场呢,大家需求在AppDelegate.m中开始展览如下修改:

//#ifdef DEBUG
//    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
//#else
    jsCodeLocation = [CodePush bundleURL];
//#endif

让React Native通过CodePush去获取bundle包即可。

调剂技巧

设若你用模拟器进行调节CodePush,在暗许景况下是无能为力直达调节效果的,因为在支付环境下装在模拟器上的React
Native应用每趟运维时都会从NodeJS服务器上获得最新的bundle,所以还没等CodePush从服务器将更新包下载下来时,APP就已经从NodeJS服务器完结了履新。

Android

为逃避那么些题目在Android能够将开发环境的调试地址改为一个不可用的地方,如下图:

4858美高梅 60

解决NodeJS对CodePush的影响

这样APP就不可能连接受NodeJS服务器了,自然也就不可能从NodeJS服务器下载bundle举办立异了,它也不得不乖乖的等待从CodePush服务器下载更新包进行更新了。

iOS

在iOS中大家需求上文中讲到的生成bundle,将bundle包与相应的图样财富拖到iOS项目中如图:

4858美高梅 61

导入bundle到xcode

下一场呢,大家供给在AppDelegate.m中举行如下修改:

//#ifdef DEBUG
//    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
//#else
    jsCodeLocation = [CodePush bundleURL];
//#endif

让React Native通过CodePush去获取bundle包即可。

JavaScript API Reference

  • allowRestart
  • checkForUpdate
  • disallowRestart
  • getUpdateMetadata
  • notifyAppReady
  • restartApp
  • sync

实际我们得以将这几个API分为两类,一类是半自动格局,一类是手动形式。

JavaScript API Reference

  • allowRestart
  • checkForUpdate
  • disallowRestart
  • getUpdateMetadata
  • notifyAppReady
  • restartApp
  • sync

事实上大家能够将这么些API分为两类,一类是机动形式,一类是手动方式。

自行方式

sync为全自动格局,调用此措施CodePush会帮你成功一多级的操作。别的方法都以在手动方式下使用的。
codePush.sync
codePush.sync(options: Object, syncStatusChangeCallback: function(syncStatus: Number), downloadProgressCallback: function(progress: DownloadProgress)): Promise<Number>;
由此调用该方法CodePush会帮大家机关实现检查更新,下载,安装等一种类操作。除非大家须要自定义UI表现,不然直接用那个艺术就能够了。
sync方法,提供了之类属性以允许你定制sync方法的默许行为

  • deploymentKey (String):
    铺排key,钦赐你要询问更新的布局秘钥,默许景况下该值来自于Info.plist(Ios)和米娅nActivity.java(Android)文件,你可以经过设置该属性来动态查询不一样配置key下的创新。
  • installMode (codePush.InstallMode):
    安装情势,用在向CodePush推送更新风尚未设置强制更新(mandatory为true)的事态下,暗中同意codePush.InstallMode.ON_NEXT_RESTAXC90T即下一遍开发银行的时候安装。
  • mandatoryInstallMode
    (codePush.InstallMode):强制更新,默许codePush.InstallMode.IMMEDIATE。
  • minimumBackgroundDuration
    (Number):该属性用于内定app处于后台多少秒才开始展览重启已形成更新。暗许为0。该属性只在installModeInstallMode.ON_NEXT_RESUME动静下有效。
  • updateDialog (UpdateDialogOptions)
    :可选的,更新的对话框,私下认可是null,包括以下属性

    • appendReleaseDescription (Boolean) –
      是不是出示更新description,暗中认可false
    • descriptionPrefix (String) – 更新表达的前缀。 默许是”
      Description: “
    • mandatory孔蒂nueButtonLabel (String) – 强制更新的按钮文字. 默认to “Continue”.
    • mandatoryUpdateMessage (String) – 强制更新时,更新通告. Defaults
      to “An update is available that must be installed.”.
    • optionalIgnoreButtonLabel (String) – 非强制更新时,撤消按钮文字.
      Defaults to “Ignore”.
    • optionalInstallButtonLabel (String) – 非强制更新时,确认文字.
      Defaults to “Install”.
    • optionalUpdateMessage (String) – 非强制更新时,更新通告.
      Defaults to “An update is available. Would you like to install
      it?”.
    • title (String) – 要显示的翻新文告的题目. Defaults to “Update
      available”.

eg:

codePush.sync({
      updateDialog: {
        appendReleaseDescription: true,
        descriptionPrefix:'\n\n更新内容:\n',
        title:'更新',
        mandatoryUpdateMessage:'',
        mandatoryContinueButtonLabel:'更新',
      },
      mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
      deploymentKey: CODE_PUSH_PRODUCTION_KEY,
    });

自动情势

sync为电动格局,调用此格局CodePush会帮您做到一多元的操作。其余措施都以在手动模式下使用的。
codePush.sync
codePush.sync(options: Object, syncStatusChangeCallback: function(syncStatus: Number), downloadProgressCallback: function(progress: DownloadProgress)): Promise<Number>;
通过调用该方法CodePush会帮大家机关完毕检查更新,下载,安装等一多级操作。除非大家须求自定义UI表现,不然直接用那么些方式就能够了。
sync方法,提供了之类属性以允许你定制sync方法的私下认可行为

  • deploymentKey (String):
    安顿key,钦点你要询问更新的配置秘钥,暗中同意情状下该值来自于Info.plist(Ios)和MianActivity.java(Android)文件,你能够因而设置该属性来动态查询区别配置key下的更新。
  • installMode (codePush.InstallMode):
    安装格局,用在向CodePush推送更新时从没设置强制更新(mandatory为true)的意况下,私下认可codePush.InstallMode.ON_NEXT_RESTASportageT即下2次开发银行的时候安装。
  • mandatoryInstallMode
    (codePush.InstallMode):强制更新,私下认可codePush.InstallMode.IMMEDIATE。
  • minimumBackgroundDuration
    (Number):该属性用于内定app处于后台多少秒才开始展览重启已成功更新。暗中同意为0。该属性只在installModeInstallMode.ON_NEXT_RESUME情形下有效。
  • updateDialog (UpdateDialogOptions)
    :可选的,更新的对话框,暗中认可是null,包括以下属性

    • appendReleaseDescription (Boolean) –
      是或不是出示更新description,暗中同意false
    • descriptionPrefix (String) – 更新表达的前缀。 私下认可是”
      Description: “
    • mandatoryContinueButtonLabel (String) – 强制更新的按钮文字. 默许to “Continue”.
    • mandatoryUpdateMessage (String) – 强制更新时,更新公告. Defaults
      to “An update is available that must be installed.”.
    • optionalIgnoreButtonLabel (String) – 非强制更新时,撤废按钮文字.
      Defaults to “Ignore”.
    • optionalInstallButtonLabel (String) – 非强制更新时,确认文字.
      Defaults to “Install”.
    • optionalUpdateMessage (String) – 非强制更新时,更新通告.
      Defaults to “An update is available. Would you like to install
      it?”.
    • title (String) – 要来得的换代公告的标题. Defaults to “Update
      available”.

eg:

codePush.sync({
      updateDialog: {
        appendReleaseDescription: true,
        descriptionPrefix:'\n\n更新内容:\n',
        title:'更新',
        mandatoryUpdateMessage:'',
        mandatoryContinueButtonLabel:'更新',
      },
      mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,
      deploymentKey: CODE_PUSH_PRODUCTION_KEY,
    });

手动形式

codePush.allowRestart

codePush.allowRestart(): void;
同意再度开动应用以完毕更新。
假使2个CodePush更新将要产生并且供给重启应用(e.g.设置了InstallMode.IMMEDIATE情势),但出于调用了disallowRestart艺术而造成APP无法透过重启来形成换代,
能够调用此办法来扫除disallowRestart限制。
但在如下三种情景下,CodePush将不会马上重启应用:

  1. 自上2次disallowRestart被调用,没有新的翻新。
  2. 有更新,但installModeInstallMode.ON_NEXT_RESTART的情况下。
  3. 有更新,但installModeInstallMode.ON_NEXT_RESUME,并且程序一贯处在前台,并不曾从后台切换成前台的状态下。
  4. 自从上次disallowRestart被调用,没有再调用restartApp

codePush.checkForUpdate

codePush.checkForUpdate(deploymentKey: String = null): Promise<RemotePackage>;
向CodePush服务器询问是不是有立异。
该办法再次回到Promise,有如下三种值:

  • null 没有更新
    常见有如下意况导致RemotePackage为null:

    1. 此时此刻APP版本下没有配置新的翻新版本。相当于说没有想CodePush服务器推送基于当前版本的关于立异。
    2. CodePush上的立异和用户如今所设置的APP版本不包容。也正是说CodePush服务器上有更新,但该更新对应的APP版本和用户安装的眼下版本不对应。
    3. 最近APP已将安装了新星的更新。
    4. 安排在CodePush上可用于当前APP版本的换代被标记成了不可用。
    5. 配备在CodePush上可用于当前APP版本的换代是”active
      rollout”状态,并且当前的装备不在有资格更新的比重的设施之内。
  • A RemotePackage instance
    有立异可供下载。

eg:

codePush.checkForUpdate()
.then((update) => {
    if (!update) {
        console.log("The app is up to date!");
    } else {
        console.log("An update is available! Should we download it?");
    }
});  

codePush.disallowRestart

codePush.disallowRestart(): void;
差异意立刻重启用于以成就更新。
eg:

class OnboardingProcess extends Component {
    ...

    componentWillMount() {
        // Ensure that any CodePush updates which are
        // synchronized in the background can't trigger
        // a restart while this component is mounted.
        codePush.disallowRestart();
    }

    componentWillUnmount() {
        // Reallow restarts, and optionally trigger
        // a restart if one was currently pending.
        codePush.allowRestart();
    }

    ...
}

codePush.getUpdateMetadata
codePush.getUpdateMetadata(updateState: UpdateState = UpdateState.RUNNING): Promise<LocalPackage>;
得到当前已安装更新的元数据(描述、安装时间、大小等)。
eg:

// Check if there is currently a CodePush update running, and if
// so, register it with the HockeyApp SDK (https://github.com/slowpath/react-native-hockeyapp)
// so that crash reports will correctly display the JS bundle version the user was running.
codePush.getUpdateMetadata().then((update) => {
    if (update) {
        hockeyApp.addMetadata({ CodePushRelease: update.label });
    }
});

// Check to see if there is still an update pending.
codePush.getUpdateMetadata(UpdateState.PENDING).then((update) => {
    if (update) {
        // There's a pending update, do we want to force a restart?
    }
});

codePush.notifyAppReady
codePush.notifyAppReady(): Promise<void>;
照会CodePush,1个翻新安装好了。当你检查并安装更新,(比如没有采用sync方法去handle的时候),那些方法必须被调用。不然CodePush会认为update失败,并rollback当前版本,在app重启时。
当使用sync主意时,不必要调用本办法,因为sync会自行调用。

codePush.restartApp
codePush.restartApp(onlyIfUpdateIsPending: Boolean = false): void;
当即重启app。
当以下意况时,这些点子是很有用的:

  1. app 当 调用 syncLocalPackage.install 方法时,指定的
    install modeON_NEXT_RESTARTON_NEXT_RESUME时
    那二种处境都是当app重启或resume时,更新内容才能被看到。
  2. 在一定情景下,如用户从别的页面重返到APP的首页时,这么些时候调用此办法成功过更新对用户来说不是特地的斐然。因为强制重启,能立即显得更新内容。

手动情势

codePush.allowRestart

codePush.allowRestart(): void;
同意再度起动应用以达成更新。
要是一个CodePush更新将要产生并且需求重启应用(e.g.设置了InstallMode.IMMEDIATE格局),但由于调用了disallowRestart主意而致使APP不可能透过重启来完结换代,
能够调用此办法来祛除disallowRestart限制。
但在如下各类情景下,CodePush将不会立时重启应用:

  1. 自上一回disallowRestart被调用,没有新的更新。
  2. 有更新,但installModeInstallMode.ON_NEXT_RESTART的事态下。
  3. 有更新,但installModeInstallMode.ON_NEXT_RESUME,并且程序一直处于前台,并从未从后台切换来前台的景况下。
  4. 自打上次disallowRestart被调用,没有再调用restartApp

codePush.checkForUpdate

codePush.checkForUpdate(deploymentKey: String = null): Promise<RemotePackage>;
向CodePush服务器询问是不是有立异。
该办法再次来到Promise,有如下二种值:

  • null 没有立异
    常常有如下情况导致RemotePackage为null:

    1. 现阶段APP版本下没有布署新的更新版本。也等于说没有想CodePush服务器推送基于当前版本的关于立异。
    2. CodePush上的翻新和用户近来所设置的APP版本区别盟。也便是说CodePush服务器上有更新,但该更新对应的APP版本和用户安装的脚下版本不对应。
    3. 眼下APP已将安装了新型的换代。
    4. 配置在CodePush上可用于当前APP版本的立异被标记成了不可用。
    5. 布局在CodePush上可用于当前APP版本的革新是”active
      rollout”状态,并且当前的配备不在有身份更新的比例的装备之内。
  • A RemotePackage instance
    有更新可供下载。

eg:

codePush.checkForUpdate()
.then((update) => {
    if (!update) {
        console.log("The app is up to date!");
    } else {
        console.log("An update is available! Should we download it?");
    }
});  

codePush.disallowRestart

codePush.disallowRestart(): void;
区别意马上重启用于以成功换代。
eg:

class OnboardingProcess extends Component {
    ...

    componentWillMount() {
        // Ensure that any CodePush updates which are
        // synchronized in the background can't trigger
        // a restart while this component is mounted.
        codePush.disallowRestart();
    }

    componentWillUnmount() {
        // Reallow restarts, and optionally trigger
        // a restart if one was currently pending.
        codePush.allowRestart();
    }

    ...
}

codePush.getUpdateMetadata
codePush.getUpdateMetadata(updateState: UpdateState = UpdateState.RUNNING): Promise<LocalPackage>;
收获当前已设置更新的元数据(描述、安装时间、大小等)。
eg:

// Check if there is currently a CodePush update running, and if
// so, register it with the HockeyApp SDK (https://github.com/slowpath/react-native-hockeyapp)
// so that crash reports will correctly display the JS bundle version the user was running.
codePush.getUpdateMetadata().then((update) => {
    if (update) {
        hockeyApp.addMetadata({ CodePushRelease: update.label });
    }
});

// Check to see if there is still an update pending.
codePush.getUpdateMetadata(UpdateState.PENDING).then((update) => {
    if (update) {
        // There's a pending update, do we want to force a restart?
    }
});

codePush.notifyAppReady
codePush.notifyAppReady(): Promise<void>;
文告CodePush,2个翻新安装好了。当您检查并设置更新,(比如没有利用sync方法去handle的时候),这么些办法必须被调用。否则CodePush会认为update失利,并rollback当前版本,在app重启时。
当使用sync情势时,不必要调用本办法,因为sync会活动调用。

codePush.restartApp
codePush.restartApp(onlyIfUpdateIsPending: Boolean = false): void;
马上重启app。
当以下情状时,那几个措施是很有用的:

  1. app 当 调用 syncLocalPackage.install 方法时,指定的
    install modeON_NEXT_RESTARTON_NEXT_RESUME时
    那二种境况都以当app重启或resume时,更新内容才能被看到。
  2. 在特定情景下,如用户从任何页面再次来到到APP的首页时,这么些时候调用此方法成功过更新对用户来说不是特意的显眼。因为强制重启,能即时显得更新内容。

总结

上文已经介绍了CodePush在动态更新方面的一对风味,但CodePush也设有着一些败笔:

  1. 服务器在国外,在国内访问,网速不是很精美。
  2. 其晋级服务器端程序并不开源的,中期微软会不会对其收费依旧个未知数。
    假诺在并未更好的动态更新React
    Native应用的方案的情况下,并且那些题材还在你的收受范围之内的话,那么CodePush能够用作动态更新React
    Native应用的一种选取。
    前期会向我们享受不使用CodePush,自身搭建服务器并促成React
    Native应用的动态更新相关的方案。

参考:
http://microsoft.github.io/code-push/docs/getting-started.html
https://github.com/Microsoft/react-native-code-push

总结

上文已经介绍了CodePush在动态更新方面包车型客车部分特征,但CodePush也存在着部分欠缺:

  1. 服务器在国外,在境内访问,网速不是很精粹。
  2. 其升高服务器端程序并不开源的,中期微软会不会对其收费依旧个未知数。
    只要在并未更好的动态更新React
    Native应用的方案的气象下,并且那个标题还在您的承受范围以内的话,那么CodePush能够视作动态更新React
    Native应用的一种选用。
    中期会向大家享受不应用CodePush,本人搭建服务器并达成React
    Native应用的动态更新相关的方案。

参考:
http://microsoft.github.io/code-push/docs/getting-started.html
https://github.com/Microsoft/react-native-code-push

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有