react-native利用codepush实现热更新

如果你对codepush实现的热更新还不了解,当你看到这篇文章,恭喜你赚大了.

不扯没用的,现在步入正题说说热更新那些事!

一.创建一个简单的项目

由于是做iOS开发的安卓不太了解,安卓的小伙伴们不好意思就拿iOS开刀说了.首先配置reactNative开发所需的各种环境,这里就不再说了,请去reactNative中文网查看.首先我们使用命令

react-native init codePushDemo --version 0.44.3

初始化一个项目,项目名字codePushDemo,我相信这一步大家都没有问题,可以运行试试

二.集成code-push

(1)在codepush上注册登录并创建项目

1.安装Code-push cli(mac上的环境)

npm install -g code-push-cli

2.注册CodePush账户(如果之前注册过可以跳过直接登录)

code-push register

这里会跳进浏览器,可以使用github或者Microsoft帐户注册,注册成功后将会生成相应的access token,按照提示在终端输入刚生成的access token即可(会自动登录)
3.添加CodePush应用

code-push app add XXX ios react-native　 　　　//XXXapp名字

添加成功截图如下

F9F2F2D1-425B-45A5-B54E-6C2321DF7DD2.png

(2)集成code-push到reactNative中

在根目录执行

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

在node_modules中如果出现

0383CE8B-1A59-40C2-A11D-803B542250E7.png

恭喜你安装react-native-code-push成功了

(3)集成code-push到iOS工程文件中

一般有三种方法：RNPM、CocoaPods 、"Manual"详细可参考CodePush的Github：https://github.com/Microsoft/react-native-code-push
我着用的是RNPM,如果你项目使用CocoaPods集成的,那推荐使用cocoaPods:
1.安装rnpm

$ npm i -g rnpm

2.查看下之前在code-push创建的app,下面会用到

$ code-push deployment ls <appName> -k

查看结果如

FC554C37-B4BF-4137-9E27-8C7A69C59D12.png

3.将code-push集成到xcode

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

这里需要输入Deployment Key (上面查看的那个),填写Staging对应的Key就行,这个是测试环境的,安卓的我暂时回车忽略了, 以后可以填

7F1989D5-0352-40A5-B994-667A99F24402.png

此时在我们的xcode的info.plist中会多出一条

880D2247-34F9-4117-BE98-DE8D7A876A5B.png

这个方法简直是超级简单

接下来我们来看看codepush给我们提供的demo(这个必须看啊).
现在我们直接把里面的内容复制到index.ios.js里面,注意需要改写东西

class codePushDemo extends Component  //这个类名字改成项目名(自己喜好)

//这里面都需要改成项目名字(当然也可以按照你自己的习惯)codePushDemo = CodePush(codePushOptions)(codePushDemo);AppRegistry.registerComponent("codePushDemo", () => codePushDemo);

注意到这里需要一张图片

<Image style={styles.image} resizeMode={Image.resizeMode.contain} source={require("./images/laptop_phone_howitworks.png")}/>

可以找一张自己喜欢的替换掉(要将图片放进xcode)

现在你可以去运行你的项目了,我的运行结果如图

61207A78-8D4D-4714-B3B4-ED5C0B2DF6F5.png

此时你去运行iOS项目,你可能遇到这个错误(如果没有遇到最好了)

../node_modules/react-native/packager/react-native-xcode.sh: No such file or directory

我是重新安装的node_modules解决的,文件缺失,由于也是刚接触不久,也不知道原因,

三.打离线包

使用下面的命令打包

$ react-native bundle --entry-file index.ios.js --bundle-output ./ios/bundle/main.jsbundle --platform ios --assets-dest ./ios/bundle/assets --dev false

处理后我的目录

4982876D-0E88-4730-A166-59DF09BFF299.png

四.发布更新

现在让我们来改些东西,发布上去看看是否有所改变

659D3DC9-F985-4737-9CA5-B40C8591671C.png

执行发布更新命令

code-push release codePushDemo ./ios/bundle/main.jsbundle 1.0.0 --deploymentName Staging --description "1.修改了文字" --mandatory true

看看终端结果

531DB6AE-BF07-4DB2-8D33-B26CA787B493.png

让我们再次启动app,点击Press for dialog-driven sync,

6A1FD790-7D0A-4E5F-BA3D-FD77E4D2E855.png

哇,变了,
好的,我们看一下我们code-push

$ code-push deployment ls codePushDemo -k

33C8F04E-41AF-474F-BD60-85E4E3AA21EE.png

可以看到已经有一个人更新了
你还可是尝试各种更新操作,以后有时间会补充进来.

作者：小码儿
链接：http://www.jianshu.com/p/d3e7c58b6a4f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。