第1篇React Native入门和基础 2
第1章 为什么要学习React Native 2
1.1看透React Native 2
1.1.1 React Native与React .j s 2
1.1.2 React Native的跨平台 3
1.1.3解剖React Native应用的结构 4
1.2 React Native的特点 5
1.2.1其一:Learn Once, Write Anywhere 5
1.2.2其二:简单易学的开发语言 6
1.2.3其三:接近原生应用的性能和体验 7
1.2.4其四:完善的生态系统 7
1.3搭建React Native开发环境 9
1.3.1安装原生开发工具——Android 9
1.3.2安装原生开发工具——iO5 11
1.3.3安装Node .j s 12
1.3.4安装React Native 13
1.3.5安装其他辅助工具 14
1.4第一个React Native应用 16
1.4.1初始化项目 16
1.4.2运行项目 17
1.4.3调试项目 18
1.5小试牛刀——更改React Native项目源码 18
1.6小结 20
第2章 全局解析React Native开发的基础技术 21
2.1开发具备的基础知识说明 21
2.2 Git版本控制工具 22
2.2.1安装Git 22
2.2.2 Git常用命令 22
2.3 React Native的JSX解决方案 24
2.4 React Native的Flexbox布局 25
2.4.1 flexDirection设置组件的排列 26
2.4.2 flexWrap设置是否换行 28
2.4.3 justifyContent设置横向排列位置 30
2.4.4 alignItems设置纵向排列位置 31
2.4.5 alignSelf设置特定组件的排列 33
2.4.6 flex设置组件所占空间 34
2.5如何调试React Native项目 35
2.6实战——设计一个电商App 37
2.6.1电商App的模块划分 37
2.6.2设计首页布局 41
2.6.3实现搜索栏 44
2.6.4设计轮播广告 46
2.6.5展示商品列表 51
2.6.6实现交互功能和状态栏 52
2.7小结 56
第2篇React Native应用开发实战 58
第3章React Native的组件(1) 58
3.1创建新的电商App 58
3.1.1移植旧电商项目 58
3.1.2重构现有的代码 60
3.2完善搜索框功能——TextInput组件 64
3.2.1搜索提示框 64
3.2.2调试搜索结果 66
3.2.3优化搜索框样式 67
3.3完善轮播广告——Image组件 68
3.3.1使用网络图片 68
3.3.2使用本地图片 69
3.3.3添加指示器组件 71
3.4完善商品列表——ListView组件 73
3.4.1对图片资源进行重构 74
3.4.2重新定义商品模型 75
3.4.3商品布局的优化 76
3.5拖曳刷新列表——RefreshControl组件 80
3.6添加页面跳转功能——Navigator组件 83
3.7二级页面的跳转——TouchableOpacity组件 86
3.8实现页面间的数据传递 89
3.9小结 90
第4章React Native的组件(2) 91
4.1只支持特定平台的组件 91
4.1.1实现多页面分页TabBarIOS/ViewPagerAndroid 91
4.1.2加载指示器——Activity Indicator 96
4.1.3地图——MapView 97
4.1.4渲染——Picker 98
4.1.5选择范围——Slider 99
4.1.6开关组件——Switch 100
4.1.7打开网页——WebView 101
4.2第三方组件 102
4.2.1 react-native-swiper的使用 103
4.2.2 NativeBase的使用 104
4.2.3 NativeBase如何解决跨平台问题 111
4.3小结 113
第5章 原生平台的适配和调试 114
5.1 iOS平台的适配 114
5.1.1 Images.xcassets适配 115
5.1.2自动布局Auto Layout 115
5.1.3 Size Class适配 116
5.2 iOS开发的调试技巧 117
5.3 Android平台的适配 118
5.3.1适配原理 118
5.3.2常用的适配属性 119
5.4 Android平台的调试技巧 122
5.5小结 124
第6章React Native的服务器端处理 125
6.1学习Node .js 125
6.1.1什么是Node .js 125
6.1.2为什么选择Node.js 126
6.1.3安装和使用nvm 128
6.1.4 Node.js的开发流程 129
6.2服务端接口的设计:RESTful 132
6.3实现电商App的服务器端接口 133
6.3.1 Express框架 133
6.3.2查询商品接口 138
6.3.3新建商品接口 142
6.3.4更新商品接口 143
6.3.5删除商品接口 144
6.4网络前后端交互的原理fetch 145
6.5 App从服务器获取数据 146
6.5.1获取商品信息 148
6.5.2更新商品信息 151
6.5.3新建商品 157
6.5.4删除商品 158
6.6 App数据的本地化存储 160
6.6.1 AsyncStorage异步键值存储 160
6.6.2 SQLite数据库 164
6.6.3 Realm数据库 166
6.7小结 168
第7章 常用React Native API 169
7.1屏幕设置相关API 169
7.1.1获取屏幕宽高——Dimensions API 170
7.1.2获取屏幕分辨率——PixelRatio API 173
7.2动画API 174
7.2.1 RequestAnimationFrame API帧动画 175
7.2.2 LayoutAnimation API布局动画 177
7.2.3 Animated API高级动画 179
7.3组件、React Native API、原生平台API 184
7.3.1组件和API 184
7.3.2 API和原生平台API 184
7.4实现自己的Platform API 185
7.4.1支持iOS平台 186
7.4.2支持Android平台 188
7.5为应用添加更丰富的API 189
7.5.1提示框和编辑框——AlertIOS 190
7.5.2前后台状态变化——AppState 193
7.5.3 Android物理“返回键”——BackAndroid 195
7.5.4日期和时间选择器——DatePickerAndroid/TimePickerAndroid 196
7.5.5基于位置的Geolocation 200
7.5.6键盘事件——Keyboard 202
7.5.7设备联网状态——NetInfo 204
7.5.8权限设置——Perm issionsAndroid 205
7.5.9悬浮提示框——ToastAndroid 207
7.6小结 208
第3篇React Native混合编程 210
第8章React Native与原生平台混合编程(1 ) 210
8.1创建并移植项目 210
8.2访问设备 211
8.2.1访问iOS设备 213
8.2.2访问Android设备 214
8.3访问相册 217
8.3.1读取iOS相册中的图片 219
8.3.2读取Android相册中的图片 224
8.4 React Native与原生平台的通信原理 228
8.5 React Native平台调用原生页面 229
8.5.1 React Native平台调用原生iOS页面 231
8.5.2 React Native平台调用原生Android页面 234
8.6原生平台调用React Native组件 238
8.6.1 iOS平台调用React Native组件 238
8.6.2 Android平台调用React Native组件 239
8.7小结 240
第9章React Native与原生平台混合编程(2) 241
9.1使用相机拍摄图片 241
9.1.1使用iOS相机拍摄 241
9.1.2使用Android相机拍摄 244
9.2添加图片选择提示框 247
9.2.1 iOS平台的提示 247
9.2.2 Android平台的提示 249
9.3重构图片选择库 251
9.3.1 iOS平台的重构 251
9.3.2 Android平台的重构 253
9.4向iOS项目中添加React Native支持 256
9.4.1新建iOS项目 256
9.4.2新建React Native项目 257
9.4.3在iOS页面打开React Native组件 259
9.5向Android项目中添加React Native支持 261
9.5.1新建Android项目 261
9.5.2新建React Native项目 261
9.5.3在Android页面打开React Native组件 262
9.6小结 264
第10章 电商App的复盘 265
10.1电商App的文件 265
10.1.1 JavaScript文件 266
10.1.2 iOS原生代码文件 266
10.1.3 Android原生代码文件 267
10.2电商App的结构 267
10.2.1 Flexbox的整体布局 268
10.2.2应用的逻辑结构 268
10.2.3应用的通信过程 269
10.3优化和改进 270
10.3.1 redux是什么 270
10.3.2 redux代码示例 271
10.3.3 redux生态 274
10.4用到的组件 275
10.5小结 276
第4篇App的发布和更新 278
第11章App的发布 278
11.1 App Store苹果应用商店 278
11.1.1加入开发者计划 278
11.1.2生成发布证书 280
11.1.3注册App ID 283
11.1.4生成描述文件 283
11.1.5打包应用 284
11.1.6发布到App Store 284
11.2 Android应用商店 285
11.2.1生成签名文件 285
11.2.2打包应用 287
11.2.3发布到应用商店 288
11.3小结 289
第12章App的热部署 290
12.1什么是热部署 290
12.2解析React Native应用的工作原理 290
12.3实现React Native的热部署 292
12.3.1服务端实现 292
12.3.2客户端实现 292
12.4微软的热部署方案CodePush 295
12.4.1 CodePush简介 295
12.4.2 CodePush安装和注册 295
12.4.3集成CodePush SDK 297
12.44更改iOS应用 297
12.4.5更改Android应用 301
12.5小结 303
附录A ES 6语法 304