What is React Native?

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

在我看来,React Native的核心就是利用React所购建的抽象层(主要就是那套JSX+组件系统)+ JavaScript语言来书写原生应用,其实React Native同样是React庞大生态的一个扩展,当你学习React之后,你能够书写Web/Native(IOS,Andorid)乃至未来的PC桌面端(windows/Mac),也就是React的核心

Learn once, write anywhere

其实现在React我认为已经远远不单单是一个框架那么简单了,它可以被认为是一种开发方式,一种构建视图层的模式,并且他已经得到了很多公司的认可。你一旦使用上了React,你便会发现你的思维方式,你构建应用的方式都会被React所引导,这可能意味团队成员的代码会变的越来越相似,越来越规范。

可以说之所以React他的核心可以如此方便的复用在Web/Native的原因其实就在于他本身就没有让Web的思想限制住它,他从一开始就视图本身上去思考问题,它就是为了视图而生的。

另外React的生态真的异常庞大,你会发现诸如Vue这样的框架其实大部分主要模块,比如vuex,vue-router都是出自官方之手,但React的生态相比较之家则热闹了很多,几乎是各路人马。

那么React Native开发起来是否真的可以从React Web完美过渡呢?

React Native 与 React的差异

首先让我们简单理解一下React Native的核心。

  1. 你的所有JSX语法将会被编译真正的原生控件
  2. JavaScript将会通过JSCore引擎执行
  3. RN会使用原生代码(Java/c++)和JS进行通讯
  4. JS代码的作用在于通知原生代码如何什么操作

其实在查阅资料之后,我对于其原理的大致了解如下,首先对JS进行一个分割或者说基本处理,然后调用JSCore, 传入运行该JS代码的环境,参数,然后JSCore就能返回给你JS代码的运行结果,如此反复,再加上事件回调处理,时间模块,等等。这有点类似与SICP中介绍的编译器的原理。

其实我在了解有这么一个可以用React写原生应用的工具的时候我当然是非常激动的,最近我终于实际的上手,写了一个小说阅读器,虽然功能并不是特别丰富,但这也让我了解了RN的很多方面。接下来就描述一下我认识到与React的区别

首先,你熟悉擅长的HTML标签将会完全弃用,取而代之的是React为你提供的组件系统,比如View基本对应DIV,Text对应span,Image对应img。这将会导致一些额外的成本。

接下来是样式,这个差异其实并不是特别大,基本沿用了Flex-box布局+margin+padding就能解决大部分的布局问题。

另外一个方面是回调系统,你的回调监听将会依赖React给你提供的组件,你需要仔细的阅读文档。

其实我个人体验下来发现最耗费我时间的还是原生所特有的一些东西,像是获取电量,物理按键监听,如果你不会原生开发,那么有些东西在没有开源模块的情况下你其实无法进行开发的,你需要自己写原生代码来扩展你的App。所以原生与React的这层壁垒可能还是有点牢固。

PS:环境搭建部署的感觉还是很痛苦的,另外坑其实不多,我遇到大部分都可以网上找到相关解决。

总结:拥有一定学习成本,但相对于学习原生开发来说,很低。

达达看书

主要是实现我心目中一个阅读器的基本功能吧!主要的功能有在线搜书,阅读,更换字体大小,更换背景,夜间模式,缓存,保存到书架,音量翻页,目录显示与章节切换。

其实这个阅读器最难解决的问题是,如何进行正确的分页,也就是如何计算每一页在某种字体行高下,所能容纳的极限字数。据我的查询资料的话,原生是可以精确获取的,截取某个页面的最后一个完整显示字符的位置。那这个RN光靠自身的系统可能不够,所以我用了一个按行读取的方法。

即计算规定行高下最高多少行,规定字体大小下每行最大多少个字。相乘就能获取到每页的最多字数,不过其实还是不过特别精确,因为涉及到换行,空格,书源的一些格式问题。

另外值得一提的是书源是通过爬虫扒下来然后解析的方式做到的,我这里使用的一种类似插件的模式,即核心负责爬HTML,书源模块负责具体的抓取那些内容,这个可以通过选择器做到,也就是说我以后更新书源可以通过更新书源模块就可以,非常快速就能添加一些书源,我认为是比较适合在线阅读器这么一种应用的需求的。

另外写的比较仓促,没有做特别多的优化,以后有机会了考虑直接重写,第一次写RN感觉把握的还是比较差的。 搜索

首页&书架

阅读器

总结

Web是未来,Native是当下,而我们在未来与当下之间。

APK

source