React Native发展

背景

Facebook在React.js Conf 2015大会上推出了React Native，一套代码能够适配两个平台
Hybird、React Native、Native三者的区别。
1、Hybird是半原生半web的混合类app，app使用web的形式加载内容，比如新闻类的应用很多采用的是这种方式。Hybird对于移动端的开发相对简单，但是体验方面没有原生的好。
2、React Native具有原生应用的用户体验，一份代码可以跨平台运行，在android和iOS都可以执行，所谓“Learn once, write anywhere”。门槛低，web前端的开发人员可以轻松转型，从事android和iOS开发的也能很快上手。
3、Native复杂效果能做到，比如socket文件传输，复杂动画等。
4、方便热更新

RN，H5,Hybrid，Native比较

20190523192337.jpg

使用情况
京东、携程、阿里等

框架结构

20190524091623.jpg

兼容性稳定性

兼容性

  基本都能实现，如:
  1、普通图片及webP图片，字体图片；
  2、动画及Lottie动画
  3、上拉加载，下拉刷新；
  4、Tab切换；
  5、加载框，对话框，Toast提示；分割线；

差异性
1、Android无法直接使用shadow，需要阴影背景图 + 真实图 嵌套实现,ios只能简单的设置颜色值，可采用图片叠加方式实现；
2、列表下拉刷新，Android暂时无法自定义下拉动画，IOS可实现；
3、IOS 有StatusBar，Android无，相差20px;
4、6 Plus上0.5px 设置border有兼容性问题，可用其它方式替代
5、IOS可设置默认加载图片，可监听图片加载成功失败，Android无
IOS/Android效果对比

20190524091801.jpg

稳定性

  稳定行比Native稍差
  1、JS代码打包过程中无法检测到问题代码；
  2、底层问题很多，待完善；
  3、复杂页面加载卡顿会导致一系列CRASH；

启示&思考

复杂页面会很卡，在Android上表现很明显；
复杂动画效果差；
无法检测到一处更改，到处更改，废弃页面难以维护，冗余代码较多
手势监听会造成页面卡顿
Android 上API没有IOS完善