React Native精解与实战

本书由架构师撰写,包含ReactNative框架底层原理，以及与iOS、Android混合开发案例，精选了大量实例代码,方便读者快速学习。主要内容分为两大部分，靠前部分“入门”包括靠前~9章，介绍ReactNative框架的基本原理与使用方法；第2部分“进阶”包括靠前0~15章，介绍ReactNative框架的高阶开发与App部署相关知识。附录部分剖析了ReactNative的源码，可帮助读者研究ReactNative底层本质，还分享了一些ReactNative框架学习的相关资源。本书适合移动App开发人员，深入学习ReactNative框架可以掌握开发一套ReactNative源码同时部署到iOS平台与Android平台。

邱鹏源，商业数据提供商咕咕数据创始人，前咕咕监控、饭妈妈创始人。从事软件研发一线工作已10年，拥有丰富的前端、后端以及移动App开发经验，过多款基于React Native框架的商业App设计与研发工作。慕课网实战课程讲师，出品视频课程《React.js入门与实战》等。一直坚持在个人技术博客中分享大量的软件开发文章与视频教程。

前言
第Ⅰ部分入门
第1章React与ReactNative简介2
1.1React简介2
1.2ReactNative简介9
1.3ReactNative前置知识点11
第2章Node.js简介与开发环境配置13
2.1Node.js与npm简介13
2.2ReactNative开发环境配置15
2.2.1安装Node.js16
2.2.2安装ReactNative18
2.2.3代码编辑器以及推荐插件22
第3章ReactNative工作原理与生命周期25
3.1ReactNative框架及工作原理25
3.1.1ReactNative与原生平台通信27
3.1.2组件间通信27
3.2ReactNative中的生命周期31
3.3本章小结35
第4章ReactNative页面布局36
4.1CSS3简介36
4.2Flex弹性盒模型37
4.3Flex属性详解与实例39
4.3.1justify-content属性40
4.3.2align-items属性42
4.3.3align-self属性45
4.3.4flex-direction属性48
4.3.5flex-basis属性51
4.3.6flex-wrap属性52
4.3.7align-content属性54
4.3.8flex-grow属性58
4.3.9flex-shrink属性60
4.3.10order属性63
4.3.11flex-flow属性64
4.3.12flex属性64
4.4ReactNative中的Flex属性65
4.5本章小结65
第5章ReactNative开发调试技巧与工具66
5.1配置iOS开发环境66
5.2配置Android开发环境70
5.3常用调试属性的说明73
5.4Chrome中远程调试代码77
5.5ReactDeveloperTools工具安装与应用80
5.6本章小结82
第6章ReactNative组件详解83
6.1ReactNative组件简介83
6.2视图组件86
6.2.1View组件介绍86
6.2.2View组件实例87
6.3底部导航TabBar组件92
6.3.1TabBar组件介绍92
6.3.2iOS平台下TabBarIOS组件实例94
6.3.3Android平台下TabBar组件实例99
6.4iOS与Android的页面跳转102
6.4.1NavigatorIOS组件介绍102
6.4.2NavigatorIOS组件实例104
6.4.3react-native-navigation组件介绍108
6.4.4react-native-navigation组件实例110
6.5Image组件111
6.5.1Image组件介绍111
6.5.2Image组件实例112
6.6Text组件114
6.6.1Text组件介绍114
6.6.2Text组件基本使用116
6.6.3Text组件嵌套117
6.6.4Text组件样式统一119
6.7TextInput组件122
6.7.1TextInput组件介绍122
6.7.2TextInput组件实例124
6.8触摸处理类组件130
6.8.1TouchableHighlight组件介绍130
6.8.2TouchableHighlight组件实例131
6.8.3TouchableNativeFeedback组件介绍132
6.8.4TouchableNativeFeedback组件实例133
6.8.5TouchableOpacity组件介绍133
6.8.6TouchableOpacity组件实例134
6.8.7TouchableWithoutFeedback组件介绍134
6.9WebView组件135
6.9.1WebView组件介绍135
6.9.2WebView组件实例137
6.10ScrollView组件139
6.10.1ScrollView组件介绍139
6.10.2ScrollView组件实例140
6.11本章小结142
第7章ReactNativeAPI详解143
7.1ReactNativeAPI简介143
7.2提示框145
7.2.1Alert介绍145
7.2.2Alert实例145
7.3App运行状态150
7.3.1AppState介绍150
7.3.2AppState实例150
7.4异步存储152
7.4.1AsyncStorage介绍152
7.4.2AsyncStorage实例154
7.4.3登录状态处理159
7.5相机与相册API161
7.5.1CameraRoll介绍161
7.5.2相册/相机组件实例161
7.6地理位置信息168
7.6.1Geolocation介绍168
7.6.2Geolocation实例169
7.7设备网络信息175
7.7.1NetInfo介绍175
7.7.2NetInfo实例175
7.8本章小结178
第8章ReactNative网络请求详解179
8.1RESTfulAPI简介179
8.2ReactNative中的网络请求180
8.3ListView组件184
8.4ReactNative网络请求与列表绑定方案186
8.5本章小结192
第9章常用ReactNative开源组件详解193
9.1ReactNative热门资源列表194
9.2ReactNative接入微博、微信、QQ登录196
9.3更加美观的组件库200
9.4ReactNative图表202
9.5react-native-gifted-listview205
9.6react-native-vector-icons207
9.7本章小结210
第Ⅱ部分进阶
第10章ReactNative运行原理与部署调试214
10.1ReactNative运行原理214
10.2iOS平台部署与调试220
10.3Android平台部署与调试225
10.4Android模拟器简介230
10.5本章小结233
第11章iOS平台与ReactNative混合开发234
11.1iOS平台混合开发简介234
11.2iOS平台混合开发原理详解235
11.2.1iOS原生代码实现235
11.2.2iOS项目编译设置237
11.2.3ReactNative中调用混合开发代码239
11.2.4iOS平台混合开发特性详解241
11.3iOS平台混合开发实例249
11.3.1iOS原生代码实现249
11.3.2ReactNative调用混合开发代码250
11.4本章小结252
第12章Android平台与ReactNative混合开发253
12.1Android平台混合开发简介253
12.2Android平台混合开发原理详解254
12.2.1Android原生代码实现254
12.2.2Android原生模块注

Preface  前  言从2015年React Native框架发布开始，我就关注React Native框架的发展，在得知React Native框架将同时支持iOS平台与Android平台的部署后，我们就开始着手将之前的项目从混合开发的方式慢慢转移到使用React Native框架开发的方式上来。当时国内的React Native方面的资料非常少，很多难题的解决都需要查阅大量的国外文档，正是在这个摸索的过程中，加深了对React Native框架的理解。后来，我们的很多Web项目都在使用React框架，React正是React Native最底层的技术框架，同时也深深体会到只有理解底层架构，才能对于很多表象的难题快速定位并找到解决方案。本书基于我多年写的技术博客以及使用React Native框架的实战经验，我认为底层的原理永远比一些组件的使用方法更重要，所以本书介绍了大量框架底层原理。通过阅读本书你会发现掌握框架后，组件和API的使用将变得非常简单，希望你在学习时能体会到这种触类旁通的感觉。本书主要内容本书分为两大部分，第Ⅰ部分“入门”包括第1～9章，介绍React Native框架的基本原理与使用；第Ⅱ部分“进阶”包括第10～15章，介绍React Native框架的高阶开发与App部署相关知识。第1章介绍React与React Native框架产生的背景与原理，以及开发优势。第2章介绍Node.js框架，并实战演示了React Native开发环境的安装与配置。第3章介绍React Native框架的构成、工作原理、组件间通信以及生命周期，包括代码实战演示。第4章介绍React Native页面布局开发使用的CSS Flex，帮助读者掌握好React Native框架中元素布局的基本方法。第5章介绍React Native框架下iOS平台与Android平台环境配置与代码调试的方法，并对React Native框架的调试工具以及借助Chrome进行远程调试的方法进行了实战讲解。第6章介绍React Native框架中常用的组件，如View、TabBar、NavigatorIOS、Image、Text、TextInput、WebView、ScrollView等。同时介绍了iOS平台与Android平台的适配以及更适合的第三方组件。第7章介绍React Native框架重点API的使用，包括提示框、App运行状态、异步存储、相机与相册、地理位置信息、设备网络信息等API，希望读者熟练掌握这些基础API，进而能举一反三。第8章介绍React Native框架下的网络请求以及列表数据的绑定，这是开发App需要使用的技术重点。第9章介绍React Native开发生态下一些常用的第三方组件，通过代码实战的方式进行讲解，并介绍了如何快速地找到自己的项目需要使用的第三方组件。第10章结合iOS与Android平台深入讲解了React Native框架的底层运行原理，并分别介绍了两个平台的部署与测试方法。第11章介绍React Native框架下iOS平台的混合开发方法，通过混合开发，你可以在React Native框架下访问任何iOS原生平台。第12章介绍React Native框架下Android平台的混合开发方法，以及案例分析。第13章详细讲解React Native框架下iOS平台与Android平台的消息推送原理，并介绍两个平台的消息推送实战。第14章介绍项目最终打包前App的图标与启动图的设置，并介绍了如何通过第三方工具快速生成这些相关资源。第15章介绍React Native性能调优的方法与技巧，以便在App上架前测试以及后期App遇到性能问题时可以快速定位到问题所在。本书附录简单剖析了React Native的源码，希望能帮助你深入研究React Native框架的源码，以便能探究其底层本质。同时也分享了一些学习React Native框架的相关资源。本书的读者对象各类移动App开发人员，学习React Native框架可以使你开发一套React Native源码同时部署到iOS平台与Android平台。想进入移动App开发领域的初学者，React Native框架比Android和iOS两个原生平台的技术门槛低很多，只需掌握HTML、CSS、JavaScript相关知识点就可以动手开发跨平台的移动App。已经在使用React Native框架开发移动App的开发人员，书中讲解了React Native框架的底层原理，以及与iOS平台、Android平台的高阶混合开发部分，完全用代码进行讲解，学习起来更加直观。本书配套源代码本书的配套源代码都可以在https://github.com/ParryQiu/ReactNative-Book-Demo下载。后续如果遇到React Native框架的大升级，我同样会在此代码库中相应地更新实战演示的代码。致谢首先感谢多年来共事过的同事们、领导们，多年来容忍我在一些技术问题上吹毛求疵，给了我很多好的建议和思路启发。还要感谢吴怡编辑，从约稿到审稿，都体现了她的认真态度和专业知识，她能一针见血地指出问题所在，促使我更加认真、专业地去编写此书。在编写的过程中，虽然对于每一个知识点我都查阅了大量的相关文档，但是本书涉及海量的知识点，难免会有疏漏，恳请各位读者斧正。邱鹏源2018年 4月