React Native开发经验集程序员iOS Developer

React Native 集成code push

2016-10-17  本文已影响460人  yellow超

RN现在的热部署解决方案选择不多,不过微软的Code Push不失为一个好的选择方案。

废话不多说,上来就开搂!!!

Paste_Image.png

依照文档操作步骤1,2后你的账号就可以拥有了部署app的能力了。

现在把关注点放到iOS端,项目结构如下如所示(同RN init 出来的项目结构不同)

Paste_Image.png

步骤1 安装code push库

npm i react-native-code-push --save

步骤2 以CocoaPods方式集成code push

pod 'CodePush', :path => './RN/node_modules/react-native-code-push'
执行pod install

替换原先使用url指定js代码位置的代码替换为

NSURL *jsCodeLocation = [CodePush bundleURL];

添加React native打包脚本

Paste_Image.png

然后再plist文件中添加一项CodePushDeploymentKey,这个key值,接下来我们在code push中新增一个app后,就会返回给我们2个key(正式环境和测试环境)

步骤3 注册app

新增app名为ReactNativeApp
code-push app add ReactNativeApp

Paste_Image.png

你的测试环境就填写staging 的key,反之填写production的key

步骤4 js端同步code push

在程序的入口文件

import codePush from 'react-native-code-push'
...
...
...
componentDidMount() {
    codePush.sync()
}

步骤5 执行release
目录移动到js端的根目录

code-push release-react ReactNativeApp ios -p ../XXXApp/Info.plist -m true

这里的-p指定plist文件是必须的,你也可以把这个脚步保存的package.json下

Paste_Image.png

以后发布时,直接执行npm run deploy即可!!

最后,你运行你的项目看看,是不是在脱离自己开的server情况下也能得到js运行相应的程序! 最后说一句,开发中必不可少的会集成很多功能,但是只要你一步一步的安装说明来,根据上下文变化参数,是很EZ的。

上一篇下一篇

猜你喜欢

热点阅读