w3ctech美团react专场-react native 初探
Post on 12-Feb-2017
891 views
TRANSCRIPT
![Page 1: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/1.jpg)
React Native 初探美团技术团队 � 寇祖阳
美团 � React � 专场
![Page 2: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/2.jpg)
背景
• 活动多• 产品迭代快• 原⽣生代码更新不够灵活• Web 解决⽅方案的性能和体验⽐比较差
• 线上 bug 的修复⽐比较困难
• JavaScript 社区更加活跃
![Page 3: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/3.jpg)
⺫⽬目的
• 保证体验的情况下加快产品迭代速度
![Page 4: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/4.jpg)
团队情况
• 100% iOS developer
• JavaScript 经验⽐比较少
• 2~4 个⼈人⼒力
![Page 5: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/5.jpg)
⺫⽬目前的进展
• 第⼀一版已上线• 第⼆二版测试中
![Page 6: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/6.jpg)
![Page 7: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/7.jpg)
为什么选择⾸首⻚页?
![Page 8: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/8.jpg)
如何切⼊入产品
• 经常变动、实验的模块/⻚页⾯面
• 替代 webview 的功能
• 替代 native 的功能
![Page 9: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/9.jpg)
整体结构
![Page 10: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/10.jpg)
业务逻辑
![Page 11: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/11.jpg)
代码、资源的分发
• ⺫⽬目的是为了节省加载的时间,达到 native 的加载速度
• 预先下载所有的资源和代码
![Page 12: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/12.jpg)
⾃自定义资源获取协议
• 统⼀一开发和调试模式的资源获取⽅方式• 同⼀一个 URL,背后有不同的获取⽅方式
• 基于 NSURLProtocol 和 RCTURLRequestHandler
![Page 13: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/13.jpg)
⽰示例
![Page 14: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/14.jpg)
基础设施的桥接
• ⺴⽹网络• 跳转• 统计• A/B test
![Page 15: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/15.jpg)
⺴⽹网络
• 直接使⽤用 fetch
• 原有的基础设施迁移到 NSURLProtocol
![Page 16: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/16.jpg)
⺴⽹网络
![Page 17: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/17.jpg)
跳转
• 解决 React ⻚页⾯面跳到原⽣生⻚页⾯面的问题
• 通过 URL 来解决
![Page 18: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/18.jpg)
Native module
• 统计• A/B test
![Page 19: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/19.jpg)
遇到的问题
![Page 20: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/20.jpg)
模块⾼高度的计算
• RCTRootView 作为模块时⾼高度的计算和调整
• 寻找过多个⽅方案
![Page 21: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/21.jpg)
模块⾼高度的计算
• onLayout
• Native module
• 通过 tag 找到 RCTRootView
• 设置 RCTRootView ⾼高度
![Page 22: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/22.jpg)
React 和 native 的⼿手势冲突
• 触摸从 RCTRootView 划出的情况 React 没有处理,会导致 Touchable 触发
• 在 native 中 hack 了⼀一下 gesture 处理
![Page 23: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/23.jpg)
React Native 升级
• 0.6.0 -> 0.10.0
• 布局错乱• 资源获取⽅方式变更• etc...
![Page 24: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/24.jpg)
仍在研究...
• 更好的打包⽅方式• 布局• iOS 与 React 的设计冲突如何解决(VC、MVVM)
![Page 25: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/25.jpg)
总结
• 更快的产品迭代• 不断踩坑填坑
![Page 26: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/26.jpg)
欢迎关注美团技术团队获取更多优质技术内容
![Page 27: W3CTech美团react专场-React Native 初探](https://reader034.vdocuments.site/reader034/viewer/2022042423/58a070061a28ab06528b69ad/html5/thumbnails/27.jpg)