美文网首页
(react-native)Android集成codepush实

(react-native)Android集成codepush实

作者: Hozan | 来源:发表于2017-11-02 15:07 被阅读215次

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

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

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

相关文章

网友评论

      本文标题:(react-native)Android集成codepush实

      本文链接:https://www.haomeiwen.com/subject/irkdpxtx.html