最后
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：
凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。
入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。
整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。
1.1）本教程共分为三个阶段，第一阶段主要是带大家入门，熟悉一些 RN 基础组件、JS 语法等等。该阶段结束后，基本可以搭建一个 App 框架了，甚至可以写一些简单的新闻类 App，在该阶段的教程中我仿写的是【开眼v3.1.2】。
1.2）本文中有大量的内容来自各家博客，所以出于对原文作者的尊重，我会直接给出原文链接并附上作者名字，如果看到对应的章节，请大家跳转到相应的网址去看一下。现在网上关于 RN 的文章太多，看的眼花缭乱结果却往往不容易形成体系，所以我只整理了一些必须的内容，而且相关的内容看我推荐这几篇文章基本也就够了。
1.3）在开始第一阶段的学习前，先来看一下完成这个阶段的学习后，我们大概能做出一个什么效果来。希望借此也能给你一些学习的动力吧！上图（被压缩太厉害了，凑合看吧）！
2.环境搭建（预计用时：1~2天）
按照RN中文社区的指导就可以了。不过过程中会遇到一些坑，我也附上我的踩坑记录。我建议大家可以先看一下踩坑记录，然后再开始安装环境。
2.1） 环境搭建踩坑指南:《一起学》安卓 React Native 开发–踩坑大全（持续更新…）
2.3）开发工具安装和配置 :
本文中使用 WebStorm 进行开发，也有人用 Atom 或 Sublime，对此我想说：赶快换 WebStrom 吧。为了不牵扯什么不必要的问题，下载地址我就不贴了，自行破*解吧。我最多只能说一下我用的是下面这个版本的。
安装好 WebStorm 后，为了更便捷的去开发，我们需要安装一些插件，以及进行一些常用配置。比如RN组件库的安装，添加一些常用的Live Templates等，下图是我添加的两个比较常用的，给大家参考一下，至于如何添加 Live Template 大家可以自行百度一下，比较简单，我就不过多赘述了。
配置Live Templates
3.Hello World（预计用时：0.5天）
不教大家写 Hello World 的教程,不是好教程！千万注意！【要看注释】哈！不然会很坑！
import React, { Component } from ‘react’;
import { AppRegistry, Text } from ‘react-native’;
class HelloWorldApp extends Component {
render() {
return (
);
}
}
// 注意，这里用引号括起来的 ‘HelloWorldApp’ 必须和你 init 时创建的项目名一致
AppRegistry.registerComponent(‘HelloWorldApp’, () => HelloWorldApp);
4.了解 index.android/ios.js
index.android.js 和 index.ios.js 分别作为 Android 手机和 iOS 手机上程序开始的入口，所以我们先来了解一下这个文件的结构。
1）组件导入区： 所有用到的组件都需要事先进行导入，包括样式也需要进行导入
**2）核心代码区：**所有逻辑代码编写的地方
**3）组件样式区：**render() 方法中用到的组件的样式，可以集中在这里编写
**4）注册启动组件：**组件只有注册后才能运行。这里用到的 AppRegistry 也需要在组件导入区进行导入
5.Flex布局（预计用时：2~3天）
Flex 布局是 Web 开发必备的技能，如果你是 Web 开发人员，可以直接跳过该部分内容。但是也需要注意的是 Web 中的一些属性在 RN 中是没有的，而且属性命名是通过小驼峰的方式进行命名的。后面我会附上我自己整理的关于 RN 组件支持的属性大全。可能不完善，但是常用的应该是有了。如果 Flex 布局没有练熟，还是不要看后面的了，所以请多花点时间在这里，甚至可以自己找一些比较有难度布局进行练习。
-
demo相关代码在这里，如果你已经下载了我整个 HelloRN 的项目，那代码就在app/01_flex_demo中
6.网络请求（fetch）（预计用时：2~3天）
1.如果 Flex 布局你已经练习的比较熟练了，那我们来学习一下网络请求。其实现在的 App 大多都比较简单，无非就是布局的展示，网络数据的获取等等。如果搞定这两块内容，那我们至少会从 RN 的学习中获取一些成就感了，也才有继续下去的动力。
2.这里要说明的是，如果你是 Android 或 iOS 工程师，那你需要习惯一下 RN 处理 Json 数据的方式（或者说 Web 处理 Json 的方式），我们通过网络请求回来的 Json Object 数据就可以直接进行操作，而不像 Native 开发，还需要通过什么额外的工具去进行 Json 的转换。这也是 Web 开发比较方便的地方。无论 Json Object 转 Json 字符串，还是 Json 字符串转 Json Object，都是非常方便的。如果非要把网络数据进行本地存储，那也很方便，通过解构赋值，直接就可以赋值给你创建的 Model 了。
看完上面两篇只是先了解一下 Fetch 的概念，不然后面的内容你会是懵逼的状态。
网络请求结束后，肯定是少不了数据的展示和更新，这时又会涉及到一个很重要的知识点，就是【props】和【state】，RN中所有数据的传递和控制，都离不开这两个部分。所以请务必在发起网络请求前就要搞懂这两个内容
接下来我们就可以开始愉快发起网络请求了，这里可能会用到箭头函数，这是 ES6 里面的语法（类似 Android 里面的 Lambda 表达式吧）。如果你是从文章的开始看下来的，那我相信你肯定已经看过在文章最开始我推荐的关于 ES6 的内容了，所以这里也不会有什么问题了
- demo 相关代码在这里，如果你已经下载了我整个 HelloRN 的项目，那代码就在app/02_fetch_demo中。
这里只涉及了简单的 fetch 用法，至于一些高级的用法，我们后面再讲。
如果看了 demo 中的代码还不明白如何进行网络请求的，那可以再看一下下面这篇文章。
7.三方库的使用（预计用时：2~3天）
如果你已经看到了这里，说明你已经可以成功的发起网络请求，并且展示到了界面上。万里长征我们这才算是踏出了第一步。为了增强学习的成就感，所以我在这里就加了一个关于三方库使用的学习。一些成熟的轮子，能更快的帮助我们搭建出一个常用 App 的原始框架，会让我们有继续学习的动力。这里我挑选了几个比较典型常用的框架进行演示。
1）首先是如何引入或删除一个 node 模块
-
《如何删除第三方组件》——我是刘成（删除后 Android 记得把所有 build 文件夹也删除，然后重新构建）
2）几个常用框架
| tab类 | banner类 |
| — | — |
| 1. react-native-tab-navigator (使用较简单) 更适合作为底部的 tab，使用方式也超级简单 | 1. react-native-swiper |
| 2. react-native-scrollable-tab-view (star 最多的 tab 类控件) 更适合作为顶部的 tab，类似今日头条中的效果 | 2.react-native-banner （这个是基于 react-native-swiper 的） |
| **备注：**教程的 demo 中只提供了 react-native-tab-navigator 的代码【戳这里】，如果你已经下载了我整个 HelloRN 的项目，那代码就在 app/eyepetizer_demo/MainPage.js 中。不过我也使用过一些其他的，而且还试了很多种，具体可以看一下我 demo 中的 package.json 就知道了。不过还是这个最易用。相对稳定一些 | **备注：**demo 中使用的是 react-native-banner【戳这里】，使用比较简单。如果你已经下载了我整个 HelloRN 的项目，那代码就在 app/03_library_demo/BannerTest.js。中并不是因为 swpier 怎么样，而是我先找到 banner，后面就懒得换了。目测 swiper 可以实现的功能就比较多了，比如引导页之类的，而且使用人数也更多，大家可以尝试一下 swiper。 |
加入这两个库后，我们的 demo 看起来是不是就有点像一个 App 了呢？
3）一些综合框架
当然我们也可以选择一个综合的框架进行集成使用。demo 中我使用了 native-base 框架。但是该框架在我使用过程中发现还是有很大局限性，而且还有一些 bug。至于 UI-Toolkit，按照官方的方式我尝试了很久并没有安装成功，不知道是什么原因，希望有安装成功的朋友可以回复一下。肯定会有人问那我究竟要使用哪一个框架，我觉得最开始入门学习的时候，最好都加进来试着使用一下，这样后面我们才能知道如何去取舍。
8.滚动视图（2~3天）
看完上面三方框架的使用后，我相信你对RN的学习又有动力了！那接下来的内容会让我们的 Demo 更加的像一个 App 了。现在的 App 基本都离不开列表数据展示，所以接下来的内容就让我们一起学习一下滚动视图的使用。在 RN 中滚动视图包含两部分的内容【ScrollView】和【ListView】。
8.1 ScrollView
其实和 Android 中的 ScrollView 一样，如果包含在 ScrollView 的组件超出屏幕范围后，就可以对内容进行滚动。而且 ScrollView 可以设置竖向或者横向的滚动。还有一些其他属性，具体可以看下面的内容。
-
附上 demo 代码【戳我】，对应教程 demo 中的 app/05_scroll_demo/ScrollViewTest.js
8.2 ListView
在 RN 中的 ListView 其实是继承了 ScrollView 的，这导致目前RN有一个比较头疼的问题，就是列表的性能问题，不过还好网上有很多关于 RN 性能优化的文章，但是我建议还是等我们对RN有一定了解以后再看不迟。目前只要知道是有解决方案的就可以了！
-
附上 demo 代码【戳我】，对应 demo 中的app/05_scroll_demo/ListViewTest.js和VideoListItem.js
大家可以仔细阅读一下上面这两篇文章，然后在结合 demo 中的代码，就一定可以理解这里的内容了。demo 中需要注意的地方是，我把 listview 的 item 布局抽取成一个单独的类进行管理的，这里面就会涉及到一些参数的传递，如果看不明白参数是如何传递的，那可以返回去看一下上面关于 props 和 state 的内容。因为后面会大量的用到这些内容。
最后
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：
凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。
入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。
整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。
扫一扫
8758
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
