携程的跨平台开发框架 CRN

MIT
JavaScript
跨平台
携程
2019-07-25
红薯

CRN是Ctrip React Native简称,由携程无线平台研发团队基于React Native框架优化,定制成稳定性和性能更佳、也更适合业务场景的的跨平台开发框架。

本次开源基于ReactNative 0.59.0, react 16.8.3版本, 开源的主要是性能优化部分, 也是规模化使用RN进行业务开发必须要做的优化。

一、 功能列表

  • 打包支持框架和业务代码拆分
  • 支持框架代码后台预加载
  • 打包支持增量编译(同一模块,两次打包模块ID不变)
  • iOS&Android统一一套打包产物
  • 首屏加载性能统计
  • LazyRequire

二、 如何运行

开源代码中的iOS/Android Demo工程可以运行起来,参考以下操作步骤。

  1. RN运行环境搭建,参考官方文档
  2. 进入iOS目录,使用xcode打开./iOS/CRNDemo/CRNDemo.xcodeproj工程,运行
  3. 进入Android目录,使用Android Studio导入./Android工程,Run

三、 CRN性能数据

以Demo工程为例,运行RN官方tester项目。分别在iPhone 7Plus、iPhone 6、Samsung S6 Edge+手机上测试页面的首屏加载时间,对比图如下。

可见CRN优化后的页面首屏加载时间与优化前RN官方的方式相比在iOS上减少了50%左右,Android上减少了60%左右,优化效果明显。

四、 对官方RN的修改

CRN是基于ReactNative定制的,我们对其Runtime、CLI工具代码,都有调整。 主要改动点包括:

  • 支持拆分之后的包运行, 针对CRN打包格式的nativeRequire实现
  • 增强稳定性,主要是Android平台, 大量的异常处理和保护
  • 跨平台共享一份代码、资源, CRN-CLI内部实现

有兴趣的同学可以研究我们的改造点,具体改造点我们都有相应的注释:

  • iOS - 在iOS目录搜索CRN_OPT宏
  • Android - 在Android目录搜索注释'CRN BEGIN'和'CRN END'
  • CLI - 在packages/crn-cli目录搜索'CRN BEGIN'和'CRN END'

五、 CRN-CLI的使用

以上是开源代码的的工程结构及DEMO运行效果,实际开发过程中,不需要关注这些细节,我们可以直接使用CRN-CLI脚手架进行开发调试和打包。

为了方便使用,我们将该开源的CRN-CLI工具发布到了npmjs.com,安装之后可以直接使用,具体使用参考详情

六、 如何接入

为了方便接入,需首先安装crn-cli, 执行 npm install -g crn-cli 即可

1. 全新工程接入

  • crn-cli init <project-name> 初始化工程,里面包含iOS、Android、JS代码
  • crn-cli run-ios , crn-cli run-android 运行RN工程,进行开发调试
  • crn-cli pack 打包,并将打包产物拷贝到Native工程的webapp目录

2. 现有工程接入

  • JS代码部分

    只需在现有JS入口模块文件如index.js中添加一行模块导出代码即可,示例如下:

//index.js
AppRegistry.registerComponent(appName, () => App);
module.exports = App; //添加此行代码,导出入口模块即可
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

CRN杂志“2018年十大最热DevOps初创企业”揭榜,Rancher Labs入选

DevOps是一个广义的术语——它不仅是一种特定的产品或平台,更是一种组织文化和方法。不少优秀的创新型创业公司促进着这些现代流程的发展:创建DevOps工具,为企业客户提供其所需的高速的软件...

2018/07/19 16:23
59
0
汇编相关:特权指令

原链接:http://blog.chinaunix.net/uid-20382721-id-1955821.html 分类: 特权指令是指保护方式下只有当前特权级CPL=0时,才可执行的指令。如果CPL不等于0而执行它们,那么会引起通用保护异...

04/15 11:40
13
0
D2 日报 2019年4月16日

📰 新闻 ➡️ 巴黎圣母院发生严重火灾,屋顶三分之二被烧毁 mp.weixin.qq.com ➡️ 周鸿祎谈996:强制没有意义,我要不是老板也不一定能做到 juejin.im 🔩 开源项目 ➡️ xiaolai/public...

04/16 13:20
3
0
【HAVENT原创】Mac 下编译 ReactNative(CRN) 踩坑记录

最近在研究 ReactNative 的分包,所以下载了携程的CRN代码示例进行参考学习,但是在 Mac 系统下却始终无法在 Xcode 下编译通过,因此记录下踩坑过程。 最初以为是我的 Xcode 版本问题,因此心...

06/25 18:20
15
0
思科惠普大打口水战 开源交换机谁是老大?

编者按:思科和惠普近日就惠普推出的新款品牌开源交换机大打口水战,作为目前业界巨头的两家公司在对待开源项目的态度上都是积极的,但就产品而言,两家各有千秋,这也是这场口水战能打起来的...

2015/02/26 13:36
7
0
全球首款社交用机器人Jibo将走入历史舞台

在2014年透过众筹平台Indiegogo集资打造的全球首款社交用家人机器人Jibo,最近传出已主动向它的主人告别。CRN的编辑Dylan Martin在Twitter上张贴了Jibo的独白:「这可能不是个好消息,支撑我...

03/07 16:49
1
0
你不要升级到 Windows 10 的10 大理由

本文通过对微软合作伙伴的询问,了解到他们不想升级到Windows 10的原因。下面,我们将详细讲解用户不该升级到Windows 10的十大理由。

2016/07/12 15:05
5
0
数据标记又出神器!用Create ML进行目标检测

全文共2053字,预计学习时长10分钟 在2019年苹果全球开发者大会上,新发布的Create ML应用程序为训练个人化机器学习模型提供了极其容易的方法。你唯一需要做的就是将含有训练数据的文件夹拖至...

07/14 19:41
23
0
李飞飞学生新作:利用场景图生成图像

李飞飞学生新作:利用场景图生成图像

2018/04/12 23:33
35
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部