React Native移动开发实战

本书以实战开发为原则，以ReactNative应用开发为主线，iOS和Android双平台开发为副线，通过典型的电商类App实例，详细介绍了ReactNative应用开发所涉及的所有知识。本书共12章，分为4篇。涵盖的主要内容有：搭建开发环境、Nuclide、各种命令行工具（Git、Node.js）、布局与调试、组件、API、第三方组件、基于Node.js的服务器、FetchAPI、AsyncStorage/SQLit/Realm数据库存储、原生平台接口开发、Redux开发框架、应用打包发布、热更新与CodePush等。本书适合iOS、Android原生平台应用开发者，以及有兴趣加入移动平台开发的JavaScript开发者阅读。当然也适合大中专院校及社会培训学校作为移动开发的教材使用。

袁林，2010年毕业于南京邮电大学。毕业后一直从事移动App研发工作，先后服务于中兴通讯、三星电子和南京企友等公司。历任App不错工程师、项目经理等职位。具备丰富的Node.js后端服务构建、Native客户端开发和ReactNative客户端开发经验。长期致力于应用各种IT新技术提升生产效率和解决实际问题。曾经带队自主研发多个电信级企业应用。

前言
第1篇ReactNative入门和基础
第1章为什么要学习ReactNative2
1.1看透ReactNative2
1.1.1ReactNative与React.js2
1.1.2ReactNative的跨平台3
1.1.3解剖ReactNative应用的结构4
1.2ReactNative的特点5
1.2.1其一：LearnOnce，WriteAnywhere5
1.2.2其二：简单易学的开发语言6
1.2.3其三：接近原生应用的性能和体验7
1.2.4其四：完善的生态系统7
1.3搭建ReactNative开发环境9
1.3.1安装原生开发工具——Android9
1.3.2安装原生开发工具——iOS11
1.3.3安装Node.js12
1.3.4安装ReactNative13
1.3.5安装其他辅助工具14
1.4第一个ReactNative应用16
1.4.1初始化项目16
1.4.2运行项目17
1.4.3调试项目18
1.5小试牛刀——更改ReactNative项目源码18
1.6小结20
第2章全局解析ReactNative开发的基础技术21
2.1开发具备的基础知识说明21
2.2Git版本控制工具22
2.2.1安装Git22
2.2.2Git常用命令22
2.3ReactNative的JSX解决方案24
2.4ReactNative的Flexbox布局25
2.4.1flexDirection设置组件的排列26
2.4.2flexWrap设置是否换行28
2.4.3justifyContent设置横向排列位置30
2.4.4alignItems设置纵向排列位置31
2.4.5alignSelf设置特定组件的排列33
2.4.6flex设置组件所占空间34
2.5如何调试ReactNative项目35
2.6实战——设计一个电商App37
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篇ReactNative应用开发实战
第3章ReactNative的组件（1）58
3.1创建新的电商App58
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章ReactNative的组件（2）91
4.1只支持特定平台的组件91
4.1.1实现多页面分页TabBarIOS／ViewPagerAndroid91
4.1.2加载指示器——ActivityIndicator96
4.1.3地图——MapView97
4.1.4渲染——Picker98
4.1.5选择范围——Slider99
4.1.6开关组件——Switch100
4.1.7打开网页——WebView101
4.2第三方组件102
4.2.1react—native—swiper的使用103
4.2.2NativeBase的使用104
4.2.3NativeBase如何解决跨平台问题111
4.3小结113
第5章原生平台的适配和调试114
5.1iOS平台的适配114
5.1.1Images.xcassets适配115
5.1.2自动布局AutoLayout115
5.1.3SizeClass适配116
5.2iOS开发的调试技巧117
5.3Android平台的适配118
5.3.1适配原理118
5.3.2常用的适配属性119
5.4Android平台的调试技巧122
5.5小结124
第6章ReactNative的服务器端处理125
6.1学习Node.js125
6.1.1什么是Node.js125
6.1.2为什么选择Node.js126
6.1.3安装和使用nvm128
6.1.4Node.js的开发流程129
6.2服务端接口的设计：RESTful132
6.3实现电商App的服务器端接口133
6.3.1Express框架133
6.3.2查询商品接口138
6.3.3新建商品接口142
6.3.4更新商品接口143
6.3.5删除商品接口144
6.4网络前后端交互的原理fetch145
6.5App从服务器获取数据146
6.5.1获取商品信息148
6.5.2更新商品信息151
6.5.3新建商品157
6.5.4删除商品158
6.6App数据的本地化存储160
6.6.1AsyncStorage异步键值存储160
6.6.2SQLite数据库164
6.6.3Realm数据库166
6.7小结168
第7章常用ReactNativeAPI169
7.1屏幕设置相关API169
7.1.1获取屏幕宽高——DimensionsAPI170
7.1.2获取屏幕分辨率——PixelRatioAPI173
7.2动画API174
7.2.1RequestAnimationFrameAPI帧动画175
7.2.2LayoutAnimationAPI布局动画177
7.2.3AnimatedAPI高级动画179
7.3组件、ReactNativeAPI、原生平台API184
7.3.1组件和API184
7.3.2API和原生平台API184
7.4实现自己的PlatformAPI185
7.4.1支持iOS平台186
7.4.2支持Android平台188
7.5为应用添加更丰富的API189
7.5.1提示框和编辑框——AlertIOS190
7.5.2前后台状态变化——AppState193
7.5.3Android物理“返回键”——BackAndroid195
7.5.4日期和时间选择器——DatePickerAndroid／TimePickerAndroid196
7.5.5基于位置的Geolocation200
7.5.6键盘事件——Keyboard202
7.5.7设备联网状态——NetInfo
7.5.8权限设置——PermissionsAndroid
7.5.9悬浮提示框——ToastAndroid
7.6小结
第3篇ReactNative混合编程
第8章ReactNative与原生平台混合编程（1）
8.1创建并移植项目
8.2访问设备
8.2.1访问iOS设备
8.2.2防问Android设备
8.3访问相册
8.3.1读取iOS相册中的图片
8.3.2读取Android相册中的图片
8.4ReactNative与原生平台的通信原理
8.5ReactNative平台调用原生页面
8.5.1ReactNative平台调用原生iOS页面
8.5.2ReactNative平台调用原生Android页面
8.6原生平台调用ReactNative组件
8.6.1iOS平台调用ReactNative组件
8.6.2Android平台调用ReactNative组件
8.7小结
……
第9章ReactNative与原生平台混合编程（2）
第10章电商App的复盘
第4篇App的发布和更新
第11章App的发布
第12章App的热部署
附录AES6语法

前言随着手机和移动互联网技术的日益成熟，移动应用的领域也从如何开发，发展到如何更高效、更低成本地开发。传统的原生平台（iOS、Android）开发技术虽然比较成熟，但由于开发效率和成本的限制，已经越来越无法满足移动互联网应用的开发需求。    所以，具有简单、迅速、跨平台的优势，而且基于Web开发语言和布局技术的React Native得以迅速流行，并一举夺得跨平台开发技术的头筹。    目前市场上大多数React Native书籍主要以翻译和讲解官方文档为主，并未从开发实际应用出发，通过典型案例来指导读者提高开发水平。本书以实战为主旨，通过完整的电商类App项目实例，来介绍React Native中常用的组件、API、布局、第三方组件和原生接口，让读者全面、深入、透彻地理解React Native主流的开发和设计方法，提升实际开发水平和项目实战能力。    本书涉及的概念较多，下面给出一个技术点云图，希望读者有所了解。    本书的进阶顺序，也给出如下一个图，便于读者了解。    本书特色1．每一步都有详细的源码和实例参考为了便于读者理解本书内容，提高学习效率，本书的所有内容都有详细的源码和实例参考。对于这些源码和实例，作者均亲自编写和验证，杜绝复制、粘贴代码以敷衍读者的不负责任行为。本书源码可以在https://coding.net/u/learnreactnative/p/learnreactnative-sourcecode/ git里下载。    2．内容涵盖React Native开发的各个方面本书涵盖React Native组件、API、布局、第三方组件以及原生接口等React Native应用开发的各个方面，尽量保证不出现知识“死角”。凡是涉及的一些技术（如原生、瀑布流、耦合性和JSON），也给出了概念或原理的解释。    3．结合工具助力更高效的React Native开发在本书“实战”讲解的过程中，详细介绍了React Native开发工具Nuclide的使用、React Native命令行工具的用法及各种调试工具（包括布局、断点及实时加载等）的使用，不仅教读者如何开发，还教读者如何更高效地开发。    4．项目案例典型，实战性强，有较高的应用价值本书以开发一个电商类应用为例，涵盖了React Native应用开发中会用到的所有重点知识，设计和源码做到拿来可用，方便应用开发者随时查阅和参考。    5．收获的不仅仅是React Native平台和编码对于一些学习能力较强的读者，完全可以在React Native开发文档的帮助下快速学习和掌握React Native。而本书希望读者在掌握平台和编码之外，还能够了解实际应用开发过程中涉及的软件开发流程、应用架构设计、代码重构技巧，以及原生平台与其他跨平台开发的相关知识，让读者融会贯通地理解应用开发技术。    本书内容及知识体系第1篇  React Native入门和基础（第1～2章）本篇介绍了跨平台开发的主流方案和React Native基础知识，主要包括开发环境搭建、React Native命令行工具和React Native布局调试。    第2篇  React Native应用开发实战（第3～7章）本篇介绍了React Native实际应用开发中常用的技术，主要包括基本组件、使用第三方组件、搭建基于Node.js的服务器为应用绑定真实数据、fetch API、AsyncStorage/SQLite/ Realm数据库存储、更多React Native组件和API的用法、原生平台接口开发等。    第3篇  React Native混合编程（第8~10章）本篇主要总结和回顾了前7章所开发的电商类应用的技术和架构，主要包括应用的文件结构、Flexbox的整体布局、应用的逻辑结构、应用的通信过程及进一步改进的地方和思路，其中就包括了redux开发框架。    第4篇  App的发布和更新（第11～12章）本篇主要介绍了React Native应用打包和发布的全过程，配以详细的截图说明，并且对React Native应用发布后的热更新实现和方案CodePush做了详细的示例说明。    适合阅读本书的读者?React Native学习人员；?iOS平台应用开发工程师；?Android平台应用开发工程师；?Web前端开发工程师；?Node.js服务端开发工程师；?计算机相关专业的学生；?专业培训机构的学员；?软件开发项目经理。    本书作者本书由袁林主笔编写。其他参与编写的人员有高旭、贺庆端、黎林、李伟浩、刘成智、刘利、刘源、谭建利、吴贵文、吴娟、夏秀英、肖太平、郑星。    致谢感谢本书的编辑，让我有机会和本书结缘。感谢我的伙伴们：邵长磊、刘冬冬、袁方、袁满、翟绍虎、洪敏、郭晨光及张砚，与我一起探讨新技术并和React Native结缘。感谢我的妻子韩丽、女儿可可及我的父母，写作占用了我很多陪伴家人的时间和精力，正是有了家人的支持，才得以坚持下去。    最后还要感谢读者，本书的价值因你们而存在。    编者