建议在阅读本文之前先下载数据。

目录 III. 章节内容（预计时间：9.5~14.5天） 前言

从最开始接触（以下简称RN）到写下第一篇博文，一直没写过相关文章。随着微信小程序的正式发布，一个概念再次被推到大众面前，那就是全栈前端。这个概念是什么？大致意思就是一个人可以同时写，iOS，Web程序。可能有一些很牛的人，写Java，OC，JS都很厉害，但是我相信大多数人还是像我一样，毕业后只搞一个方向的开发，所以想成为全栈前端还是比较难的。

但随着 RN 的发布，这一切似乎都变成了可能。这也是社会进步对生产力提升的需求不断导致的必然发展趋势。虽然这个概念早在 RN 之前就有了，但之所以在这个时候火起来，说明时机已经到来。就像手机上的指纹识别，苹果并不是第一个把它融入到手机里的，但是苹果用对了时代，现在几百块钱的手机都带指纹识别了。所以如果去年你没有关注和学习 RN，没关系，但是随着微信小程序的发布，这再一次说明全栈前端是一个趋势。如果你还没有抓住机会上手，那么...其实也没什么，专心写好文章就行，毕竟也需要专精！

哈哈~前面说的有些危言耸听，不过还是希望有空余时间，热爱和关注前端开发的朋友能够尽快搭上这趟列车。虽然RN现在还有很多问题，比如性能问题，但是随着版本的不断迭代，相信这个问题迟早会得到解决。你问我那会是什么时候？现在RN版本是0.40，1.0发布的时候会不会是呢？哈哈~这个谁能知道，不过在我有生之年一定会有的！说了这么多，下面我们正式开动列车吧！

2. 回答一些问题

首先主要是因为我们公司业务拓展的要求，而我对 RN 开发很感兴趣，因为它确实能提高生产力，所以公司就指派我负责 RN 在公司移动端的推广工作。其次虽然网上有很多关于 RN 的资料，但是并没有比较系统的学习计划，看视频课程效率太低，也导致我在学习 RN 的过程中浪费了很多时间去收集资料。所以我想写一篇文章记录我的学习过程，和大家分享我从零入门的经验，目的是让更多想学 RN 的人不再浪费时间跑来跑去收集资料，能够快速上手并学会。

1. 热爱前端开发，一直想开发一些可见的东西

2. 对RN的兴趣和对女朋友的兴趣一样，并且愿意去了解他

3.不需要懂Web开发，但是最好有一定的iOS开发经验。

4.对RN完全不了解的菜鸟（要是碰巧有RN老用户看到这篇文章，我想说。。。哥，要不要收我为徒啊，我有特殊的天赋，code 的水平不错。。。哥。。哎。。。你别走。。。我还跪着呢！）

看！多看！再看一次！敲！多敲一次！再敲一次！

呵呵~认真的说，一定要配合我提供的demo里的代码一起看。而且我会附上我在学习过程中整理出来的思维导图文件，可以结合文章一起看，这样学习思路会更清晰。

HTML 和 CSS 没什么要求，基本了解就可以了，看不懂也没关系。但是你还是需要懂一点 JS（妈的，多少才算“一点”？这就像菜谱里加一撮盐一样难搞）。好吧，我再详细解释一下。花一个星期把阮一峰先生的《6 入门》详细看完 ES6 就够了。至于 JS 涉及的一些其他特性，比如闭包，等你入门之后再去研究。关于网络请求的写法，我们也可以先不管 ES7 的变化。

是不是需要我们通过 init XXXX 新建一个项目，针对每个知识点写一个 demo 呢？当然不需要了，我们可以把所有代码写成一个 demo，通过分包的方式进行管理（app 文件夹自己创建，名字自己定义），这样比较方便。然后通过 init XXXX 将每个 demo 导入到 ./ios.js 文件中即可使用。

你怎么不问我能不能保证就业？

三、章节内容（预计时间：9.5~14.5天） 1、简介

1.1）本教程分为三个阶段，第一阶段主要是入门，熟悉一些 RN 基础组件，JS 语法等。经过这个阶段，你基本上可以搭建一个 App 框架，甚至可以写一些简单的新闻应用了。本阶段的教程我模仿的是 [开言 v3.1.2]。

1.2）本文很多内容来自各个博客，所以出于对原作者的尊重，我会直接提供原文链接，并附上作者姓名。如果看到对应章节，请跳转到对应网站看看。现在网上关于RN的文章太多了，往往很难形成体系，所以我只整理了一些必要的内容，相关内容基本看我推荐的文章就够了。

1.3）在开始第一阶段的学习之前，我们先来看看完成这一阶段的学习之后，能够做出什么样的效果。希望这也能给大家一些学习的动力吧！上图（压缩的太多了，随便看看就好）！

2.环境搭建（预计时间：1~2天）

按照RN中文社区的说明来就行了。不过过程中会遇到一些坑，我也附上了我的坑记录，建议大家可以先看完坑记录，再开始安装环境。

2.1）环境搭建指南：《一起学》开发-陷阱完全指南（持续更新...）

2.2）

2.3）开发工具安装与配置：

本文用于开发，也有人用Atom或者，对此我想说一句：赶紧换吧。为了不牵扯到不必要的问题，我就不贴下载地址了，大家自己破解吧。最多说一句，我用的是下面这个版本。

安装完之后，为了更加方便的进行开发，我们还需要安装一些插件以及进行一些常用的配置，比如安装RN的组件库以及添加一些常用的Live，下图是我添加的两个常用的，供大家参考，至于如何添加Live，大家可以自行百度，比较简单就不赘述了。

[ ] 取消黄色预警 ——余连林

配置 Live

3.（预计时间：0.5天）

一个不教所有人的教程不是好教程！小心！[阅读评论]哈！否则这将是一个陷阱！

import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native'; class HelloWorldApp extends Component { render() { return ( Hello World! ); } } // 注意，这里用引号括起来的 'HelloWorldApp' 必须和你 init 时创建的项目名一致 AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

4. 了解 ./ios.js

..js和.ios.js分别是手机和iOS手机启动程序的入口，我们先来了解一下这个文件的结构。

1）组件导入区：所有用到的组件都需要提前导入，包括样式。

2）核心代码区：所有逻辑代码都在这里编写

3）组件样式区：在（）方法中使用到的组件的样式可以写在这里

4）注册并启动组件：组件注册后才能运行，这里用到的组件也需要在组件导入区导入

5.弹性布局（预计时间：2~3天）

Flex 布局是 Web 开发必备技能，如果你是 Web 开发者，可以直接跳过这部分。不过需要注意的是，Web 中有些属性在 RN 中是没有的，而且属性名采用驼峰命名。后面我会附上自己整理的 RN 组件支持的属性列表，可能不完善，但常用的应该都有。如果你对 Flex 布局不熟悉，就不要看了，剩下的就请多花点时间在这里，你甚至可以找一些比较难的布局来练习一下。

6.网络请求（）（预计时间：2~3天）

1、如果Flex布局练好了，再来学网络请求吧。其实现在大部分APP都比较简单，无非就是显示布局，获取网络数据等。如果能搞定这两部分，学好RN至少会有一定的成就感，也会有继续学下去的动力。

2.这里需要说明的是，如果你是 iOS 工程师，那么你需要习惯 RN 处理 Json 数据的方式（或者说 Web 处理 Json 的方式）。我们可以直接操作网络请求返回的 Json 数据，而不像开发那样需要任何额外的工具来转换 Json。这也是 Web 开发更加方便的地方，不管是 Json 转 Json 字符串，还是 Json 字符串转 Json，都非常方便。如果你有需要将网络数据存储在本地，也非常方便，通过解构赋值，可以直接将你创建的值赋值。

看完上面两篇文章，只要先理解概念就可以了，不然后面的内容会让你一头雾水。

网络请求完成后，数据的展示和更新是不可避免的，这时候就会涉及到一个很重要的知识点，那就是[]和[]。RN中所有数据的传输和控制都离不开这两个部分。所以在发起网络请求之前请务必了解这两个内容。

接下来我们就可以愉快的开始进行网络请求了，这里可能会用到箭头函数，这是ES6中的语法（和里面的表达式类似），如果你从文章开头看的话，相信你一定看过我在文章开头推荐的关于ES6的内容，所以这里不会有问题。

这里只讲简单的使用，至于一些高级的用法，我们以后再讲。

如果你看了demo中的代码还是不明白如何进行网络请求的话，可以阅读下面的文章。

7.第三方库的使用（预计时间：2~3天）

如果你读到了这里，说明你已经成功发起了网络请求并显示在界面上，我们才迈出了万里长征的第一步。为了提升学习的成就感，我增加了对第三方库使用的学习，一些成熟的轮子可以帮助我们更快速的搭建一个常用App的原创框架，从而让我们有继续学习的动力。这里我选取了几个典型常用的框架进行演示。

1）首先，如何导入或删除node模块

2）几个常用的框架

标签类

1. --tab-（更易于使用）更适合作为底部的选项卡，并且也超级容易使用

1.——

2.---tab-view（星星最多的tab类控件）比较适合作为顶部tab，类似今日头条的效果。

2.--（基于--）

注意：教程中的 demo 只提供了 --tab- 的代码（点击这里）。如果你下载了我的整个项目，代码在 app//.js 中。不过我也用过其他的，也试过很多。你可以在我的 demo 中的 .json 中看到具体细节。不过这个是最容易使用的。相对比较稳定。

注：demo用的是--【点击这里】，使用比较简单，如果你下载了我的整个项目，代码在app//.js里，不是因为什么，只是我先发现的，后来懒得改了，可以实现更多的功能，比如引导页，用的人也比较多，你可以试试。

添加完这两个库之后我们的demo是不是有点像App了呢？

3）一些综合框架

当然我们也可以选择一个综合性的框架进行集成使用，在demo中我用的是-base框架，但是在使用过程中发现这个框架还是有很大的局限性，也存在一些bug。至于UI-，我按照官方的方法试了好久才安装成功，不知道为什么，希望安装成功的朋友可以回复一下。肯定会有人问应该用哪个框架，我觉得最好在刚开始学习的时候都加进去试试，这样后面才知道该怎么选择。

8. 滚动查看（2~3天）

看完以上三方框架的使用，相信你又有学习RN的动力了！下面的内容会让我们的Demo更像一个App。如今大部分App都离不开列表数据的展示，那么接下来的内容我们就来学习如何使用滚动视图吧。在RN中，滚动视图包含内容[]和[]两部分。

8.1

其实跟 是一样的，如果包含的组件超出了屏幕范围，内容是可以滚动的。并且可以设置垂直或水平滚动。还有一些其他的属性，详见后面的内容。

8.2

在RN中其实是使用了继承的，这就导致了RN目前比较头疼的一个问题，就是列表的性能问题。好在网络上有很多关于RN性能优化的文章，不过我建议大家等对RN有了一定的了解再去看。就目前而言，只要知道有解决办法就行！

8.3（下拉刷新）

这里我只说下原生下拉刷新的使用，这个组件支持和iOS，不过在两个平台上的展现方式略有不同，支持和组件刷新，使用也很简单，看代码就好。

此时需要特别注意，在刷新完成后，需要通过一个方法手动改变刷新状态。所以这里会涉及到另一个概念【状态管理器】。相信大家在尝试入门RN之前，已经在很多文章中看到过它，但是却完全不明白它到底是什么，这让很多人一头雾水。包括我，当初被告知该怎么做的时候，我完全一头雾水。

但是当我了解到这一点的时候，我终于明白了我们为什么需要这样的东西，因为我们需要管理的[状态]太多了。如果我们手动管理的话，状态太多会很烦人。所以有一个工具可以帮助我们更好地管理这些状态。至于如何使用，我们会在后期详细讲到。

当然，如果你愿意，你也可以使用一些第三方组件来实现和 iOS 上一样的刷新体验。我找到了一些兼容两个平台的下拉刷新功能的组件，你可以试试。至于哪个更好，我没用过，所以很难说，但附上的星星数量至少可以给你一些参考。

8.4 上拉加载

官网没有提供这样的组件，只能自己实现。按照网上的教程尝试了一些方法，但不是特别满意，效果比较生硬。所以这部分暂时空缺，后续会完善。不过上文下拉刷新部分提到，可以支持上拉加载更多，有需要的话可以集成这个框架使用。

9. 总结

我之所以分阶段写这篇文章，是希望大家能够循序渐进、系统地学习RN，并且每个阶段都有成就感。能不能简单称之为【成就感学习法】？我也不知道有没有这个词，反正我觉得学习过程中的成就感特别重要。学完这个阶段，如果对RN还有兴趣，那就进入第二阶段的学习吧。如果现在还迷茫，劝你还是放弃，专心做好就好。iOS或者Web也行，呵呵~