构建React Native生态

携程旅行网－魏晓军

移动端痛点

性能



动态性 多端适配

React Native 简述



• 优势

– 组件化 – 热更新 – 高性能 – ……



• 劣势

– 组件平台差异 – 版本不稳定 – 机制不健全 – ……

什么是生态

百度百科对生态的解说中，其 中有一条这样写到：“生态就是 指一切生物的生存状态，以及 它们之间和它与环境之间环环 相扣的关系。”

React Native 的生态



开发



开源



调试



优化



测试



监控



发布



更新 回滚

开发

• 环境搭建

– 私有NPM – 平台包

• 编辑器

– Atom+Nuclide+扩展 – Vscode+扩展 – WebStorm – 插件扩展

• 文档完善

– 开发规范 – 中文文档 – API/UI Demo

• 获取最新资讯

– 最新官方动态 – 最新插件信息 – 最近社区分享

• 基础框架开发

– MVC实现 – 定制化UI（Native\JS） – Hybrid API – 优化插件（TCP\Webp） – Native差异化处理 – 多端适配

• 基础业务开发

– 登陆 – 支付 – 用户信息

• 与原生应用集成

– 原生应用与RN应用互相调用 – RN调用原生应用API – RN走原生应用优化通道 – 原生应用优化RN应用

调试

• Chrome插件扩展 • 调试容器 • 日志机制 • 环境切换机制

测试

• 测试系统搭建 • 单元测试 • 常规测试 • 多设备云端测试 • 白屏测试

发布

• 仓库管理 • 打包（离线、在线） • 发布工具构建（差分） • 发布状态监控（环境、状态）

回滚

• 一键回滚 • 回滚日志纪录 • 回滚邮件通知

更新

• 全量更新 • 增量更新

– Native 更新 – 静态资源更新 – 第三方库 – 更新规则制定 – 客户端更新设计 – 服务器更新设计 – 打包差分设计

监控

• Crash

错误 • JS

• PV、UV、定位

行为 • 业务埋点

• 通信层

性能 • 数据层

• 劫持

其他 • 健康

• 工具



UBT JS UBT RN SDK UBT Native SDK

优化

• 开发阶段的优化 • 首屏优化 • 图片处理 • Bundle处理 • 多业务线资源共享 • 网路服务优化

开源

关注Moles公众号

是由携程框架团队基于React Native研发的一个打通

的框架，并且内置了 ，可以说

是基于React Native开发的一套解决方案， 目前是携程开发React Native项目的首选框 架，即将开源。

目前我们已将Moles框架的 。感兴趣

的同学可以直接在github上搜：

即可。