react-native-qiji-updater

React native应用更新的逻辑及UI的封装

TOC

• Installation
• Usage
• API
• UI组件
• 示例

Installation

Using npm:

npm install --save react-native-qiji-updater

or using yarn:

yarn add react-native-qiji-updater

Usage

import * as Updater from 'react-native-qiji-updater';

API

| Method | Return Type | Description | | ----------------------------------------------------------------- | ------------------- | ---------------- | | init(config:Object) | void | 初始化 | | checkUpdate() | Promise<> | 版本检测(兼容android,ios) | | checkAndroidUpdate() | Promise<> | android版本检测 | | checkIosUpdate() | Promise<> | ios版本检测 |

init(config:Object)

初始化更新参数

Examples

Updater.init({
    checkUrl:'http://127.0.0.1',
    checkSuccess:  (res) => {...},
    checkError: (err) => {...},
    downloadProgress: (res) => {...},
    downloadSuccess: (res) =>{...},
    downloadError: (err) => {...},
    installSuccess: (res) => {...},
    installError: (err) => {...},
    progressModal: this.progressModal.current
});

参数说明

| name | Type | Description |
| ----------------------------------------| ------------------- | ------------------ | | checkUrl | String | 更新检测服务端地址 |
| checkSuccess | Function | 检测成功回调 | | checkError | Function | 检测失败回调 | | downloadProgress | Function | 检测成功回调 | | downloadSuccess | Function | 检测成功回调 | | downloadError | Function | 检测失败回调 | | installSuccess | Function | 安装成功回调 | | installError | Function | 安装失败回调 | | progressModal | UI Component | 下载进度框 |

checkSuccess

Android

//有更新内容
{"data": {"app_id": "com.demo", "app_name": "更新DEMO", "app_url": "http://xxxxxx/xxx.apk", "description": "v1.0.1：新增支付模块", "is_force": false, "title": "更新安装包", "ver": "1.0.1"}, "success": true}
//无更新内容
{"data":false, "success": true}

Name | Type | Description | --------------------|-----------|---------------------------| app_id | String | 应用ID | app_name | String | 应用名称 | app_url | String | 安装包下载地址 | description | String | 更新描述 | is_force | boolean | 是否强制更新 | title | String | 更新提示标题 | ver | String | 版本 |

checkError

Android

{'success' => false, 'msg' => xxxxx];

checkUpdate()

更新检测

Examples

Updater.checkUpdate();

checkAndroidUpdate()

Android更新检测

Examples

Updater.checkAndroidUpdate();

checkIosUpdate()

IOS更新检测

Examples

Updater.checkIosUpdate();

UI组件

ProgressModal

进度提示框

Examples

<Updater.ProgressModal ref={this.refProgressModal} titleBgColor="#f7977a" title="下载安装包"></Updater.ProgressModal>

Props

Name | Default | Type | Description | --------------------|--------------------------------------|----------|---------------------------| title | 文件下载中 | String | 标题 | titleBgColor | #0080ff | String | 标题背景色 | barBgColor | #e0e0e0 | String | 进度条背景色 | barColor | #0080ff | String | 进度条颜色色 | visible | false | boolean | 是否显示 | onClose | 空 | Function | 窗口关闭时的回调 | total | 1 | Number | 总数 | progress | 0 | Number | 当前进度 |

示例

import React, { Component } from 'react';
import { StyleSheet, Button, View, SafeAreaView, Text} from 'react-native';
import * as Updater from 'react-native-qiji-updater';

const Separator = () => {
  return <View style={styles.separator} />;
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 16,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

export default class App extends Component {
  constructor(props) {
    super(props);
    this.refProgressModal = React.createRef();
  }
  componentDidMount() {
    Updater.init({
      progressModal: this.refProgressModal.current
    });
  }

  onUpdate() {
    Updater.checkUpdate();
  }
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Updater.ProgressModal ref={this.refProgressModal} titleBgColor="#f7977a" title="更新下载"></Updater.ProgressModal>
        <View>
          <Text style={styles.title}>
            点击按钮测试更新
          </Text>
          <Button
            title="更新检测"
            onPress={this.onUpdate.bind(this)}
          />
        </View>
        <Separator />
      </SafeAreaView>
    );
  }
}