react-native从入门到精通搭建app(一) 一一 简介
文章栏目131113110
发布时间:2019-09-19 14:56:01

概述

一、简介

1、React-Native介绍

  React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
  React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)

2、React Native主要特性

支持原生iOS组件

React Native主张“Learn once, write everywhere”而非其他跨平台工具一直宣扬的“Write once, run everywhere”。通过React Native,开发者可以使用React-Native 提供的组件,让应用界面在其他平台上亦能保持始终如一的外观、风格。

异步执行

JavaScript应用代码和原生平台之间所有的操作都采用异步执行模式,原生模块使用额外线程,开发者可以解码主线程图像、后台保存至磁盘、无须顾忌UI等诸多因素直接度量文本设计布局。

触摸处理

React Native引入了一个类似于iOS上Responder Chain响应链事件处理机制的响应体系,并基于此为开发者提供了诸如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。

3、为什么要用 React-Native

目前主流的应用大体分成如下几类:Native App, Web App 、 Hybrid App 与 React-Native App

react-native从入门到精通搭建app(一) 一一 简介

Native App

即原生开发模式,开发出来的是原生程序,不同平台上,Android和iOS的开发方法不同,开发出来的是一个独立的APP,能发布应用商店,有如下优点和缺点。
优点:

直接依托于操作系统,交互性最强,性能最好

功能最为强大,特别是在与系统交互中,几乎所有功能都能实现
缺点:

开发成本高,无法跨平台

升级困难

维护成本高

Web App

即移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问,不是独立APP,无法安装和发布Web网站一般分两种,MPA(Multi-page Application)和SPA(Single-page Application)。而Web App一般泛指后面的SPA形式开发出的网站(因为可以模仿一些APP的特性),有如下优点和缺点。
优点:

开发成本低,可以跨平台,调试方便

版本升级容易

维护成本低

无需安装 App,不占用手机内存(通过浏览器即可访问)

缺点:

性能低,用户体验差

依赖于网络,页面访问速度慢,耗费流量

功能受限,大量功能无法实现(无法调用原生 API)

临时性入口,用户留存率低

Hybrid App

即混合开发,也就是半原生半Web的开发模式,有跨平台效果,实质最终发布的仍然是独立的原生APP(各种的平台有各种的SDK),这是一种 Native App 和 Web App 折中的方案,保留了 Native App 和 Web App 的优点。
优点:

开发成本较低,可以跨平台,调试方便

维护成本低,功能可复用

更新较为自由(只下载资源不更新 apk )

学习成本较低(前端开发人员不用学习底层 api)

功能更加完善,性能和体验要比起web app 好

缺点:

相比原生,性能仍然有较大损耗

不适用于交互性较强的app(主要适用于新闻阅读类与信息展示类的 APP)

React Native APP

Facebook发起的开源的一套新的APP开发方案,Facebook在当初深入研究Hybrid开发后,觉得这种模式有先天的缺陷,所以果断放弃,转而自行研究,后来推出了自己的“React Native”方案,不同于H5,也不同于原生,更像是用JS写出原生应用,有如下优点和缺点
优点:

开发成本在 Hybrid 和 Native 开发之间 ,大部分代码还是可复用的,

性能体验高于Hybrid,性能相比原生差别不大

技术日益成熟,发展迅猛

缺点:

门槛相对 Web App 与 Hybrid App 来说相对高一点(也需要了解 Native 层)

不同开发模式的对比:

react-native从入门到精通搭建app(一) 一一 简介

开发模式对比

4、React-Native 框架简单描述

react-native从入门到精通搭建app(一) 一一 简介

说明

React:也就是在不同平台上编写基于React的代码,“Learn once, write anywhere”。
Virtual DOM:相对Browser环境下的DOM(文档对象模型)而言,Virtual DOM是DOM在内存中的一种轻量级表达方式,可以通过不同的渲染引擎生成不同平台下的UI,JS和Native之间通过Bridge通信。
Web/iOs/Android: 不同的平台