初识React Native

React Native简介

React-Native是facebook在2015年4月发布的跨平台移动应用开源框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物。React-Native的宣传语是“Learn once,write anywhere”,也就是一份代码支持2个平台,并且可以动态增加功能模块。React-native是使用Javascript开发,并在开发效率和用户体验间做了权衡,不仅开发效率高、发布能力强,同时拥有native app相媲美的用户体验。

React相关资源信息:

官网:https://reactjs.org
github地址:https://github.com/facebook/react

React-Native相关资源信息

官网:https://facebook.github.io/react-native/
github:https://github.com/facebook/react-native
中文社区:https://www.reactnative.cn/

系统支持

  • Android系统版本 >= 4.1(API 16)
  • iOS系统版本 >= 7.0

React Native的优点

1.性能媲美原生应用

虽然React-Natives使用 javascript 编写的代码,但实际上调用的是原生系统的API,使用的是系统原生的 UI 组件,所以拥有native app相媲美的用户体验。

2.开发效率高

相比于原生app开发,javascript 学习成本低、语法灵活。允许Web开发者使用现有的经验参与开发App。

3.组件化开发

React-Native强调将应用划分成多个互不相关的组件,每个组件作为一个独立的视图。这种类似搭积木的开发方式使得代码结构清晰、通用性高、可移植性高。上一个项目的某些组件,可以很方便地拿来在下一个项目中使用。对于那些优秀的第三方组件,也能很方便地集成到我们项目中来。

4.节约开发成本

百分之90多界面可以通过 React Native 开发,一份代码同时可以适配 Android 和 iOS。并通过一些手段自动匹配不同屏幕大小的手机,再也不需要自己去计算视图的大小和位置。

5.实时远程调试

React Native开启了实时重载之后,代码一改,app 就自动更新成最新,对于 UI 的搭建简直是省了不少的编译时间。同时可以打开 XCode实时的看到所有的log信息。

6.代码热部署

我们知道AppStore审核流程超级久。而由于 React Native 是用的 JavaScirpt 来写的代码,实时编译的过程能让我们实现应用像网页一样做到热更新,随时发布。真正能够做到上架审核一次,永久 0 审核更新

7.有效降低移动应用安装包体积

对于普通复杂度的移动应用,使用React-Native 实现的安装包会比原生代码实现的安装包大。而当移动应用功能越复杂,React-Native 安装包体积相比原生代码安装包就越小。 比如当原生代码实现的安装包大于15MB时,使用 React-Native改写代码后,安装包就小于原生代码实现的安装包。

React-Native的不足

框架还不太成熟

React-Native从2015年发布到现在不到3年,算是一个很年轻的项目,它的资源、教程、周边套件等等都完全不能与现有的移动开发平台相比。当然,React-Native也支持不了最新的Android或iOS特性,在稳定上仍有很多不足之处。

性能并非媲美原生

虽然React-Native开发的App用户体验可以媲美原生,但是性能并非媲美原生,性能方面还是有一些损耗的,特别是交换大数据的时候非常明显。

语言等门槛(React/ES6)

React-Native是构建在React的基础之上,React使用ES6作为编程语言,而ECS6是2015年确立的JS语言新标准,对于现有的前端JavaScript开发群体来说,这些门槛仍然需要先跨过,没先学过是用不了React-Native的。

跨平台问题

ios和android代码并非通用,有可能会需要维护两套,或者在代码内做一些判断。并非网上大家说的,写一次代码,多端通用,尤其是实际开发的时候,还是需要了解底层原理,自己开发跟原生桥接的组件,这个对普通前端来说是一个很大的挑战。

React Native与其它移动技术的比较

在 React Native 出现前,我们通常会选择这三种移动技术(Native App、HTML5、Hybrid)之一进行开发。

  • Native App:开发原生应用自然性能最好,功能强大。但多平台版本的开发、维护要花费大量的人力物力。
  • HTML5:虽然有 Web 的优势,即灵活的布局能力、免发版的敏捷迭代潜力、优秀的跨平台特性。在新闻资讯等一些强排版、弱交互的展示类 App 上大展拳脚。但由于 WebView 在移动设备上的性能制约,始终难成大器,这也是 Facebook 放弃其的原因。
  • Hybrid:以 Cordova(PhoneGap)为代表的 Hybrid 方式集 Native App 和 Web 优点于一体,使二者相互补短。

而 React Native 思想与上面三者都不一样。它的底层引擎是 JavaScript Core,但调用的是原生的组件而非 HTML5 组件。这样运行时可以做到与 Navive App 相媲美的性能体验,同时因为 JavaScript 代码可以使用后端强大的 Web 方式管理,既可以做到高效开发,也可以实现快速部署和问题热修复。

快速学习React-Native

学习React Native需要掌握的知识内容有: Java,Object-C,JavaScript ,Node.js基础,JSX语法基础,Flexbox布局,简单ruby命令。
通过下面的一系列文章,通过开发一个商城App(模仿京东商城),可以是您快速的学习React-Native的环境搭建、UI布局、网络访问、架构设计、原生接口调用等知识。

专栏文章列表

  1. React-Native开发环境搭建
  2. 使用React-Navigation(即将更新)

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页