Nanananananananana.. Pat Man!

    @yz1311/teaset-code-push
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published

    teaset-code-push

    npm version npm version

    原由

    由于react-native-code-push虽然提供了对话框的方式,但是在两端的样式不一,并且无法定制化,所以产生了该库

    功能

    • 支持动态设置每次热更新是否显示对话框(需要修改热更新语句)
    • 包大小、更新内容自定义、下载进度条显示
    • 支持是否强制更新
    • 完全自定义更新对话框
    • 完全typescript支持

    开始

    安装

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

    $ npm i @yz1311/teaset-code-push --save
    
    或者 
    
    $ yarn add @yz1311/teaset-code-push
    

    另外,需要安装

    react-native-webview: 用于展示更新对话框的内容

    基础用法

    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/teaset-code-push';
    
    // 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/teaset-code-push';
    ...
    UpdateView.defaultProps.btnText = '立马更新';
    

    完全自定义对话框

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

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

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

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

    import {CodePushHandler} from '@yz1311/teaset-code-push';
    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 enum 检查频率,默认为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)方法不起作用了,对于部分情况下需要获取这两方面的信息,准备导出这两个事件

    截图

    Install

    npm i @yz1311/teaset-code-push

    DownloadsWeekly Downloads

    51

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    190 kB

    Total Files

    15

    Last publish

    Collaborators

    • yz1311