(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 getPackages() {
        return Arrays.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 (
            
                Hello,热更新啦2017-11-03-18-18

                
                    检查更新
                
                
            

        )
    }
}
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

你可能感兴趣的:((react-native)Android集成codepush实现热更新)