植入RN的目的是什么?
肯定热修复热更新,既然项目嵌入了如何进行后台部署,我们可以自己搭环境,但是有几个疑问?
1.code push 是什么?
http://microsoft.github.io/code-push/docs/getting-started.html
一个中央仓库,能把代码文件放进仓库
2.后台应该给我们客户端什么?
之前查了许多资料,都说bundle文件.对的是bundle文件.需要明白一点,在程序执行的时候,类和变量会转换成对应的代码.
直接上代码
一.打包
打包 将index.ios.js文件打包成对应的main.jsbundle
react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./main.jsbundle --dev false
为什么叫main.jsbundle?
code push 默认读取的是main.jsbundle,为了方便. 你可以起任意的名字.
为什么打包index.ios.js?
因为它是输出文件打包index.ios.js会将所有的用到的代码连接在一起,读取这一个文件,就能将你所写的展示出来,之后你在任意文件更改,只需重新打包index.ios.js -> main.jsbundle
二.发布
用到了我们的发布工具,也可以自己搭环境,自己搭环境还有不少问题,暂时先用code push
1.安装 CodePush 客户端
只需要在终端输入 npm install -g code-push-cli，就可以安装了。
安装完毕后，输入 code-push -v查看版本，如看到版本代表成功。
DFF20674-D91B-4F77-8385-B18F2B763273.png
2.注册账号
code-push register
73EF6DB8-50E3-4513-97FF-751E35574131.png
授权通过之后，CodePush会告诉你“access key”，复制此key到终端即可完成注册。
相关命令
code-push login 登陆
code-push loout 注销
code-push access-key ls 列出登陆的token
code-push access-key rm <accessKye> 删除某个 access-key
添加的你的app
code-push app add `xxx`
返回一个
Name │ Deployment Key │
├────────────┼───────────────────────────────────────┤
│ Production │ eZeuj4pe1iBDlpp92GVly6hrbwVkJU4U8 │
├────────────┼───────────────────────────────────────┤
│ Staging │ lH7amuEEam2kcRCcsgLfPvIpUmVkJU4U80
一个生产环境Production,一个预发布环境Staging
如果你的应用有Android和iOS版，那么在向CodePush注册应用的时候需要注册两个App获取两套Deployment key
相关命令
code-push app add 在账号里面添加一个新的app
code-push app remove 或者 rm 在账号里移除一个app
code-push app rename 重命名一个存在app
code-push app list 或则 ls 列出账号下面的所有app
code-push app transfer 把app的所有权转移到另外一个账号
三.集成到iOS
CodePush官方提供RNPM、CocoaPods与手动三种在iOS项目中集成CodePush的方式，因为已经有CocoaPods,接下来我就以CocoaPods的方式来讲解一下如何在iOS项目中集成CodePush。
第一步：在项目中安装react-native-code-push插件，终端进入你的项目node_modules所在的同级目录然后运行
npm i react-native-code-push --save
第二步: 找到Proflie文件 添加以下代码,一定要注意目录,RNComponent这是我的目录结构
pod 'CodePush', :path => './RNComponent/node_modules/react-native-code-push'
然后pod install,导入到iOS工程中
第三步: 在我们想CodePush注册App的时候，CodePush会给我们两个deployment-key分别是在生产环境与测试环境时使用的，我们可以通过如下步骤来设置deployment-key。
1.PROJECT下选择你的项目 -> 选择Info -> 在Configurations节点下单击 + 按钮 -> 选择Duplicate "Release -> 输入Staging(名称可以任意主要是key 要对应上)
BB7259C5-BBD6-4E62-A12F-2DAD78901E5E.png
2.然后选择Build Settings页签 -> 单击 + 按钮然后选择添加User-Defined Setting
749143F0-9DDA-4421-811D-320C3A78BE6F.png
3.然后输入CODEPUSH_KEY(名称可以自定义),这个key 一定要对应,不然推送的时候会出问题
8486F495-D665-4E03-B7FB-84105BF4BA63.png
到目前为止，iOS的设置已经完成
四.准备开始推送bundle文件
1.在 index.ios.js中加载 CodePush模块：
import codePush from 'react-native-code-push'
(可能会提示找不到react-native-code-push unable reslove modlue npm 依赖包不对
),
$watchman watch-del-all
$ rm -rf node_modules && npm install
$ rm -fr $TMPDIR/react-*
2.在 componentDidMount中调用 sync方法，后台请求更新
codePush.sync()
componentDidMount(){
codePush.sync();
}
五.发布更新
1.打包
react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./main.jsbundle --dev false
2.推送
code-push release<项目名称> <./main.jsbundle> <3.6.1> --deploymentName <Staging> --description <"1"> --mandatory <true>
<>:是需要配置的参数
ios:什么平台
--t 1.0.0:同你的项目版本
--deploymentName Production:什么环境,**注意你的key 设置在什么环境上了
--description为更新说明
--mandatory 是强制更新
项目里:
NSURL *jsCodeLocation;
jsCodeLocation = [CodePush bundleURL];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"xxx"
initialProperties:@{@"index" : @"main"}
launchOptions:nil];
self.view = rootView;
同时你需要一个项目里默认的main.jsbundle(离线包),因为可能网速比较慢,也需要加载出来页面,如果没有默认的main.jsbundle,会报错.
E5A84D9A-8AB7-4D9D-A981-D59D44BBAC66.png
生成的包,直接拖进工程里.
**注意:
1.main.jsbundle本地需要的离线包,不能没有
2.每次推送的main.jsbundle到code push 仓库里
3.大概流程 1.打包 -> 2.推送 ->3.本地拉取最新的bundle,拉取成功后,不再读取项目中的main.jsbundle,会读取本地的main.jsbundle.
4.项目里是有两个main.jsbundle ,第一个放在项目里的离线包,第二个是code push 拉取下来的,放在沙盒里,不要混了.
六.
至此 iOS端的推送已经完成.
项目打包的时候npm 被打包进去了吗?
没有,打包只把cocopod 包含的库打包进去,其实客户端需要的就是那个main.jsbundle文件,项目本地有解析main.jsbundle的库,这个解析库是打包进.ipa的.所以客户端只需要一个main.jsbundle就可以了.
欢迎指正,谢谢!
网友评论