@yz1311/react-native-state-view
TypeScript icon, indicating that this package has built-in type declarations

0.0.22 • Public • Published

react-native-state-view

npm version npm version

背景

功能

占位组件,根据loading、content、error、empty等状态显示不同的内容

开始

安装

该库是配合react-native-code-push使用的

$ npm i @yz1311/react-native-state-view --save

或者 

$ yarn add @yz1311/react-native-state-view

基础用法

1.在根组件中设置checkFrequencyMANUAL

import codePush from 'react-native-code-push';

let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL};

export default codePush(codePushOptions)(Root);

2.将组件包裹住app.js

import CodePushHandler from '@yz1311/react-native-state-view';

// Decorator用法; 需要 ES7 支持
@CodePushHandler({isDebugMode: false})

或者

//包裹用法
export default CodePushHandler({isDebugMode: false})(App)

进阶用法

显示更新对话框

上述的步骤做完后,虽然可以热更新,但是默认是静默更新,如果需要显示对话框,需要修改热更新的语句(请注意不同操作系统的命令不一样) windows:(参数名称和值名称两侧"改为\""),如下:

code-push release-react test-android android --t 1.0.1 --dev false -d Production --des {\""description\"":\""2019/08/22<br/><br/>1.修复bugs\"",\""isSilent\"":false}

linux、mac:(整个--des的外侧需加单引号'),如下:

code-push release-react test-android android --t 1.0.1 --dev false -d Production --des '{"description":"2019/08/22<br/><br/>1.修复bugs","isSilent":false}'

目前description中的内容在app上面是直接通过展示出来的,所以里面支持html代码,譬如换行直接<br/>即可

跟普通的命令不同的是,现在将description变为一个json字符串,改json中有3个参数

属性 默认值 类型 描述
description string 热更新的描述,跟以前的--des后面的内容一致,该部分的值是放在WebView中展示的,所以可以直接为html代码
isSilent true boolean 是否静默更新,默认为true,如果--des后面的json字符串解析失败或者isSilent字段不设值或者为true,都将会静默更新,只有设置isSilent:true才会显示更新对话框

更改默认对话框部分属性(譬如顶部的图片)

在app的入口处,修改defaultProps即可,支持的属性查看index.d.ts

import {UpdateView} from '@yz1311/react-native-state-view';
...
UpdateView.defaultProps.btnText = '立马更新';

完全自定义对话框

重写CodePushHandler的updateView方法即可,该方法会传递props参数,支持的属性查看index.d.ts

@CodePushHandler({isDebugMode: false,updateView:(props)=><MyCustomComponent />})

根据网络状态来控制是否下载包

譬如只有在wifi状态下才下载安装包

import {CodePushHandler} from '@yz1311/react-native-state-view';
import NetInfo from '@react-native-community/netinfo';

...

@CodePushHandler({
    isDebugMode: false,
    willDownload:(packageInfo)=>{
        let info = await NetInfo.getConnectionInfo();
        return info.type === 'wifi';
    }})

属性

CodePushHandler options

属性 默认值 类型 描述
checkFrequency ON_APP_RESUME ennum 检查频率,默认为resume时更新
isDebugMode false boolean 是否为调试模式
willDownload (packageInfo: myRemotePackage)=>boolean 将要下载事件,返回值,true代表继续更新,false终止更新,默认为true
譬如可以根据网络状态来控制是否更新
newestAlertInfo 已是最新版本 string 当前是最新版本的提示信息
successAlertInfo 安装成功,点击[确定]后App将自动重启,重启后即更新成功! string 下载安装成功后的提示信息
updateView (props)=>Element 替换默认的更新对话框,必须实现IUpdateViewProps相关属性
successBtnText 立即重启APP string 下载安装成功后,按钮的文字
successDelay 5 number //下载成功后,延迟重启的时间(单位:s)

successDelay分为三种情况

1.为null或者undefined,则不会自动重启,必须用户点击按钮才会重启

2.<=0,则安装完成后立即重启

3.>0,则在successBtnText的文字后面追加倒计时,倒计时中途用户可以点击重启,倒计时结束会自动重启

开发计划

  1. 由于更新过程完全是自己处理,官方的状态变更回调和下载进度回调(https://docs.microsoft.com/en-us/appcenter/distribution/codepush/rn-api-ref#code-try-5)方法不起作用了,对于部分情况下需要获取这两方面的信息,准备导出这两个事件

截图

Package Sidebar

Install

npm i @yz1311/react-native-state-view

Weekly Downloads

3

Version

0.0.22

License

MIT

Unpacked Size

103 kB

Total Files

14

Last publish

Collaborators

  • yz1311