集成环境
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中配置值对应，如下图：
现在我们就可以执行./gradlew assembleYourEnv来打包不同环境的apk了，例如生成Staging环境apk，执行：
$ ./gradlew assembleReleaseStaging
使用
一般更新时机分为两种：启动应用检查更新和用户手动检查更新。
下例中作者对codePush做了一层简单的封装，结合redux加入了安装更新的加载交互，看图：
1、启动应用检查更新
在应用的根组件componentDidMount生命周期中加入codePush更新方法，如下图：
注：声明为静态方法，可以暴漏跟组件静态接口给其它模块使用；这里调用了codePush的封装方法updateHmr，对codePush的sync和checkForUpdate方法做了抽象
2、用户手动检查更新
在需要手动检查更新的模块注入事件方法，如下图：
注：调用了updateHmr的check方法检查更新状态，如果有更新则调用根组件的静态方法查找更新
至此我们就成功集成了codePush热更新服务，欢迎反馈！
codePush项目地址：https://github.com/Microsoft/react-native-code-push
网友评论