React Native CodePush 热更新流程（1）
此教程是在Mac 上完成
mysql安装
网络上有很多mysql的安装教程，这里不在赘述，只要记住用户名和密码 就行了，用户名一般是root，密码是你登陆mysql的密码（第一次登录成功后，建议修改个好记的密码）
搭建和配置CodePush热更新服务器
code push的热更新服务器有两种：一种是开源的code-push-server,另一个就是微软的codepush，这个需要注册codepush 账号等等，这里是用第一种方式。
git clone https://github.com/lisong/code-push-server.git
cd code-push-server
yarn //相当于npm install
//配置数据库，code-push-server使用mysql作为数据库
//在code-push-server目录中
./bin/db init --dbhost localhost --dbuser root --dbpassword mysqlpassword// mysqlpassword为安装的mysql的密码
//修改配置文件 code-push-server/config/config.js
db: {
username: process.env.RDS_USERNAME || "root",
password: process.env.RDS_PASSWORD || 'mysqlpassword',//这个是你mysql的密码
database: process.env.DATA_BASE || "codepush",
host: process.env.RDS_HOST || "127.0.0.1",
port: process.env.RDS_PORT || 3306,
dialect: "mysql",
logging: false
}，
local: {
// Binary files storage dir, Do not use tmpdir and it's public download dir.
//storageDir需要自己创建
storageDir: "/Users/nichol/code-push/Sites/storage",
// Binary files download host address which Code Push Server listen to. the files storage in storageDir.
//自己电脑或服务器的ip地址
downloadUrl: "http://youip:3000/download",
// public static download spacename.
public: '/download'
},
jwt: {
// Recommended: 63 random alpha-numeric characters
// Generate using: https://www.grc.com/passwords.htm
//自己通过上面的网址生成
tokenSecret: 'u8zYR4YyhpVTzBVVPBqs8Gcke9lOGfdHpnRn7EETmcYcHQmTzLEJW0AnPdITpgn'
},
common: {
/*
* tryLoginTimes is control login error times to avoid force attack.
* if value is 0, no limit for login auth, it may not safe for account. when it's a number, it means you can
* try that times today. but it need config redis server.
*/
tryLoginTimes: 0,
// CodePush Web(https://github.com/lisong/code-push-web) login address.
//codePushWebUrl: "http://127.0.0.1:3001/login",
// create patch updates's number. default value is 3
diffNums: 3,
// data dir for caclulate diff files. it's optimization.
//自己创建
dataDir: "/Users/nichol/code-push/Sites/storage",
// storageType which is your binary package files store. options value is ("local" | "qiniu" | "s3")
storageType: "local",
// options value is (true | false), when it's true, it will cache updateCheck results in redis.
updateCheckCache: false
}
到这里coder-push-server基本配置已经完成
启动并登录CodePush热更新服务器
启动服务器,在code-push-server目录下
./bin/www
安装一个重要的命令行工具,以后会经常用到的
yarn global add code-push-cli
登录 code-push-server
code-push login http://127.0.0.1:3000 //执行完这个命令 需要输入一个token值
//然后在浏览器中输入http://127.0.0.1:300 输入用户名admin，密码123456 , 然后登录 获取token，复制token ，粘贴到 需要输入token的地方
在服务器端添加应用
code-push app add AwesomeProject-android android //AwesomeProject为自己创建的工程名
code-push app add AwesomeProject-ios ios
可以使用code-push app list 命令查看
配置客户端
在你的RN工程根目录下执行如下命令
yarn add react-native-code-push
react-native link react-native //在andorid中需要一些依赖，这个命令会自动添加依赖
配置android端的MainApplication.java文件
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CodePush(“efJOrJ9Ae9mcKDVUBImsiW3swX8t4ksvOXqog”, getApplicationContext(), BuildConfig.DEBUG,"http://yourip:3000")
);
}
CodePush 构造方法的第一个参数是Deployment Key(请填写自己的key值，我要测试线上版本，所以使用的是Production的deployment key)，这个Deployment Key分为两类Production（生产版本）和Staging（测试版本），通过下列命令可以查看相关key：
code-push deployment list AwesomeProject-android -k
CodePush 构造方法的的第四个参数是热更新的服务器地址，一般是“http://yourip:3000”这个形式的
修改App.js文件，类似如下：
import React, { Component } from 'react';
import {
Text,
View
} from 'react-native';
import CodePush from 'react-native-code-push';
let codePushOptions = {
//设置检查更新的频率
//ON_APP_RESUME APP恢复到前台的时候
//ON_APP_START APP开启的时候
//MANUAL 手动检查
checkFrequency : CodePush.CheckFrequency.ON_APP_RESUME
};
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
//如果有更新的提示
syncImmediate() {
CodePush.sync( {
//安装模式
//ON_NEXT_RESUME 下次恢复到前台时
//ON_NEXT_RESTART 下一次重启时
//IMMEDIATE 马上更新
installMode : CodePush.InstallMode.IMMEDIATE ,
//对话框
updateDialog : {
//是否显示更新描述
appendReleaseDescription : true ,
//更新描述的前缀。 默认为"Description"
descriptionPrefix : "更新内容：" ,
//强制更新按钮文字，默认为continue
mandatoryContinueButtonLabel : "立即更新" ,
//强制更新时的信息. 默认为"An update is available that must be installed."
mandatoryUpdateMessage : "必须更新后才能使用" ,
//非强制更新时，按钮文字,默认为"ignore"
optionalIgnoreButtonLabel : '稍后' ,
//非强制更新时，确认按钮文字. 默认为"Install"
optionalInstallButtonLabel : '后台更新' ,
//非强制更新时，检查到更新的消息文本
optionalUpdateMessage : '有新版本了，是否更新？' ,
//Alert窗口的标题
title : '更新提示'
} ,
} ,
);
}
componentWillMount() {
CodePush.disallowRestart();//页禁止重启
this.syncImmediate(); //开始检查更新
}
componentDidMount() {
CodePush.allowRestart();//在加载完了，允许重启
}
render() {
return (
<View>
<Text>这是测试code push</Text>
</View>
);
}
}
到此客户端相关配置完成
测试Android 线上版本的热更新
将RN工程中的android部分导入的Android Studio中，方便原生代码的开发。配置keystore等，使之能编译出release版本。
在android/app/src/main 目录下 创建一个assets目录（自动生产的bundle会放在这里的）
在RN工程根目录下，执行如下命令：
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
//--entry-file index.js 这个index.js名字根据RN工程根目录下存在的文件确定，有的是存在index.andorid.js的
在android项目部分执行assembleRelease ，生成最终的release版本的apk文件，将这个文件安装到手机中。
修改js文件使之发生改变，在RN工程根目录运行
code-push release-react Awesome-android android -d Production -m true
以上名利是强制更新线上的版本 release-react 默认是发布Staging的版本，所以必须加-d Production，如果验证 Staging版本就不需要-d Production
退出手机的应用，重新进入应用，会看到一个更新提示对话框，点击更细即可
