RN系统学习指南

1 开发环境&IDE的配置

2 Hello World

2.1  代码见项目中00_helloworld_demo

3 了解index.android/ios.js

4 Flex布局方式

4.1  《Flex 布局教程：语法篇》阮一峰

4.2  《Flex 布局教程：实例篇》阮一峰

  使用Flex实现骰子的6种布局

4.3  组件支持的所有属性（见Excel附件）

  React-Native的基本控件属性方法

4.4  相关代码见项目中01_flex_demo

5 网络请求node-fetch

5.1  为什么使用Fetch《传统 Ajax 已死，Fetch 永生》

5.2  使用Fetch先了解一下Promise 概念

5.3  先搞懂props和state

  《React Native知识11-Props(属性)与State(状态)》

  《混合开发的大趋势之一React Native Props (属性)》

  《 混合开发的大趋势之一React Native State (状态)》

5.4  网络请求数据并展示到UI上，代码见项目02_fetch_demo

  如果有疑问请看： 《React Native网络请求及UI展示》

6 三方库的使用

6.1  如何引入第三方组件

6.2  如何删除第三方组件（Android 删除后记得把所 有 build 文件夹也删除，然后进行重新构建）

6.3  用tab先来练练手

  react-native-scrollable-tab-view（star最多）

  react-native-tab-navigator（使用简单）

6.4  综合组件库(按照star排名) 还在选来选去？谁说不能一起用

  react-native-elements

  NativeBase

  ui-toolkit（我下载报错，你们试试呢）

7 滚动视图

7.1  ScrollView使用，附《ScrollView属性大全》

7.2  使用 ListView 加载网络数据，代码见项目05_scroll_demo

  《React-Native组件用法详解之ListView》

  《React Native从网络拉取数据并填充列表》

7.3  下拉刷新的使用

  使用原生的 RefreshControl 组件，但是要做好刷新状态的管理， 代码见项目05_scroll_demo 中的 ListViewTest 类， 最后给个链接《RefreshControl属性大全》-江青青

  react-native-pull-to-refresh

  react-native-gifted-listview

  react-native-smart-pull-to-refresh-listview

7.4  上拉加载的使用

7.5  给滚动的列表加个广告位

7.5.1   react-native-banner

7.5.2   react-native-swiper

8 组件生命周期

 《React-Native生命周期详解》

9 Touch事件分发

 简单Touch使用,搞懂这几个控件就行，链接官方文档 代码见项目05_scroll_demo的VideoListItem类

  TouchableHighlight

  TouchableNativeFeedback

  TouchableOpacity

  TouchableWithoutFeedback

 《React Native 触摸事件处理详解》 http://www.race604.com/react-native-touch-event/ 文章很好，详细记录了RN的Touch事件传递方式，还有如何进行手势识别。不过为了快速学习，可以后面再回来看这部分内容。在自定义组件的内容中我还会详细讲解这个部分的内容。不过如果你现在有时间，可以先了解一下。

10 页面跳转，通信（传值、回传）

10.1  使用导航器Navigator进行页面跳转、传值、回传 代码见项目05_scroll_demo和eyepetizer_demo

  《Navigator组件的使用介绍》

  《Navigator组件详解以及实例》

  《React Native页面跳转、传值与回调》

  《React-Native中禁用Navigator手势返回》

  《 react native navigator关闭侧滑手势》

  两个都可以

(《React-Native中禁用Navigator手势返回》, 《 react native navigator关闭侧滑手势》)

10.2  使用物理键返回（仅Android）：参考文章中的双击退出App实现方式可能会有一些问题，我在 demo 中已修复，代码位置：app/eyepetizer_demo/StartUp.js。不过将返回键事件传递给其他页面的方式可以看下。因为是比较常用的

11 获取用户输入

11.1  这个其实比较简单，就光看RN中文社区的文章就足够了 （如果看了以后还没有搞懂，那就在看下后面这两篇吧）

  《React Native控件之TextInput组件介绍以及实际登录界面实现》

  《React Native常用组件之TextInput》

11.2  控件对象的获取：关于ref和refs的使用

  什么是ref？可以通俗的解释一下类似Android开发中的控件id和iOS中的tag，我们给一个组件添加了ref属性之后，可以在在其他方法中通过this.refs.xxxx获得该组件，类似Android中的findViewById吧。注意是ref是设定和refs是获取。具体可以看下这篇文章

11.3  计时器和定时器的使用，获取验证码倒计时的制作网上也看了很多文章，但基本和RN中文社区这篇一样；结合demo中的代码看一下基本就会用了。代码见app/06_input_demo/TextInputTest.js。计时器会导致一些问题，目前我还没找到解决办法，明明在组件被清除时暂停了计时，但仍然一直在运行。有知道的可以回复我下

12 数据存储

12.1  借助Native代码，进行存储

12.2  使用RN提供的AsyncStorage API进行存储，可以直接使用封装好的react-native-storage：https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md

12.3  使用sqlite数据库：https://github.com/almost/react-native-sqlite

12.4  使用realm：https://realm.io/docs/react-native/latest/

13 播放视频

13.1  比较可惜的是RN目前并没有提供给播放视频组件，只能找三方组件

13.2  《react-native-video》 https://github.com/react-native-community/react-native-video

13.3  集成过程中一个bug

14 动画的使用

15 RN与原生混合开发

16 性能优化

 《携程是如何做React Native优化的》 https://zhuanlan.zhihu.com/p/23715716

17 自定义组件

18 Redux的使用

 《学习Redux刷新了我的前端App状态管理观》 该文旨在理解什么是Redux，为什么要用Redux http://www.jianshu.com/p/94d8f8a36ab0

 《Redux 入门教程（一）：基本用法》 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

 《Redux 入门教程（二）：中间件与异步操作》 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html

 《Redux 入门教程（三）：React-Redux 的用法》 http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

 《Redux官方中文文档》 http://cn.redux.js.org/index.html

19 React Native原理解析

20 优秀的博客

20.1  《React 技术栈系列教程》阮一峰

20.2  《React Native专题》江清清

21 调试

 React Native调试技巧与心得

22 踩坑大全

 《一起学》安卓React Native开发--踩坑大全（持续更新...）

 《React Native疑难点,问题深坑最强总结帖(不断更新中)》

  react-native 在使用require加载本地图片时报Unexcepted character

 关于ReactNative 中 this 踩过的坑

第一阶段《相识》

(开发环境&IDE的配置, Hello World, 了解index.android/ios.js, Flex布局方式, 网络请求node-fetch, 三方库的使用, 滚动视图)

《必备技能》

(优秀的博客, 调试, 踩坑大全)

第二阶段《相知》

(组件生命周期, Touch事件分发, 页面跳转，通信（传值、回传）, 获取用户输入, 数据存储, 播放视频, 动画的使用)

第三阶段《相爱》

(RN与原生混合开发, 性能优化, 自定义组件, Redux的使用)