(react-native)Android集成codepush实现热更新

相关参考链接:
http://www.jianshu.com/p/67de8aa052af
http://www.jianshu.com/p/6e96c6038d80

http://www.jianshu.com/p/28589c0be542

可视化code-push:https://appcenter.ms/

1、安装code-push服务、创建code-push账号(可以参考链接http://www.jianshu.com/p/fa362da953c7

这里记录下相关命令行:
(1)npm install -g code-push-cli 安装codepush
(2)code-push -v 查看版本
(3) code-push register 注册codepush账号
(4) code-push login 登陆
(5) code-push logout 注销
(6) code-push access-key ls 列出登陆的token
(7) code-push access-key rm 删除某个 access-key
以下是操作code-push的基础命令行:
code-push app add 在账号里面添加一个新的app
code-push app remove或者 rm 在账号里移除一个app
code-push app rename 重命名一个存在app
code-push app ls或者list 列出账号下面的所有app
注意:只要在终端输入上面命令行即可查看具体命令的输入,例如


Paste_Image.png

相关例子:
code-push app add TestDemo android react-native 添加一个只限于android的RN应用,应用名为TestDemo
code-push deployment ls TestDemo -k 查询应用名的相关信息

2、配置(android)

1、安装code-push最新版本

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

2、关联code-push

如果你安装了rnpm直接用命令:rnpm link react-native-code-push,如果没有安装先安装npm i -g rnpm,然后再输入rnpm link react-native-code-push,进行关联

3、在MainApplication.java添加CodePush

其中new CodePush里面的第一个字符串就是上面通过 code-push deployment ls 应用名 -k 查询出来的deployment key

//注册ReactPackage
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new RNToastPackage(),
                new CodePush("V2S1zhYo5RlNnEICKZxfW8HWXXa6913c6b5b-51e8-4377-a846-654362cd06f1", MainApplication.this, BuildConfig.DEBUG)
        );
    }

在build.gradle中

   buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            buildConfigField "String", "CODEPUSH_KEY", '"你的deployment-Production key"'
        }
        releaseStaging {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            buildConfigField "String", "CODEPUSH_KEY", '"你的deployment-Staging key"'
        }
    }

然后就可以在AndroidStudio打出相应的apk包进行测试

4、RN端的代码如下:


import React, {PureComponent, Component} from 'react';
import {
    AppRegistry,
    Text,
    View,
    Image,
    Button,
    StyleSheet,
    FlatList,
    TouchableOpacity,
    Dimensions,
    ActivityIndicator
} from 'react-native';
import CodePush from "react-native-code-push"

const {height, width} = Dimensions.get('window');

const codePushOptions = {
    checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
    updateDialog: true,
    installMode: CodePush.InstallMode.IMMEDIATE
};
export default class Root extends Component {

    constructor(props) {
        super(props);

    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    /** Update is downloaded silently, and applied on restart (recommended) */
    sync = () => {
        CodePush.sync();
    }
    /** Update pops a confirmation dialog, and then immediately reboots the app */
    syncImmediate = () => {
        CodePush.sync(
            {
                installMode: CodePush.InstallMode.IMMEDIATE,//启动模式三种:ON_NEXT_RESUME、ON_NEXT_RESTART、IMMEDIATE
                updateDialog: {
                    appendReleaseDescription:true,//是否显示更新description,默认为false
                    descriptionPrefix:'更新内容:\n',//更新说明的前缀。 默认是” Description:  更新内容:
                    mandatoryContinueButtonLabel:"立即更新",//强制更新的按钮文字,默认为continue
                    mandatoryUpdateMessage:"",//- 强制更新时,更新通知. Defaults to “An update is available that must be installed.”.
                    optionalIgnoreButtonLabel: '稍后',//非强制更新时,取消按钮文字,默认是ignore
                    optionalInstallButtonLabel: '后台更新',//非强制更新时,确认文字. Defaults to “Install”
                    optionalUpdateMessage: '有新版本了,是否更新?',//非强制更新时,更新通知. Defaults to “An update is available. Would you like to install it?”.有新版本了,是否更新?
                    title: '更新提示'//要显示的更新通知的标题. Defaults to “Update available”.
                }
            }
        );
    }

    render() {
        // {this.sync}
        return (
            <View style={styles.container}>
                <Text>Hello,热更新啦2017-11-03-18-18</Text>

                <TouchableOpacity onPress={this.syncImmediate}>
                    <Text>检查更新</Text>
                </TouchableOpacity>
                <Image style={styles.image} resizeMode={Image.resizeMode.contain}
                       source={require("./resource/resources/choose.png")}/>
            </View>

        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    image: {
        margin: 30,
        width: 30,
        height: 30,
    },
});
Root = CodePush(codePushOptions)(Root);

5、发布热更新

1、 release-react命令发布更新,例子如下:

code-push release-react CodePushDemo android --deploymentName Staging --description 添加text字样修改 --dev false --bundleName index.android.bundle
其中CodePushDemo 是你创建的应用名

2、 查询应用名的相关信息

code-push deployment ls TestDemo -k

3、查看发布的历史记录

code-push deployment history TestDemo Staging

4、如果在Staging测试没问题了,可以迁移到Production

code-push promote <应用名> Staging Production -r 100%
最后的100%是指覆盖用户,可以先设成20%等其他值

附录一下打包bundle包的命令:
Android:
react-native bundle --entry-file index.android.js --platform android --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res --dev false
Ios:
react-native bundle --entry-file index.ios.js --platform ios --bundle-output ./ios/main.jsbundle --assets-dest ./ios/assets --dev false

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容