我最近工作不是很忙,想接触下新的东西,于是我准备学习学习React Native。这个传说很牛比的东西。我在简书里记录我的学习过程吧。
一、React Native 的简介
- React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
- React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。React Native的设计理念:既拥有Native的用户体验、又保留React的开发效率。
二、React Native 与 原生、H5的比较
- 从用户体验和性能方面来说
原生 > RN > H5
React Native 的性能接近原生 ,因为RN提供的组件是对原生API的暴露,这样就算是用js写出来的代码,实质上是调用了原生API。我们在使用APP的时候,有时候会有H5页面,在应用跳转到这个页面的时候,我们会明显感觉到页面的卡顿,界面渐入到用户眼前,体验很不好。
- 从维护的简易来看
H5 > RN > 原生
从它的简介就可以看出,理论上我们只需要一套语言就可以很大程度的去兼容iOS和Android的版本。是不是有点一劳永逸的意思。
- 从开发效率来看
再开发RN应用的时候,我们使用flexbox布局,了解并且学会这个布局,我们在构建应用界面的时候就能够很大覆盖地去使用这一套布局用在iOS和Android布局上。
三、学习RN需要掌握的一些知识
了解网页开发的同学们在进行RN开发的时候就很容易上手了。
下面给出一些学习资源链接
给出我在网上找到的简单明了的flex口诀:
![alignContent.png](https://img.haomeiwen.com/i3290272/71bd4548abb62d17.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ![alignItems.png](https://img.haomeiwen.com/i3290272/0fc78bfa26698cbf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ![flexDirection.png](https://img.haomeiwen.com/i3290272/4da4920408e2f11b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ![flexWrap.png](https://img.haomeiwen.com/i3290272/3bf738d42f3a5d68.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)最后:
React Native中文网:http://reactnative.cn
阮一峰的博客:http://www.ruanyifeng.com/home.html
第一次写,内容大多是一些大神的整合。
网友评论