react-native快速集成HMR服务之codePush

2017-12-19 本文已影响0人猫爷CC

集成环境

node v8.9.1

Package in "dependencies": { "react": "16.0.0-alpha.12", "react-native": "0.47.1", "react-native-code-push": "^5.2.1",...}

前言

react-native为移动开发带来了极大便利，使用js即可写出跨平台和原生几乎无差异的应用。react-native生产环境使用javaScriptCore引擎（webkit内核）执行转换index.platform.bundle.js,开发测试中我们可以看到view层渲染的是原生的控件。其中index.platform.bundle.js是可以动态替换的，codePush可以帮助我们很好的完成这件事。

安装

1、安装codePush Cli

$ npm install -g code-push-cli

2、注册codePush

$ code-push register

这时会打开系统默认浏览器跳转到注册页面，完成注册后拿到access key，输入到命令窗口完成注册登录。

注：这里使用微软提供的AppCenter服务，管理我们的codePush bundle更新部署

3、部署app及获取deployment key

$ code-push app add Demo-ios ios react-native

$ code-push app add Demo-android android react-native

针对不同平台部署我们的app，至此前期准备工作OK

引入

1、安装codePush项目依赖

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

2、配置和导入原生工程

$ react-native link react-native-code-push

react-native link会帮我们做好配置工作，接下来我们着重讲讲怎么动态部署deployment key，这样我们发布更新前，可以先发布到Staging环境，验证通过后再promote到Production环境。

iOS：

·使用Xcode打开工程文件，选中工程 - Info - 添加Staging灰度环境，如下图：

·然后选择Build Settings，点击右侧加号，添加User-Defined Setting，如下图：

·定义CODEPUSH_KEY环境deployment key，如下图：

·然后打开工程下的Info.plist文件，配置CodePushDeploymentKey项值为$(CODEPUSH_KEY)，如图：

然后我们就可以设置Xcode - Product - Scheme配置，archive不同环境的版本。

android：

·打开工程下app/build.gradle文件，修改buildTypes节点，增加debug和releaseStaging节点，添加如下配置：

debug {...

buildConfigField "String", "CODEPUSH_KEY", '""'

... }

releaseStaging { ...

buildConfigField "String", "CODEPUSH_KEY", '"<insert your deployment key>"'

... }

release { ...

buildConfigField "String", "CODEPUSH_KEY", '"<insert your deployment key>"'

... }

·然后打开app/src/java/com/your-project/MainApplication.java，在getPackages方法中实例化codePush的第一个参数修改为BuildConfig.CODEPUSH_KEY，其中key值于之前buildConfigField中配置值对应，如下图：