目前针对react native 热更新的方案比较成熟的选择有microsoft公司的code-push 传送门，与react-native 中文网的pushy 传送门
本文选择code-push 用来进行对react-native 实现热更新，code-push 包含client端的配置，默认code-push 使用的服务器地址为微软的服务器，但是在国内的网速不是太好。因此可以使用code-push-server 搭建自己的服务器。本文主要介绍了实现热更新 client 和 server 端的配置。
React Native 热更新 借助 code-push-cli 脚手架完成
参考教程 https://blog.csdn.net/dounine...
code-push 常用命令可查看 https://www.jianshu.com/p/aa2...
官方code-push 命令操作以及简介可查看 https://github.com/Microsoft/...
1.react native 热更新 客户端配置
1.首先全局安装code-push-cli npm install -g code-push-cli2.然后注册一个code-push 账号(可使用github账号)
code-push register3.注册成功后将获取的token在当前命令行输入并回车 (如下)
Enter your token from the browser: b0c9ba1f91dd232xxxxxxxxxxxxxxxxx
#成功提示如下方
Successfully logged-in. Your session file was written to /Users/huanghuanlai/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.如使用自己搭建的code-push-server 可忽略 2 ,3 步骤 并使用以下命令登录到code-push-server
登录可采用以下命令
code-push login http://***.***.***.***4.使用code-push 添加一个 app
code-push app add AppName android react-native添加成功后
code-push app add AppName android react-native
#成功提示如下方
Successfully added the "dounineApp-android" app, along with the following default deployments:
┌────────────┬──────────────────────────────────────────────────────────────────┐
│ Name │ Deployment Key │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Production │ PZVCGLlVW-0FtdoCF-3ZDWLcX58L6dec4087-57cf-4c9d-b0dc-ad38ce431e1d │
├────────────┼──────────────────────────────────────────────────────────────────┤
│ Staging │ T0NshYi9X8nRkIe_cIRZGbAut90a6dec4087-57cf-4c9d-b0dc-ad38ce431e1d │
5.在自己项目中安装react-native-code-push
npm install react-native-code-push --save6.将安装的包进行link
react-native link react-native-code-pushScanning folders for symlinks in /Users/huanghuanlai/dounine/oschina/dounineApp/node_modules (8ms)
? What is your CodePush deployment key for Android (hit <ENTER> to ignore) T0NshYi9X8nRkIe_cIRZGbAut90a6dec4087-57cf-4c9d-b0dc-ad38ce431e1d
#将刚才添加的Android App的Deployment Key复制粘贴到这里,复制名为Staging测试Deployment Key。
rnpm-install info Linking react-native-code-push android dependency
rnpm-install info Android module react-native-code-push has been successfully linked
rnpm-install info Linking react-native-code-push ios dependency
rnpm-install WARN ERRGROUP Group 'Frameworks' does not exist in your Xcode project. We have created it automatically for you.
rnpm-install info iOS module react-native-code-push has been successfully linked
Running ios postlink script
? What is your CodePush deployment key for iOS (hit <ENTER> to ignore) IjC3_iRGEZE8-9ikmBZ4ITJTz9wn6dec4087-57cf-4c9d-b0dc-ad38ce431e1d
此时为app 生成key的过程已完成，现需要在自己的项目中加入生成的key ,如果要采用自己的server需要配置服务器的地址。
需要检查如下信息 在执行react-native link 命令后 会将相关的依赖进入引入。正常情况下link 会帮助我们完成以下操作，但有时并没有完全引入需要自己检查。
(1) 在 android/app/build.gradle文件里面是否包含如下代码：
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle" (2) 在/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')
(3) 在 android/app/build.gradle 是否包含
compile project(':react-native-code-push')个人修改
在android/app/src/main/java/MainApplication 中
默认的代码我在编译后报错，如下，(如无报错可不用修改)
new CodePush(getResources().getString(R.string.reactNativeCodePush_androidDeploymentKey), getApplicationContext(), BuildConfig.DEBUG),修改后 (此时默认的为微软的热更新服务地址)
new CodePush("", MainApplication.this, BuildConfig.DEBUG),如自己搭建的server 则忽略上面的修改，需要添加自己server的地址 如下
修改链接自己的热更新服务器（第一个参数为自己当前应用生成的key，最后一个参数为热更新服务器地址）
new CodePush("自己应用的key", MainApplication.this, BuildConfig.DEBUG,"http://***.***.***.***:3000/"),在自己的项目的入口文件引入react-code-push 并写入检测更新与用户进行更新操作的逻辑代码
个人在app.js中修改
#先引入项目包
import codePush from "react-native-code-push";
#以下为自己的升级逻辑代码(放到入口文件中)
codePush.checkForUpdate(deploymentKey).then((update) => {
if (!update) {
console.log('已是最新版本',update)
} else {
codePush.sync({
deploymentKey: deploymentKey,
updateDialog: {
optionalIgnoreButtonLabel: '稍后',
optionalInstallButtonLabel: '立即更新',
optionalUpdateMessage: '有新版本了，是否更新？',
title: '更新提示'
},
installMode: codePush.InstallMode.IMMEDIATE,
},
(status) => {
switch (status) {
case codePush.SyncStatus.DOWNLOADING_PACKAGE:
console.log("DOWNLOADING_PACKAGE");
break;
case codePush.SyncStatus.INSTALLING_UPDATE:
console.log(" INSTALLING_UPDATE");
break;
}
},
(progress) => {
console.log(progress.receivedBytes + " of " + progress.totalBytes + " received.");
}
);
}
})
热更新客户端的配置暂时完毕
此时可进行版本的发布，版本的发布命令参数如下 具体的参数说明可 查看官方文档
https://github.com/Microsoft/...
code-push release-react <appName> <platform>
[--bundleName <bundleName>]
[--deploymentName <deploymentName>]
[--description <description>]
[--development <development>]
[--disabled <disabled>]
[--entryFile <entryFile>]
[--gradleFile <gradleFile>]
[--mandatory]
[--noDuplicateReleaseError]
[--outputDir <outputDir>]
[--plistFile <plistFile>]
[--plistFilePrefix <plistFilePrefix>]
[--sourcemapOutput <sourcemapOutput>]
[--targetBinaryVersion <targetBinaryVersion>]
[--rollout <rolloutPercentage>]
[--privateKeyPath <pathToPrivateKey>]
[--config <config>]
发布之前需要将项目打包
# 执行打包
gradlew.bat assembleRelease
然后再项目的根目录下运行命令发布
(通过查看发布配置项，可看到支持指定文件发布，感兴趣的同学可研究其发布命令)
code-push release-react 应用名称 android -m true --des '描述' -t 版本如无报错信息则发布成功，此时打开应用可查看到更新的提示。
2. React Native 热更新server端配置 (搭建 code-push-server)
- 所需环境 node
- 所需软件 mysql pm2
- 服务器环境 RedHat
1.首先搭建node 环境采用 nvm安装
安装步骤
# 下载安装NVM脚本
>>>curl https://raw.githubusercontent.com/creationix/nvm/v0.13.1/install.sh | bash
>>>source ~/.bash_profile
# 列出npm的版本号
>>>nvm list-remote
# 选择其一安装即可, vn.n.n是版本号,此步骤耗时最久
>>>nvm install vn.n.n
# 查看已安装的版本
>>>nvm list
# 使用版本
>>>nvm use vn.n.n
# 设置为默认版本
>>>nvm alias default vn.n.n
通过此步骤我安装的node版本为v8.11.3 npm 版本为5.6.0
2.安装mysql
#下载，在这里使用的是命令行下载，也建议在图形界面下载，然后上传至服务器
>>>wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm
#使用rpm安装
>>>rpm -ivh mysql-community-release-el7-5.noarch.rpm
#使用yum安装mysql-community-server
>>>yum install mysql-community-server
#启动服务
>>>service mysqld start
#进入mysql，第一次进入无密码
>>>mysql -u root -p
#命令行变成如下
mysql>
配置mysql
#进入配置文件，若未安装vim，建议先使用命令yum install vim安装vim
>>>vim /etc/my.cnf
#最后加上编码配置
[mysql]
default-character-set =utf8
#此处字符编码必须和/usr/share/mysql/charsets/Index.xml中一致。
#不过一般情况下使用的都是utf8
设置密码
#下面三种方法需要进入mysql
>>>mysql -u root -p
#方法一
mysql>insert into user(host,user,password) values('%','user_name',password("password");
#方法二
mysql>set password for user_name = password("password");
#方法三
mysql>grant all on *.* to user_name@% identified by "password";
#下面这一种方法可直接在shell下设置密码
>>>mysqladmin -u root password "password"
远程连接
#进入mysql
>>>mysql -u root -p
#把在所有数据库的所有表的所有权限赋值给位于所有IP地址的root用户。
mysql> grant all privileges on *.* to root@'%'identified by "password";
3.下载code-push-server 并配置
# 下载源码
>>>git clone https://github.com/lisong/code-push-server
# 进入源码目录并安装相应模块
>>>cd code-push-server && npm install
# 修改配置文件
>>>vim config/config.js
数据库配置文件
db: {
username: "root",
password: null,
database: "codepush",
host: "127.0.0.1",
dialect: "mysql"
},
//七牛云存储配置 当storageType为qiniu时需要配置
qiniu: {
accessKey: "",
secretKey: "",
bucketName: "",
downloadUrl: "" //文件下载域名地址
},
//阿里云存储配置 当storageType为oss时需要配置
oss: {
accessKeyId: "",
secretAccessKey: "",
endpoint: "",
bucketName: "",
prefix: "", // 对象Key的前缀，允许放到子文件夹里面
downloadUrl: "", // 文件下载域名地址，需要包含前缀
},
//文件存储在本地配置 当storageType为local时需要配置
文件存储部分
local: {
storageDir: "/Users/tablee/workspaces/storage",
//文件下载地址 CodePush Server 地址 + '/download' download对应app.js里面的地址
downloadUrl: "http://localhost:3000/download", #本地服务器地址
// public static download spacename.
public: '/download'
},
jwt: {
// 登录jwt签名密钥，必须更改，否则有安全隐患，可以使用随机生成的字符串
// Recommended: 63 random alpha-numeric characters
// Generate using: https://www.grc.com/passwords.htm
tokenSecret: 'INSERT_RANDOM_TOKEN_KEY'
},
common: {
dataDir: "/Users/tablee/workspaces/data",
//选择存储类型，目前支持local,oss,qiniu,s3配置
storageType: "local"
},
初始化数据库
# 初始化数据库
>>>./bin/db init --dbhost localhost --dbuser root --dbpassword password --dbport 3306
# 初始化数据库确保不报错才能启动服务
>>>./bin/www
# 若无报错，则表示成功启动，默认端口为3000
可在本地打开浏览器进行检验，输入ip:3000 查看code-push-server 是否正常运行
本人通过pm2 管理 code-push-server 服务
# 安装pm2
npm install -g pm2
# 通过 pm2 启动服务并命名
pm2 start ./bin/www --name code-push-server
# 查看当前服务进程
pm2 list
-------------------------------------------------------
──────────────────┬────┬─────────┬──────┬──────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐
│ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │
├──────────────────┼────┼─────────┼──────┼──────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤
│ code-push-server │ 1 │ 0.5.2 │ fork │ 4282 │ online │ 1 │ 0s │ 0% │ 11.5 MB │ root │ disabled │
此时server 配置已经完成，可直接进行热更新部署。
可通过 code-push 发布相关版本信息，并且支持回滚。更多骚操作可阅读官方code-push文档 https://github.com/Microsoft/...
mysql
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。