React Native简单介绍

React Native简介

---

简介

• 支持平台：Native App(IOS、Android)、web
• 开发语言：JSX、JavaScript、Coffee Script、Type Script

一句话介绍

使用js语言，利用该框架调用原生UI组件，开发接近原生效果的跨平台应用。

主要特性

• 支持原生iOS组件

通过使用React Native，开发者能够使用iOS环境下的标准组件（如UITabBar和UINavigationController）来开发原生应用，这就能够保证开发出来的应用在多个平台亦能保持始终如一的外观、风格，从而提高了应用产品的用户体验和品质；

• 支持异步执行

JavaScript应用代码和原生平台之间的所有操作都是异步执行的，原生模块还可以使用额外的线程，从而利用React Native开发出来的应用性能比较高（运行流畅和反应快）。此外，开发者还能够在模拟器或者物理设备上运行应用的同时利用Chrome Developer Tools调试JavaScript代码；

• 触摸操作

React Native实现了一个类似iOS平台下的响应系统，还提供了高级的组件如TouchableHighlight等；

• 引入了Flexbox布局模型和样式

Flexbox布局模型有利于构建常见的UI布局，如stacked和nested boxes布局。React Native还支持常见的Web样式，如fontWeight、font-size等。样式表（StyleSheet）抽象提供了一种优化机制来声明组件所用到的所有样式和布局；

• 具有Polyfills功能

Polyfills功能是的开发者编写单独应用的代码而不用担心其他浏览器原生是不是支持。React Native专注于改变试图（Views）代码编写的方式，开发者能够使用npm安装JavaScript Library，并将这些Library融入React Native，如 XMLHttpRequest、window.requestAnimationFrame等

• 较强的可扩展性

设计React Native主要是为了使得开发者使用常规的原生视图组件扩展和模块就可以开发出一个完整的应用，开发者能够复用已经构建的任何应用或者组件，并且还能够引入自己喜爱的原生Library。
ReactNative 组件

相关评价

天猫Web架构/Pad客户端负责人：如何评价 React Native？传送门。
Cordova VS React Native 谁是未来？传送门。

Hybrid APP、Native + WebView、React Native 三者对比

---

Hybrid APP

相关应用

• PhoneGap: Untappd、TripCase、Yoga+Travel
• AppCan: 求是网、富国富钱袋、鸡毛箭商城

优点

• 跨平台性，利于移植
• 全Web开发，减少开发人力成本；
• 能利用HTML5的各种特性

缺点

• 缓慢的渲染速度和难以驾驭的动画效果
• 性能取决于浏览器
• 不能使用设备的所有特性
• 不像原生应用，与系统不协调

Native + WebView

相关应用

• 微信、QQ、支付宝

优点

• 最稳定的Hybrid App开发方式，交互层的效率上由Native的东西解决了，而且架构上基本就是在App内写网页，连App Store都是采用了该种方案；
• 开发时分工非常明确，底层的由iOS开发人员处理，上层的由Web前端开发人员处理；
• 有效的在线参数配置方式，以便于及时在线替换界面；

缺点：

• 团队至少需要三个工程师，一个是Web的，一个是iOS、Android的
• 运行效率的权衡，多少界面采用Web来渲染，毕竟WebView的效率会相对降低

React Native

相关应用

• 天猫pad

优点

• 跨平台，兼容web、ios、android三大主流平台，两端并行开发（共享智慧）
• react 调用原生控件，性能由于H5框架
• 更好的手势识别，体验上接近原生
• 实施部署更新，避免市场审核慢
• 社区活跃

缺点

• 学习成本高
• 组件不全，第三方组件也不全
• ios和android代码并非通用，有可能会需要维护两套，或者在代码内做一些判断。