React Native 集成code push

作者: yellow超 | 来源:发表于2016-10-17 01:21 被阅读460次

    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的。

    相关文章

      网友评论

        本文标题:React Native 集成code push

        本文链接:https://www.haomeiwen.com/subject/uveayttx.html