Hello React Native Android 分享

Facebook 在 9 月份发布了 React Native Android 版本,我们对此进行了些开发尝试,然后做了小结最后形成了这份分享。分享主要面向对 React Native 了解不深的同学,主要介绍了 RN(React Native缩写,下同) 的特点、优势及现阶段的不足。另外因为本文是通过 PPT 改写,所以内容会有一些删减、省略。

我们做了一个 Android 的 Demo 应用,整体的运行效果非常不错,真机运行的截图如下:
rn-2

分享的主要内容包括:
rn-3

一、简介:

先来看看 RN 的定义:
rn-4

定义中可以提炼出 RN 有两个要点:1、基于 React.js;2、Javascript 开发原生应用;下面将分别做简单介绍:

1、基于 React.js

React.js 是 2013 Facebook 发布的用于构建用户界面的 JavaScript 框架,它应用与浏览器端,既然 RN 基于 React.js 所以它们有着共同的特点:

JSX 语法:它是一种类似 XML 的 Javascript 语法扩展,借助它我们能够直观的定义用户界面——JS 逻辑和 HTML 模板整合,并且为组件化打下基础,同时也减少代码量。
rn-5

组件化开发:这并不是一个新的概念,但在 Web 开发中因为前端语言的一些限制,组件化实现的成本比较高,而在 React 中实现起来是顺理成章的事情,所以我们可以将 UI 中功能相对独立的模块定义成组件,然后通过组件的组合、嵌套构成整体 UI,最终达到复用、或是业务逻辑分离的目的。

状态驱动界面:React 把组件看做一个有限状态机,当组件处于某个状态时,那么就输出这个状态对应的界面,我们只用简单的去更新某个组件的状态,React 会自动完成 UI 个更新,通过这种方式,很容易保证界面的一致性。

虚拟 DOM:在浏览器端 React 在内存中构建了一套虚拟 DOM,每当数据变化时,先会更新虚拟 DOM,再通过 diff 算法更新需要实际更新的浏览器 DOM,提高渲染效率。

随着 React Canvas 和 React Native 发布,React 俨然变成了一种架构模式,React 提出重新思考 UI 开发过程,其实不只是面向浏览器端,而是对面所有的前端,虚拟 DOM 是 React 对表现层的一种抽象,可以通过不同的渲染引擎生成不同平台下的 UI,而 React Native 一种基于 React 模式的具体实现。
rn-8

然后来看看第二个要点:Javascript 开发原生应用,原理大致如下,值得注意的是 JS 与 Native Module 间的通信是异步的:
rn-9

二、优势:

在 React Native 之前,前端就有很多入侵客户端的尝试,例如 Webview、Hybrid,但效果都不尽人意,主要还是性能、交互体验上达不到 Native 的水平,而 RN 另辟蹊径,可以说是结合了 Native 以及 Web 各自的优点,概括起来可以包含四点:
rn-10

1、Native 的人机交互体验

RN 通过三个方面来使应用达到 Native 的流畅体验:
原生组件:RN 提供许多组件,我们可以直接调用即可,这些组件都是平台中的原生组件;除此之外还包括 APIS,能帮助我们获取一些硬件能力。
rn-11

手势系统:RN 提供了三点让我们获取实时的点按反馈并且能像 Native 那样精确的控制整个点按操作的所有过程。
rn-12

动画系统:RN 提供了动画系统,结合手势系统,我们能够做出流畅且细腻的动画效果。

2、Web 的开发效率和发布能力

在开发方面,RN 为前端工程师提供了熟悉的语言、调试工具、工作方法来开发原生应用:
rn-14.5

Javascript:RN 中仍然使用 Javascript 语言进行开发,并且如果有 React.js 基础,那上手将变得更加容易。
样式&布局:RN 实现了 CSS 的子集,并且可以使用 Flexbox、绝对布局来进行排版,因为都是在 JS 文件中编写,所以在写 CSS 时可以直接使用变量,获得类似 LESS/SASS 预编译语言的便利。
调试:RN 可以直接调起 Chrome 开发者工具,我们可以像以前一样调试 JS 代码 —— 打 log,设置断点等等。

发布方面,RN 提供了与 Web 一致的热部署的发布能力,并且在 iOS 平台已经有相应的商业解决方案 —— Apphub;Android 平台还没有成熟的解决方案,但随着 RN 0.14.0 的发布,Android 上的实现将更为方便。
rn-16

3、扩展性

RN 的扩展性可以分为两个方面来说:
JS 模块的扩展性:借助 npm,我们可以像在开发 Node 程序一样方便的安装第三方模块,使用也非常简单,这样可以充分借助社区的力量,提高开发的效率。
rn-17

Native 组件的扩展性:虽然 RN 提供了不少组件,并且随着版本的更新在不断添加更多的组件,但肯定会有无法满足实际需求的情况,所以 RN 同时提供了 Native 组件、模块的封装方法,通过封装把接口暴露给 JS,从而可以实现自定义 Native 组件的调用。

4、跨平台性

跨平台性也可以分为两方面看,一方面是框架的跨平台性:目前 RN 支持 iOS 及 Android 平台,也有人实现了 Apple TV 版本,以后也有可能支持其它系统平台(Github 上已有不少 WP 的讨论)。

另一方面是代码的跨平台性:虽然现在 iOS 和 Android 都有许多平台特有的组件标签,例如SwitchAndroidSwitchIOS,但 Facebook 正在着力消除平台的差异,尽量统一组件标签,这样我们将会有 70%-80% 的代码是在 iOS、Android 上通用的,进一步降低跨平台开发的成本。除此之外还可以使用工具将 RN 代码转换成 React Web 代码,实现一套代码多处运行。
rn-19

三、开发流程

1、开发环境

目前 RN Android 可以在 OSX、Windows、Linux 系统下进行开发,推荐还是 OSX 系统,可以同时开发 iOS 及 Android 应用,遇到的坑也会少很多。以 OSX 系统为例,开发环境上我们需要安装 NodeJS 4.0+、Xcode 6.3+、最新的 JDK 以及 Android SDK。

2、初始化项目

在排除 GFW 的影响下只需两条命令就可以开始 RN 的开发了,这里我初始化了一个名为 HelloRN 的项目
rn-21

3、4 简单的例子是现场演示,所以这里就略过了。有兴趣的可以看看官方的 Demo:Movies

四、现存问题

1、系统支持

RN 现在仍然很不完善,存在各种 BUG,文档也不全。在系统支持方面,RN 支持 Android 4.1+(API16)、iOS7+,对于更低的系统只能使用 H5 方案。
rn-22

2、技能树

目前使用 RN 开发 Native 应用还是需要自己封装一些原生模块,难免会需要使用 Native 开发语言,对于前端团队而言,开发者需要掌握一些 Native 的开发技能,包括 Native 开发语言(Java、Obj-c)、调试、测试方法等等。
rn-23

3、性能 & 稳定性

因为我们的 Demo 没有实际上线,所以这里的数据样本是来自天猫的 iPad 客户端,包括启动速度、内存消耗、CPU 占用以及 Crash 率,总得来说是 RN 大幅度领先 Web App,稍逊于 Native App。
rn-24

rn-25

rn-26

1 comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注