ReactNative填坑记-白红宇

本文迁移自本人简书账号, 后续不会再在简书更新文章, 具体原因可以查看

前言

公司的项目是从Objective C启动的, 期间经历了Swift的混编. 再考虑到后期Web模块的添加, 直接上了ReactNative, 从一个纯粹的项目变成了大杂烩. 这篇文章就是记录其中RN嵌入老工程的心酸史.

一

先开始熟悉RN的语法, 安装node, 安装react-native-cli, 安装... 还好有Homebrew神器, 否则光是环境问题就要命了

二

编辑package.json文件, 指定版本对RN的集成有一定的意义. 但说实话, 1000多个Contributor的RN确实不稳定, Bug也不少, 所以0.42和0.43等等其实没啥区别, 因为社区现在根本不敢把它做成1.0.

接下去就是各种npm包安装了, 这步没啥好说, 傻瓜化操作.

三

由于我们的工程使用了CocoaPods, 所以第一反应是使用pods安装, 幸运的是React提供了CocoaPods支持. 所以很快也搞定了.

四

头疼的问题终于来了. 我们使用了H5 Web App嵌入工程的方式, 但是调试的时候发现无论如何都无法postMessage成功. 总是报***Setting onMessage on a WebView overrides existing value of window.postMessage, but a previous value was defined***. 找了很久解决办法, 最后实在是没辙了, 只好修改源码, 把React工程的RCTWebView中的代码替换:

//    NSString *source = [NSString stringWithFormat://      @"window.originalPostMessage = window.postMessage;"//      "window.postMessage = function(data) {"//        "window.location = '%@://%@?' + encodeURIComponent(String(data));"//      "};", RCTJSNavigationScheme, RCTJSPostMessageHost//    ];    NSString *source = [NSString stringWithFormat:                        @"window.originalPostMessage = window.dispatchMessage;"                        "window.dispatchMessage = function(data) {"                        "window.location = '%@://%@?' + encodeURIComponent(String(data));"                        "};", RCTJSNavigationScheme, RCTJSPostMessageHost                        ];复制代码

才能保证本地和Web App, Web App和后台的通信互相不冲突. 可算把问题解决了, 终于可以愉快玩耍了.

五

接着, 让人头大的内存问题又来了.

由于本地使用TabViewController持有多个WebView模块, 导致内存大量增加, 特别是持有图片和视频的网页, 会导致Web狂增几十M甚至超过一百M.

联想到WKWebview在内存方面的改进, 积极引入该模块, 用的是Github上的, 终于把内存问题解决了.

六

程序员总是喜欢在解决一个问题的同时, 引入更多的问题. XD

因为WKWebView默认不保存和共享Cookies, 我们不幸地把原来可以正常使用的确认登陆状态的Cookies给丢了. ORZ

试了各种途径, 发现本地Web App只能自己手动传入.

所以每次登陆后尝试把Cookies解析并保存下来, 然后需要使用时, 将Cookies中需要使用的内容通过RN下发给本地Web App, 让其可以正常的保持登陆状态.

后续其实还有各种坑需要一点一点趟, 想来这也是编程的乐趣, 找出问题 => 解决问题, 不断地前进, 永无止境.

所以建议后面的内容读者自己尝试后, 再进行补充吧. XD