描述

使用 React Native 完成一个手机端的通讯录

需求

有姓名、电话、公司、头像...
代码提交至 github
重构（使用比较高级的组件）
下拉加载数据，下拉不到底（不使用 Redux）
使用 Redux 完成下拉功能
使用 Redux 发送真正的请求获取数据
加载数据的过程中页面出现转圈功能
使用 react-native-router-flux

输出

Github 地址：Contact Demo
用到的主要内容：

image.png
相关文档：《React 生命周期》、《一个神奇的跨域问题》、《前端发请求用什么》、《Promise 学习笔记》、《React Native 从写 BUG 到修 BUG》

主要内容

React Native
Facebook 于 2015年4月开源跨平台移动应用开发框架，React 在原生移动应用平台的衍生物
从 0 到 1 搭建 DEMO 库
使用脚手架 react-native-cli，执行以下命令：
npm install -g react-native-cli # 全局安装 react-native-cli
react-native init projectName # 使用 react-native 初始一个项目
这个脚手架主要做以下几件事：
- 新建一个名为 projectName 的文件夹
- 在这个文件夹中建立 package.json 文件
- npm install --save react-native-cli 运行这个命令，安装 react-native 及其依赖，这些依赖放在 projectName/node_modules 文件夹中。package.json 中声明 react-native 作为 projectName 项目的依赖
- 全局安装 react-native CLI 工具，并且将控制权交给本地的 CLI 工具，也就是 projectName/node_modules/react-native/local-cli/cli.js 文件
- 执行 projectName/node_modules/react-native/init.sh 文件。用于生成标准代码的脚本，比如：index.ios.js、iOS 文件夹中的 Objective-C 代码，以及 projectName.xcodeproj 文件夹中的 Xcode 仙姑配置
Promise
在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。而 Promise 对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。
React 生命周期

image.png
- 父组件的 Will 函数在子组件 Will 函数之前执行（Will 函数包括 componentWillMount，componentWillUpdate）
- 父组件的 Did 函数在子组件 Did 函数之后执行（Did 函数包括 componentDidMount，componentDidUpdate）
Redux
Redux对于JavaScript应用而言是一个可预测状态的容器。换言之，它是一个应用数据流框架。最主要是用作应用状态的管理。简言之，Redux用一个单独的常量状态树（对象）保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建（使用actions和reducers）
react-native-router-flux
用于页面跳转
《深入 React 技术栈》