React Native界面的热更新————Codepush的使用(2018.9.6最新踩坑记)

2018-09-06 阅读量

CodePush是一个微软开发的云服务器。通过它，开发者可以直接在用户的设备上部署手机应用更新。CodePush相当于一个中心仓库，开发者可以推送当前的更新（包括JS/HTML/CSS/IMAGE等）到CoduPush，然后应用将会查询是否有更新。
我写此文的背景是，以iOS工程为核心，里面已经嵌套了RN的代码，混合嵌套见我上篇文章。

1.安装CodePush CLI

安装CodePush指令，直接在终端上输入如下命令即可，注意：这个CodePush指令只需要全局安装一次即可，如果第一次安装成功了，那后面就不在需要安装

1	npm install -g code-push-cli

2.注册CodePush账号

注册CodePush账号也很简单，同样是只需简单的执行下面的命令，同样这个注册操作也是全局只需要注册一次即可

1	code-push register

注意：当执行完上面的命令后，会自动打开一个授权网页，让你选择使用哪种方式进行授权登录，这里我们统一就选择使用GitHub即可

当注册成功后，CodePush会给我们一个key,我们直接复制这个key，然后在终端中将这个key填写进去即可.

我们使用下面的命令来验证我的登录是否成功

1	code-push login

返回你已经在这台设备上登录。

CodePush注册登录相关命令：

code-push login 登陆
code-push loout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm <accessKye> 删除某个 access-key

3.在CodePush服务器注册App

输入下面命令创建项目

1	code-push app add appName ios react-native

注册完成之后会返回一套deployment key，也就是production和staging，分别对应后面xcode中设置的release和staging，该key在后面步骤中会用到。

CodePush管理App的相关命令：

code-push app add 在账号里面添加一个新的app
code-push app remove 或者 rm 在账号里移除一个app
code-push app rename 重命名一个存在app
code-push app list 或则 ls 列出账号下面的所有app
code-push app transfer 把app的所有权转移到另外一个账号

4.RN代码中集成CodePush

先cd到iOS工程中RN的文件夹下，然后执行下面的命令

1	npm install react-native-code-push --save

添加原生依赖，这里添加依赖我们使用自动添加依赖的方式

1	react-native link react-native-code-push

直接回车即可。

5.iOS原生应用中配置CodePush

使用Xcode打开项目，Xcode的项目导航视图中的PROJECT下选择你的项目，选择Info页签，在Configurations节点下单击 + 按钮，选择Duplicate “Release Configaration，输入Staging

选择Build Settings tab，搜索Build Location -> Per-configuration Build Products Path -> Staging，将之前的值：$(BUILD_DIR)/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 改为：$(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME)

选择Build Settings tab，点击 + 号，选择Add User-Defined Setting，将key设置为CODEPUSH_KEY，Release 和 Staging的值为前面创建的key，我们直接复制进去即可.

打开Info.plist文件，在CodePushDeploymentKey中输入$(CODEPUSH_KEY)，并修改Bundle versions为三位

到这里，按道理来说已经配置完成了，以上都是参考网上的，结果各种坑点还没说。。。一把辛酸泪，摸索过来的。。

1.iOS中要用到codepush的代码，自然要导入第三方库，此第三方库存在于项目工程RN的文件夹里面，在它那个三方资源库里，所以我们要用cocoapods导进来。

1	pod 'CodePush', :path => './MyHotDemo/react-native/node_modules/react-native-code-push'

2.真机调试的坑。

直接运行xcode，我们用模拟器可以直接跳转RN界面，但是用真机的时候，就会出现bundle文件找不到什么的，这是因为绝对路径的问题。

1	jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios&dev=true"];

设置为这个就可以进行真机调试了，模拟器也可以。（index.bundle指的是跳转index.js文件）.

3.iOS原生跳转代码

导入< CodePush.h>

NSURL *jsCodeLocation;
#ifdef DEBUG
jsCodeLocation = [NSURL URLWithString:@"http://192.168.171.8:8081/index.bundle?platform=ios&dev=true"];
#else
jsCodeLocation = [CodePush bundleURL];

#endif
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MyHotDemo" initialProperties:nil launchOptions:nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self.navigationController pushViewController:vc animated:YES];

4.RN中的代码

导入import codePush from ‘react-native-code-push’

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

5.将本地的RN代码打包成jsbundle文件，再拖入到原生项目里。

1	react-native bundle --entry-file index.js --platform ios --dev false --bundle-output bundle/main.jsbundle --assets-dest bundle/

通过上述命令，我们可以将JS部分的代码和图片资源等打包导出到bundle目录下(注意，这里我写的不好，重名了。。命令中第一个bundle是必须写的，第二个和第三个指的是我们在iOS项目底层文件的RN文件夹里创建的bundle文件夹，另外在bundle文件夹里也要创个assets,好像没用到，最好创一下，这两个文件夹要先创建好，再执行上面的命令).

创建好之后，在xcode里面把main.jsbundle拖进去。

6.完成上面的步骤和填坑后，就可以进入最后一步了。

1.先对当前项目进行正常的iOS打包，然后下载到手机上，运行什么的都是正常的。

2.然后更改RN中的代码，保存后，然后在终端输入下面命令

1	code-push release-react MyHotDemo ios --t 1.0.0 --deploymentName Production --des "我的第一次线上更新"

其中1.0.0对应你在info.plist文件里的设置， CodePush默认是更新Staging 环境的，也就是如下的命令：

1	code-push release-react <Appname> <Platform> --t <本更新包面向的旧版本号> --des <本次更新说明>

如果发布生产环境的更新包，需要指定–d参数：–d Production，如果发布的是强制更新包，需要加上 –m true强制更新。

因为我上面已经打包出来了，所以直接发布到生产环境上，也就是我上面写的第一个命令行。

输入命令成功后，再在自己手机上点开自己的程序，刚进去还是老样子，其实他执行了视图完成时候的更新代码。然后退出去再进来，就会发现RN界面已经是更新后的了。完美！

查看发布的历史记录，命令如下：

查询Production

1	code-push deployment history projectName Production

查询Staging

1	code-push deployment history projectName Staging

另外，对1.0.0版本的应用如何发布第二个、第n个更新包？

操作步骤和上面发布第一个更新包流程一样，我们任然先需要打出bundle包，将生成的bundle文件和资源文件拖到工程中(你工程里已经拖过了就不用拖了，重新生成的bundle会覆盖掉原来的)，然后再将bundle发布到CodePush。

总算结束了，热更新也搞定啦~~过程很苦逼，结果很舒服~~