React Native移动开发实战

1 React Native入门

1.1 React Native基本知识

1.1.1 React简介
虚拟DOM（Virtual DOM）
Components组件
数据流（Data Flow）
JSX语法
1.1.2 React Native简介
APP占用体积小
实现跨平台开发
相对成熟的技术
支持动态更新
1.1.3 React Native工作原理
虚拟DOM和MVVM的对比

1.2 React Native与其他跨平台技术的对比优势

1.2.1 Web流
1.2.2 代码转换流
将Java转成Objective-C
将Objective-C转成Java
XMLVM
1.2.3 编译流
C++方案
Xamarin
Go
1.2.4 虚拟机流
Java虚拟机
Titanium/Hyperloop
React Native

1.3 小结

2 React Native环境搭建与调试

2.1 React Native环境搭建

2.1.1 Mac环境下搭建React Native
安装Node.Js
安装npm
安装Yarn
安装Homebrew
安装Watchman
React Native版本升级
2.1.2 React Native开发IDE
安装Atom
2.1.3 创建React Native项目
2.1.4 运行React Native项目
2.1.5 iOS环境
2.1.6 Android环境
2.1.7 Windows环境下搭建React Native

2.2 React Native 项目结构剖析

2.2.1 React Native文件结构
2.2.2 iOS文件结构及代码分析
2.2.3 Android文件结构及代码分析

2.3 React Native开发IDE介绍

2.3.1 Atom+Nuclide
安装Nuclide
使用Nuclide运行项目
2.3.2 WebStorm

2.4 React Native调试技巧

2.4.1 JavaScript调试技巧
console.log日志
JavaScript调试器
断点调试技巧
2.4.2 React Native调试
iOS调试
Android调试
调试面板介绍
Element Inspector命令

2.5 React Native代码测试

2.5.1 使用Flow进行类型检查
Flow安装与配置
2.5.2 Jest单元测试
Jest安装与配置
单元测试（Android）
2.5.3 集成测试
集成测试（Android）
集成测试（iOS）
快照测试（iOS）

2.6 小结

3 React Native开发基础

3.1 FlexBox布局

3.1.1 FlexBox简介
3.1.2 FlexBox布局模型
3.1.3 FlexBox布局属性
display-flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
3.1.4 FlexBox伸缩项目属性
order
flex
align-self
3.1.5 FlexBox在React Native中的应用
flex
flexDirection
alignSelf
alignItems
flexWrap
justifyContent
3.1.6 FlexBox综合实例

3.2 ES6语法基础

3.2.1 组件的导入与导出
组件导出
组件导入
3.2.2 类
创建类
组件类方法
组件的属性与属性类型
3.2.3 状态变量
3.2.4 回调函数
3.2.5 参数
参数默认值
不定参数
拓展参数
3.2.6 箭头操作符
3.2.7 Symbol
Symbol属性名遍历
Symbol.for()和Symbol.keyFor()
3.2.8 解构
对象解构
数组解构

3.3 React JSX

3.3.1 JSX入门
3.3.2 JSX语法
载入方式

3.4 样式

3.4.1 申明与操作样式
语法
3.4.2 样式分类
行内样式
内嵌样式
外部样式
3.4.3 样式使用
StyleSheet.create
3.4.4 样式传递

3.5 手势与触摸事件

3.5.1 触摸事件
TouchableHighlight使用实例
TouchableHightLight
TouchableNativeFeedback（仅限于Android）
TouchableOpacity
TouchableWithoutFeedback
3.5.2 手势系统响应
PanResponder
3.5.3 辅助功能
辅助功能属性
accessibilityLabel(Android、iOS)
accessibilityTraits (iOS)
onAccessibilityTap (iOS)
onMagicTap (iOS)
accessibilityComponentType (Android)
accessibilityLiveRegion (Android)
importantForAccessibility (Android)

3.6 小结

4 常用组件介绍

4.1 HTML元素与原生组件

4.1.1 文本组件
4.1.2 图片组件
加载本地图片
加载网络图片
resizeMode
4.1.3 TextInput组件
TextInput简单使用
TextInput属性和方法
TextInput示例
4.1.4 ScrollView组件
ScrollView属性
ScrollView方法
ScrollView示例

4.2 结构化组件

4.2.1 View组件
View简单使用
View组件使用
4.2.2 ListView组件
ListView常用属性
ListView案例：商品列表
商品列表标题
商品列表
完整示例代码
4.2.3 Navigator组件
Navigator
Navigator属性和方法
Navigator参数传递
第三方库
4.2.4 WebView组件
WebView属性及方法
WebView实例

4.3 平台特定组件

4.3.1 TabBarIOS和TabBarIOS.Item组件
TabBarIOS属性及方法
TabBarIOS.Item属性及方法
使用案例
4.3.2 ToolbarAndroid组件
ToolbarAndroid属性及方法
ToolbarAndroid示例
4.3.3 SegmentedControlIOS组件
SegmentedControlIOS属性及方法
SegmentedControlIOS示例
4.3.4 ViewPagerAndroid组件
ViewPagerAndroid属性及方法
ViewPagerAndroid示例

4.4 Touchable系列组件

4.4.1 TouchableWithoutFeedback
TouchableWithoutFeedback属性及方法
4.4.2 TouchableHighlight
TouchableHighlight属性
TouchableHighlight示例
4.4.3 TouchableOpacity
TouchableOpacity属性
TouchableOpacity示例
4.4.4 TouchableNativeFeedback
TouchableNativeFeedback属性和方法
TouchableNativeFeedback示例

4.5 小结

5 常用API介绍

5.1 AppRegistry

APPRegistry属性和方法
AppRegistry实例

5.2 StyleSheet

代码层面
性能层面
StyleSheet属性
StyleSheet方法
StyleSheet渲染组件原理
StyleSheet示例

5.3 AppState

AppState属性和方法
AppState基本用法

5.4 AsyncStorage

AsyncStorage方法
AsyncStorage示例

5.5 PixelRatio

pixelratio方法
pixelratio示例

5.6 Animated

Animated属性
Animated方法
AnimatedValue
AnimatedValueXY
Animated使用
Animated示例
Animated.timing()
Animated.spring()
Animated. parallel()

5.7 Geolocation

Geolocation方法
Geolocation示例

5.8 NetInfo

属性和方法
5.8.1 获取网络状态
Android获取网络状态
iOS获取网络状态
5.8.2 网络状态监听
5.8.3 判断网络是否连接

5.9 小结

6 组件封装

6.1 组件的生命周期

挂载（初始化）
更新（运行）
移除（销毁）

6.2 第三方库

6.2.1 react-navigation
react-navigation简介
StackNavigator示例
react-navigation其他属性
StackNavigator参数属性
6.2.2 react-native-tab-navigator
react-native-tab-navigator属性及方法
react-native-tab-navigator示例
6.2.3 react-native-scrollable-tab-view
react-native-scrollable-tab-view属性及方法
react-native-scrollable-tab-view示例
6.2.4 react-native-image-picker
react-native-image-picker示例
Android环境配置
iOS环境配置
上传服务器
6.2.5 Mobx
状态（State）
派生（Derivations）
Action
Mobx基本概念
Mobx API
Mobx与Redux对比
6.2.6 react-native-art
基础组件
属性
Surface
Shape
Text
Path
绘制直线/虚线
绘制矩形
绘制文本

6.3 自定义组件

6.3.1 组件的导出导入
6.3.2 TabbarView封装
6.3.3 九宫格布局封装
6.3.4 下拉刷新组件封装
RefreshControl属性
RefreshControl方法
RefreshListView封装
RefreshListView示例

6.4 小结

7 网络与通信

7.1 通信机制

7.1.1 React Native与Android通信
Java层
C++层
JS层
C++与JS通信
Module Registry
Native与JS通信
Native调用JS
JS调用Native
7.1.2 React Native与iOS通信
属性传递
原生模块调用JS
JS调用原生模块

7.2 Promise 机制

7.2.1 Promise 简介
Promise对象
Promise状态
then
catch
7.2.2 Promises基本用法
7.2.3 在React Native中使用AJAX技术
综合示例

7.3 网络请求

7.3.1 XMLHttpRequest请求
构造函数
方法
属性
XMLHttpRequest实例
7.3.2 fetch请求
fetch语法
fetch请求
WebSocket
fetch网络请求示例

7.4 小结

8 混合开发高级篇

8.1 React Native调用iOS原生组件

8.1.1 React Native链接原生库
8.1.2 React Native调用Objective-C创建的原生组件

8.2 React Native调用Android原生组件

8.2.1 编写原生UI组件
VideoViewPackage.java
8.2.2 编写JavaScript端实现
VideoPlayView.js

8.3 小结

9 热更新与打包部署

9.1 iOS应用打包

9.1.1 iOS应用配置
添加应用配置
配置应用图标和启动图像
配置网络白名单
9.1.2 打包离线Bundle
9.1.3 设置发布Scheme
9.1.4 发布应用

9.2 Android应用打包

9.2.1 打包离线Bundle
9.2.2 生成签名密钥
9.2.3 生成签名APK
命令方式打包
Android Studio打包
配置应用图标和启动图像

9.3 热更新

9.3.1 热更新原理
9.3.2 热更新配置
安装命令
手动关联
配置Bundle URL
iOS的ATS例外配置
9.3.3 登录与创建应用
9.3.4 添加热更新功能
获取appKey
检查与下载更新
切换版本
首次启动、回滚
9.3.5 发布热更新版本
发布iOS应用
发布Android应用
发布新的热更新版本

9.4 小结

10 基于LBS的天气预报应用开发

10.1 需求分析与确定

10.1.1 需求分析
10.1.2 需求确定
10.1.3 整体功能分析
10.1.4 技术与架构分析
移动接入技术
移动访问技术
移动终端定位技术
天气数据来源

10.2 项目设计

10.3 程序入口与工具模块

10.3.1 程序入口
10.3.2 数据模型定义与数据解析
10.3.3 数据存储
初始化
数据的保存、读取和删除操作
10.3.4 工具类

10.4 模块开发

10.4.1 组件封装
10.4.2 天气预报页面开发
10.4.3 Navigation导航

10.5 运行结果

11 O2O移动团购应用

11.1 需求分析

11.1.1 需求分析
11.1.2 功能分析

11.2 应用设计

11.2.1 模块划分
11.2.2 添加第三方库

11.3 项目搭建与工具模块开发

11.3.1 程序入口
11.3.2 搭建主框架
11.3.3 导航栏封装
11.3.4 WebView封装
11.3.5 字体样式工具类

11.4 功能开发

11.4.1 分类导航入口开发
思路分析
11.4.2 专题活动开发
11.4.3 商品列表开发
11.4.4 详情页面开发
11.4.5 Modal分享弹窗开发

11.5 完成开发

11.5.1 添加闪屏页
11.5.2 修改应用图标和名称
Android篇
iOS篇

11.6 小结

思维导图