React Native 集成code push
2016-10-17 本文已影响460人
yellow超
RN现在的热部署解决方案选择不多,不过微软的Code Push不失为一个好的选择方案。
废话不多说,上来就开搂!!!

依照文档操作步骤1,2后你的账号就可以拥有了部署app的能力了。
现在把关注点放到iOS端,项目结构如下如所示(同RN init 出来的项目结构不同)

步骤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打包脚本

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

你的测试环境就填写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下

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