react-native热更新之codepush使用

注：本片文章笔者用的是linux系统,而且是在自己搭建的codepush-server服务端下做的测试,本文不对服务端搭建进行讲解

服务端搭建http://blog.csdn.net/zhang_junhui/article/details/76854383

1. 安装code-push-cli

sudo npm install -g code-push-cli(执行npm命令经常被墙 也可以用yarn命令来替代npm命令,这里你可以执行 yarn add code-push-cli,当然需要配置yarn源

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global)

2.登录服务端

code-push login http://xxxxxx（ip+端口号）

输入账号和密码(服务端设置)登录后点击按钮 获取token 并复制token到命令行中，并回车确认

3.注册应用

项目根目录下执行

code-push app add xxx(应用名称)-android android react-native

会生成一下KEY值

┌────────────┬───────────────────────────────────────┐

│ Name                    │ Deployment Key                                                                         │

├────────────┼───────────────────────────────────────┤

│ Production             │ hd3tF84jj7Ur02q7cYwHbnjfoGSo4ksvOXqog                           │

├────────────┼───────────────────────────────────────┤

│ Staging                  │ 03QbTYJQol85g6PHehDxV86OsVEd4ksvOXqog                    │

4.集成CodePush SDK

1）在项目中安装 react-native-code-push插件，终端进入你的项目根目录然后运行
npm install --save react-native-code-push(执行npm命令经常被墙 也可以用yarn命令来替代npm命令,这里你可以执行 yarn add react-native-code-push)

2）在Android project中安装插件。
运行npm i -g rnpm，来安装RNPM。（在React Native v0.27及以后版本RNPM已经被集成到了 React Native CL中，就不需要再进行安装了。）

3）运行 rnpm link react-native-code-push。这条命令将会自动帮我们在anroid文件中添加好设置， 在 android/app/build.gradle文件中将 versionName”1.0”改为”1.0.0”（codepush版本标记需要三位数）

（运行完第三步 第四、五步会自动生成，如果不生成按照下文配置）

4）在 android/app/build.gradle文件里面添如下代码：

apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"

5）在/android/settings.gradle中添加如下代码:

include ':react-native-code-push'

project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')

6）更新 MainApplication.java文件

import com.microsoft.codepush.react.CodePush;

在getPackages()方法中加上

new CodePush("hd3tF84jj7Ur02q7cYwHbnjfoGSo4ksvOXqog"（deployment key）, MainApplication.this, BuildConfig.DEBUG, "http://10.103.189.80:3000"（服务端ip）)

5.js中检查并更新代码

import React, { Component } from "react";
import {
    AppRegistry,
    Text,
    View,
} from "react-native";

import CodePush from "react-native-code-push";


class codepushtest extends Component {

    componentDidMount() {
        CodePush.sync({
            installMode: CodePush.InstallMode.IMMEDIATE,
            updateDialog: true
        });
    }

    render() {
        return (
            
                版本：1.0.0
                
            
        );
    }
}
let codePushOptions = { checkFrequency: CodePush.CheckFrequency.MANUAL };

codepushtest = CodePush(codePushOptions)(codepushtest);

AppRegistry.registerComponent("codepushtest", () => codepushtest);

6.打包bundle(在项目根目录下新建 .bundles文件夹,生成的bundle文件保存在里面,当然你可以更换自己喜欢的文件夹名字,)

react-native bundle --platform android --entry-file index.android.js --bundle-output .bundles/index.android.bundle --assets-dest .bundles --dev false

7.上传至服务器(codepushtest-android是第三步自己设置的项目名)

code-push release codepushtest-android .bundles 1.0.0 --deploymentName Production  --description "test" --mandatory false

查看历史记录(codepushtest-android是第三步自己设置的项目名)

code-push deployment history codepushtest-android Production

8.修改本地js代码 重复6、7步，打开应用会提示更新

参考：

https://github.com/Microsoft/react-native-code-push/