使用CodePush热更新ReactNative JS代码

纠结了半天，不知要不要用ReactNative来开发新项目，

例如本地存储，例如webView 里面js 与native 的互动，例如地图，纠结。。。

通过查看文档，一一得到答案，还是很想用ReactNative做这个项目。

最吸引我的就是传说中的热更新。但是，，具体是怎么样才能热更新啊，

看了大部分翻译文档，没说这回事啊。。。

貌似只是在开发时候，用直接连本地服务器，可以直接reload，

难道上线后，也是直接连服务器来拿js ？不会吧？？？

那app 不能联机的时候呢？

后来看了文档，原来是打包时候可以打成一个bundle包，

我擦咧，那怎么更新厘米的包？没看到，那不是跟原生一样，要通过这个app store进行更新？

要不就是我自己来，在AppDelegate里面判断，是否需要更新，是就下载新的bundle包，下完毕，再load这个bundle给用户使用。

嗯，好吧，也就这优点？

刚好看了文章说他们的经验：

http://bbs.react-china.org/t/react-native/3169

最近1个月完成了一个RN的项目，这里记录一下，以备后面的总结
项目内容
1. 登录
2. 根据剪贴板的内容查找数据
3. 显示查找后的数据，并对这个数据进行一些处理

平台支持
iOS和Android
iOS已经上架2版

开发方式和架构内容
1. 使用Git作为版本管理
2. 使用Atom作为开发工具，XCode辅助，没有用Android Studio
3. 使用CodePush69作为js package的升级工具
4. 使用Redux作为React的数据框架
5. 使用Stackoverflow和React的issue list作为主要的知识查找
6. 开发了一些自己使用的Android的插件，因为Android不支持Onresume事件，所以自己写了插件，后面会open出来
7. 主要使用ios做开发，然后Android适配
8. 使用了自定义字体作为图标，进入了ttf文件
9. 使用eslint做js的静态检查

总结
1. ios还是比较稳定并且功能也比较全
2. Android的坑是有不少，比如：不支持Shadow，还有对absolute的布局支持的也不够好
3. Android的事件支持的不好，很多事件还没有支持
4. Android的性能好像也不是很好，但是，也能凑合用
5. Android的原生控件封装的不好
6. 如果希望代码复用高，最好让iOS和Android尽量保持样式的一致
7. 这篇文章对我在Mac上调试Android有很大帮助69

使用到的第三方库
1. Redux
2. Redux-react
3. ImmutableJS
4. moment
5. React-native 0.14.1
6. react-native-android-statusbar
7. react-native-clipboard ，因为owner很久不维护，我做了一些修改，后面会open出来
8. react-native-code-push
9. react-native-device
10. react-native-icons
11. react-native-keyboard-spacer
12. react-native-navbar"
13. react-native-simpledialog-android
14. redux-thunk

我擦咧，我只看到一句，就跟一见钟情似的：3. 使用CodePush69作为js package的升级工具

我就查资料去了，没有，，没人有教程给我，，，擦咧

好吧，老老实实看官方英文文档，祈求能用，不要浪费一天时间。

下面是我的安装经验：忙乱，因为每一步都有点心惊，怕出错，不知如何修复。

CodePush v1.40 安装使用

1， 开vpn，在项目根目录输入：

npm install react-native-code-push -/-save           //去掉-/-中的/

参数 —-save 在安装的同时，把信息写入package.json 文件的项目路径

如果npm 执行不了，因为网络原因，请使用cnpm 来代替

2，安装完毕，检查

    a. package.json 文档加入了 

  "dependencies": {

    "react-native": "^0.16.0",

    "react-native-code-push": "^1.4.2-beta"

  }

    b. node_modules 下有  react-native-code-push 文件夹，里面有  CodePush.xcodeproj 这个文件，因为后面要加入到当前的项目中去

3，用Xcode 打开项目，点开Libraries 目录，

     打开项目根目录下的 /node_modules/react-native-code-push  ， 把文件  CodePush.xcodeproj  拉入 上面的Libraries 目录下作为依赖项目

    打开 Xcode的项目－》target －》Build Phase －》 Link Binary With Libraries

    把刚才拖进去的子项目CodePush.xcodeproj  点开，找到Products 目录，把红色的libCodePush.a拉进去

4，点击 Link Binary With Libraries 下面的加号， 查找 libz ， 选中iOS 9.1 下面的 libz.tbd

5，选择上面的标题为 Build Setings 查找Header Search Path， 双击值，弹出列表界面，

    点击加号， 输入   $(SRCROOT)/../node_modules/react-native-code-push

    选择后面的  recursive 选项

6，打开   AppDelegate.m  ,

     添加   #import “CodePush.h”

     找到： 

     //   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

  jsCodeLocation = [CodePush bundleURL];

7，接下来是安装 code-push 服务器端

先看官网：https://github.com/Microsoft/code-push

看了半天，tmd要我安装 gulp，下载git源代码，再编译，，，吓傻了我，，，这不是我想要的生活

再用cnam search code-push 出来一个网页，第二行是  code-push-cli ，

好吧，安装   react-native-cli 有经验，嗯嗯，这个也类似吧。

还是仔细看了淘宝镜像的网页英文介绍，https://npm.taobao.org/package/code-push-cli#account-creation，原来是出自官网的cli文件夹里，https://github.com/Microsoft/code-push/tree/master/cli，

还好没有去编译，臣妾不熟啊，

确定下面是有code-push 服务器配置appName的事情，

才斗胆安装了这个，看下面的结果

MacdeiMac:~ mac$ cnpm install -g code-push-cli

WARN engine [email protected]: wanted: {"node":"0.x"} (current: {"node":"5.1.0","npm":"2.14.12"})

/Users/mac/.nvm/versions/node/v5.1.0/bin/code-push -> /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/code-push-cli/script/cli.js

[email protected] /Users/mac/.nvm/versions/node/v5.1.0/lib/node_modules/code-push-cli

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected]

├── [email protected] ([email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

├── [email protected] ([email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])

├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

└── [email protected] ([email protected], [email protected])

试试看版本，貌似最新的哦

MacdeiMac:~ mac$ code-push -v

1.3.0-beta

8，根据英文指引，注册Code-Push帐号

终端输入 code-push register

弹出网页 https://codepush.azurewebsites.net/auth/register?hostname=MacdeiMac.local

看最后，貌似是我本机的机器名字，看终端

MacdeiMac:~ mac$ 

我输入了gitHub的帐号，一开始我以为我没有，进去后发觉有哦，

原来是[email protected]  ，好吧，刚好也是为这个建立的，就用这个吧，反正后面可以log out

允许了权限之后，帮我注册了一个帐号，得到了token 

MacdeiMac:~ mac$ code-push register

A browser is being launched to authenticate your account. Follow the instructions it displays to complete your registration.

Enter your access token:  这个要保密哦

eyxxxxxxxJ9

Successfully logged-in. Your session token was written to /Users/mac/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

9，使用code-push 服务器

登陆 code-push login

注销 code-push logout

列出 登陆的token    

code-push access-key ls

删除某个access-key

code-push access-key rm <accessKey>

其他功能暂时不想去试试，

MacdeiMac:~ mac$ code-push access-key ls

┌───────────────────────────────────────┬───────────────┬─────────────────┬─────────────┐

│ Key                                   │ Time Created  │ Created From    │ Description │

├───────────────────────────────────────┼───────────────┼─────────────────┼─────────────┤

│ xmYxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxVBl │ 6 minutes ago │ MacdeiMac.local │ Login       │

└───────────────────────────────────────┴───────────────┴─────────────────┴─────────────┘

10，接下来是弄我们的app了，终于等到了

增加一个app进行管理

MacdeiMac:~ mac$ code-push app ls

┌──────┬─────────────┐

│ Name │ Deployments │

└──────┴─────────────┘

MacdeiMac:~ mac$ code-push app add SwitchCheck

Successfully added the "SwitchCheck" app, along with the following default deployments:

到了这里一直不出来，不知何事

强行ctrl c 出来，再看看列表

MacdeiMac:~ mac$ code-push app ls

[Error]  connect ETIMEDOUT 23.101.203.117:443

好的，出问题了，估计网络问题，用vpn 继续

MacdeiMac:~ mac$ code-push app ls

┌─────────────┬─────────────────────┐

│ Name        │ Deployments         │

├─────────────┼─────────────────────┤

│ SwitchCheck │ Production, Staging │

└─────────────┴─────────────────────┘

弄好了么？不知道，没底，看英文内容All new apps automatically come with two deployments (Staging and Production) so that you can begin distributing updates to multiple channels without needing to do anything extra (see deployment instructions below). 

貌似ok

有命令： 更名 code-push app rename 旧名字 新名字

删除 code-push app rm 旧名字

11，部署管理

上面的部署类型 Production  Staging，还可以自己加例如dev  alpha beta等，

用语法 code-push deployment add app名字 部署名字

还可以重命名部署名字： code-push deployment rename app名字 旧部署名字 新部署名字

删除部署名字  code-push deployment rm app名字 部署名字

列表部署名字 code-push deployment ls app名字

MacdeiMac:~ mac$ code-push deployment ls SwitchCheck

┌────────────┬───────────────────────────────────────┬──────────────────┐

│ Name       │ Deployment Key                        │ Package Metadata │

├────────────┼───────────────────────────────────────┼────────────