RN学前考虑、成果展示

2019-08-29 本文已影响0人意一ineyee

目录

一. 学前考虑

1. 什么是RN

2. 为什么要学习RN

3. 我的RN学习线路和学习资料

二. 成果展示

1. 项目介绍

2. 项目结构

3. 项目下载地址

一. 学前考虑

1. 什么是RN

RN（全称React Native）是Facebook开源的一个跨平台开发框架，用来开发iOS和安卓应用。若非一些特别复杂的功能，基本上可以做到一次开发，iOS和安卓两端都能用，但即便就是要实现一些特别复杂的功能，那也只需要两端分别开发很少的原生代码，和RN混合开发一下就可以了。2015年4月推出的，到现在4年有余，应该相对稳定了，论坛的环境应该也发展的比较充分了。

RN基于JS、JSX语法（是一种在JS代码中插入XML结构的语法，它是一种写法，而不是一种语言）、CSS+Flex布局来开发App，因此Web前端学起RN来会非常容易，而移动端学起来就不像前端那么容易了，需要有一定的JS、CSS、HTML基础。

2. 为什么要学习RN

借此，我们捎带来对比一下目前存在的App开发模式，并引出为什么要学习RN。（当然除了下面列出来的，还有用各种跨平台框架写的App，如阿里的Weex App，Google的Flutter App，学了再说。）

2.1 Web App

Web App是指纯用H5写的App，它不是我们常说的手机应用，而是轻应用——也就是我们在浏览器里经常看到的那种应用，可以说它仅仅是一个网页的触屏版，它不需要你下载安装，只要你安装了浏览器就行。

优点：

开发成本低
维护成本低
可以实时更新

缺点：

性能和体验差：性能和体验差其实主要是因为手机的性能和网络状况差导致的，那现在随着手机越来越强悍，网络状况越来也优秀，性能和体验其实也差不到哪去了。
功能受限，无法获取一些系统级别的权限：其实这才是现在Web App最主要的缺点，例如无法获取系统级别的推送通知、位置信息、通讯录、支付等，也无法实现系统给我们提供的更复杂的手势操作等。

2.2 Native App

Native App就是指我们iOS和安卓纯用OC/Swift和Java自己开发的App了，它的优点和缺点基本上和Web App恰好是相反的。

优点：

性能和体验优
功能强悍，你想让用户有什么功能就做什么功能给他们用，很爽的

缺点：

开发成本高：因为它不是跨平台的，所以你需要一个iOS和一个安卓两个人来开发同一款App，仅仅是为了把App运行在不同的平台上，那项目开发中遇到的问题呀、沟通呀、乱七八糟肯定不如一个人开发一款App但能运行在多个平台上来得轻松。
维护成本低：App开发完之后，其实版本迭代的工作就没那么大了，但你依旧需要养这一个iOS和一个安卓，来分别维护同一项目的两份代码。
无法实时更新：不像Web App，你改了代码下次用户打开就已经是更新之后的App了，Native App的话我们每次更新一个版本都需要打包、提交审核、等待审核、上线这么一套流程，流程也无所谓了，更关键的是如果我们有一个紧急更新今天就要用，应用审核却要一两天，你说要命不要命。

2.3 Hybrid App

Hybrid App，混合开发的App，现在大多数指的是原生和H5的混合开发，即有一部分用原生有一部分用H5开发出来的App，H5开发的部分其实就是把H5页面运行在我们原生的WebView上。

它的目标是分别吸收Web App和Native App的优势，弥补彼此的不足，并努力去打造类似于Native App的体验，但仍受限于技术等很多因素，不能很完美地达到，总的来说Hybrid App这种方案还是比较不错的。

那平常我们开发Hybrid App常见的又有两种方式，即原生主体型和H5主体型。

原生主体型：这种方式还是以原生开发为主体，只是在需要的地方由H5来开发，运行在我们的WebView上，这种方式其实就相当于原生开发了，只有少部分H5界面实现了跨平台效果嘛。
H5主体型：这种方式是以H5开发为主，基本上所有的业务都在他们那边实现了，我们只需要提供一个WebView的壳就行了，但是还有一个需要我们配合的就是他们无法实现的一些功能得要我们原生来做，这种方案可以说是实现跨平台了。

2.4 RN App

RN App则是指用RN这个框架写出来的App。

优点：

真正实现了跨平台开发，可以支持热更新，开发和维护成本大大降低。
RN在view层其实是对原生的控件做了一层包装，用JS代码来写，最终还是会被渲染成原生组件的，它的性能和体验要比Hybrid App这种跨平台开发方式高很多。

缺点：

需要额外的学习成本。
有些复杂的功能，还是需要和原生混合开发。

3. 我的RN学习线路及学习资料

RN开发技术点

基本功阶段：

JS基础（选择性学习、按需学习）：阮一峰的《JS入门教程》、阮一峰的《ES6入门教程》

CSS布局（选择性学习、按需学习）：W3school的CSS基础教程

Flex布局：阮一峰的《Flex布局：语法篇》、阮一峰的《Flex布局：实例篇》

实战阶段：

慕课网CrazyCodeBoy的RN实战教程

CrazyCodeBoy的技术博客

React Native中文网

二. 成果展示

1. 项目介绍

这是一款我在React Native学习过程中，编写的实战项目，它是一款纯React Native项目，可以同时运行于iOS、安卓双平台。通过该项目我掌握了RN开发必备的一些JS基础，如解构赋值、箭头函数、this和super关键字、异步编程的Promise和async-await等；掌握了RN开发必备的CSS布局+Flex布局；掌握了RN组件之间的常用通信方式；项目中使用react-navigation搭建项目导航框架；使用Redux和React-Redux来管理某些全局State，很简单清晰地实现更换主题色、自定义标签/语言、标签/语言排序等功能；使用fetch实现网络请求，使用AsyncStorage实现数据持久化，并通过两者的结合实现“优先读取缓存型”离线缓存策略；适配了全面屏，并做了启动白屏的优化；集成了CodePush，支持实时地线上更新App；同时还有WebView、电话、短信、邮件、剪切板等小功能的使用。项目之外，我还针对性地学习了RN和iOS的混合开发技术。