准备工作
本人使用code-push-server搭建热更新服务器,code-push-server,基于node.js,在安装code-push-server前,需要安装好:
建议创建CentOS虚拟机,在虚拟机中运行热更新服务,可参考安装CentOS + Node + PM2 + MariaDB(MySQL) + Git的基础环境。
开始搭建
(1)安装code-push-server:
npm install code-push-server@latest -g
(2)初始化数据库
code-push-server-db init --dbhost "127.0.0.1" --dbport "3306" --dbuser "root" --dbpassword "123456" #root、123456替换成自己的用户名和密码
(3)编辑config.js
进入code-push-server的目录(在node.js安装目录下的lib/node_module下),config.js位置在code-push-server/config目录下。
cd /usr/local/nodejs/lib/node_modules/code-push-server/config/
vi config.js
对config.js做出以下修改:
(4)运行并查看
pm2 start code-push-server #启动code-push-server服务
pm2 list #查看运行状况
pm2 log code-push-server #实时查看code-push-server的运行日志
接下来的工作请在React Native开发环境中进行(本人在Windows进行React Native,接下来的工作即在Windows中进行)
(1)安装code-push-cli
npm install code-push-cli@lastest -g
(2)创建code push app
code-push app add <你的应用名> <平台> react-native #应用名建议设为<实际应用名+平台名>
例如:
code-push app add demo-android android react-native
查看已创建的app:
code-push app list
查看已创建app的Deployment Key(后面要用到):
code-push deployment list <应用名> -k
(1)安装react-native-code-push
在React Native App项目目录下运行:
npm install react-native-code-push --save
接下来基于React Native 0.60及以上版本和Android介绍配置过程,其他版本可参考Plugin Installation for React Native lower than 0.60 (Android)
iOS可参考iOS Setup
(2)在android/app/build.gradle中添加codepush.gradle构建任务
...
apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
...
(3)修改MainApplication.java(第一部分)
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
};
}
(4)将对应的code push app的Deployment Key增加到strings.xml中:
<resources>
...
<string moduleConfig="true" name="CodePushDeploymentKey">对应的的Deployment Keystring>
resources>
(5)修改MainApplication.java(第二部分)
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
@Override
protected String getJSBundleFile() {
return CodePush.getJSBundleFile();
}
@Override
protected List<ReactPackage> getPackages() {
return new ArrayList<>(Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CodePush(getResources().getString(R.string.CodePushDeploymentKey), getApplicationContext(), BuildConfig.DEBUG, "热更新服务器地址(如http://127.0.0.1:3000)")
));
}
};
}
更多更完整的过程请参考react-native-code-push 官方github:https://github.com/microsoft/react-native-code-push
(6)修改index.js
import CodePush from 'react-native-code-push';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
const codePushOptions = {
checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME, //onResume时检测是否可更新
updateDialog: true, //发现可更新时是否显示对话框
};
const CodePushApp = CodePush(codePushOptions)(App);
AppRegistry.registerComponent(appName, () => CodePushApp);
更多API和可配置项可参考JavaScript API Reference
(7)运行release版的React Native
react-native run-android --variant release
(8)对React Native程序进行修改(改变样式或者文字,以验证热更新效果)
(1)发布更新包
code-push release-react <应用名> <平台> --t <版本> -d <Staging/Production...> --des <描述>
注意:版本指的是当前React Native App中android/app/build.gradle中versionName,而不是只更新包的版本,如不一致则检测不到是否可更新。
(2)在系统桌面中打开一次APP以触发检测,如果弹出对话框则说明检测到可用更新包,选择INSTALL,后退出(不是返回),再次启动APP即可看到更新后的效果。