【编辑推荐】
详解React Native应用从创建、开发到发布的全过程，展示各组件和API的用法
实战为王，通过典型项目案例，让读者快速掌握React Native应用开发
书中所有内容都配合详细的实例和源代码进行讲解
全面涵盖React Native组件、API、布局、第三方组件及原生接口开发等内容
详解React Native的开发工具、命令行工具及各种调试工具的使用
详细讲解一个电商App项目案例的开发过程，提高读者的实战开发水平
涉及软件开发流程、应用架构设计、代码重构，以及原生平台与跨平台开发等
【内容简介】
本书以实战开发为主旨，以React Native应用开发为主线，以iOS和Android双平台开发为副线，通过完整的电商类App项目案例，详细地介绍了React Native应用开发所涉及的知识，让读者全面、深入、透彻地理解React Native的主流开发方法，从而提升实战开发水平和项目开发能力。
本书共12章，分为4篇，涵盖的主要内容有搭建开发环境、Nuclide、各种命令行工具（Git、Node.js）、布局与调试、组件、API、第三方组件、基于Node.js的服务器、fetch API、AsyncStorage/SQLite/Realm数据库存储、原生平台接口开发、redux开发框架、应用打包与发布、热更新与CodePush等。
本书适合iOS和Android原生平台应用开发者，以及有兴趣加入移动平台开发的JavaScript开发者阅读。当然，本书也适合相关院校和社会培训学校作为移动开发的教材使用。
一分钟了解本书内容
React Native的优势
搭建React Native开发环境
React Native开发基础知识
React Native的组件
原生平台的适配和调试
React Native的服务器端处理
常用React Native API
React Native与原生平台混合编程
电商App的复盘
App的发布
App的热部署
ES6语法
【作者简介】
袁林 2010年毕业于南京邮电大学。毕业后一直从事移动APP研发工作。先后服务于中兴通讯、三星电子和南京企友等公司。历任App高级工程师、项目经理等职位。具备丰富的Node.js后端服务构建、Native客户端开发和React Native客户端开发经验。长期致力于应用各种IT新技术提升生产效率和解决实际问题。曾经带队自主研发多个电信级企业应用。
【目录】
第1篇 React Native入门和基础
第1章 为什么要学习React Native 2
1.1 看透React Native 2
1.1.1 React Native与React.js 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 安装原生开发工具——iOS 11
1.3.3 安装Node.js 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应用开发实战
第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 加载指示器——ActivityIndicator 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 权限设置——PermissionsAndroid 205
7.5.9 悬浮提示框——ToastAndroid 207
7.6 小结 208
第3篇 React Native混合编程
第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的发布和更新
第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.4.4 更改iOS应用 297
12.4.5 更改Android应用 301
12.5 小结 303
附录A ES 6语法 304
【前言】
随着手机和移动互联网技术的日益成熟，移动应用的领域也从如何开发，发展到如何更高效、更低成本地开发。传统的原生平台（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结缘。感谢我的妻子韩丽、女儿可可及我的父母，写作占用了我很多陪伴家人的时间和精力，正是有了家人的支持，才得以坚持下去。
*后还要感谢读者，本书的价值因你们而存在。
编著者
【免费在线读】
第1章 为什么要学习React Native
无论读者是移动平台开发者，还是Web前端开发者，想必对现在“大红大紫”的React Native都有所耳闻。那么，除了“乘着Facebook这棵大树好乘凉”的优势之外，React Native到底是何方“神圣”，有什么令大家“趋之若鹜”的优点呢？下面带着这样的好奇，来随本书一探究竟吧！
本章主要内容有：
? React Native与React.js的对比。
? 为什么说React Native是跨平台的。
? React Native应用的结构。
? React Native的特点。
? React Native的环境搭建。
? 创建*个React Native应用。
1.1 看透React Native
React Native（http://facebook.github.io/react-native/）*次进入公众的视野是在2015年1月的React.js Conf（http://conf.reactjs. org/）上，随后，同年5月份，Facebook在F8 Conference（https://www. fbf8.com/）上正式宣布：React Native项目（如图1.1所示）在Github开源。结果一天之内，就收获了5000多颗星，受关注程度可见一斑！
?小知识：React.js Conf是指Facebook的React开发者大会，F8 Conference是指Facebook的开发者大会，Github是全球*的软件项目托管平台，也被戏称为“人类的代码仓库”。
1.1.1 React Native与React.js
想者在还没弄清React Native之前，又发现了一个“新朋友”React.js（下文简称React），那到底什么是React呢？它和React Native又是什么关系呢？
先来看看Facebook官方（https://code.facebook.com/projects/176988925806765/react/）对React的定义：
React is a JavaScript library for building user interfaces
从上述官方的定义可以知道：React是一个用于前端UI开发的JavaScript库。和其他类似的前端框架相比，例如，老牌的Backbone（http://backbonejs.org/）、Google推出的Angular（https://angularjs.org/）和以轻量级著称的Vue.js（http://cn.vuejs.org/），React*的不同是提出了Virtual DOM（即虚拟DOM）的设计，可以大大提升页面渲染的效率。
?小知识：移动平台开发很好理解，即移动平台上（例如Apple的iOS平台，Google的Android平台）的软件开发，开发语言和技术主要有Objective C、Swift及Java等。而前端开发是相对于后端（又称服务器端）开发而言的，前端主要负责开发通过浏览器和用户交互的部分，开发语言和技术主要有HTML、CSS及JavaScript等。
但是，Facebook不仅仅满足于React对前端开发技术的革新，又将React的设计移植到原生开发中，从而诞生了React Native结合的产物，即React Native。
虽然，React Native刚开始只支持iOS App开发，但是从2015年9月起，React Native也支持Android App开发，而且随着微软、三星等“IT大佬”的加入，React Native还将支持更多的移动平台，例如，Sansung的Tizen平台（https://www.tizen.org/）、Microsoft的Window Phone（http://microsoft.github.io/code-push/articles/ReactNativeWindows.html）。
所以，简单来说：
? React Native和React使用了相同的开发语言JavaScript和相同的设计理念React。
? React Native和React运行的环境和平台却是完全不同的，React Native是基于移动平台（如iOS、Android等），而React是基于浏览器。
?提示：国内网络环境下访问React Native官网（http://facebook.github.io/react-native/）可能较慢，读者可以访问国内的中文资源网站，例如React Native 中文网（http://reactnative.cn/），或者自行搜索加快React Native官网访问速度的办法。
1.1.2 React Native的跨平台
简单了解了React Native的由来之后，读者或许会有这样的疑问，开发移动平台App使用原生开发平台和语言就好了，为什么要出现使用React Native来开发移动平台App的技术呢？换句话说，React Native到底可以解决什么问题呢？
在进一步讨论之前，笔者觉得有必要明确一下什么是原生应用和跨平台应用。
1．原生应用
所谓的原生应用是指：使用原生开发语言、工具和平台开发的应用。原生应用开发的优势在于拥有较高的平台成熟度，包括平台的稳定性、运行时的性能及完善的生态。
?小知识：所谓的“生态”应该算是比较抽象的概念，开发平台的生态圈包含了很多方面，从硬件上芯片和各种电子元器件的生产、供应，到软件上所使用的语言、开发工具及第三方开源库的数量质量，以及人的方面，如开发者的数量、水平等因素。
但是，原生应用开发也不是没有任何缺点，那就是开发成本较高，导致开发效率相对较低。例如，当一个产品需要支持多种类型的移动终端时，就需要熟悉多个原生平台开发的工程师。
2．跨平台应用
为了解决产品满足多个平台的需求，就有了所谓的跨平台应用开发。根据实现跨平台方案的不同，也就有了以下几种常见的跨平台解决方案。
? 混合应用开发：在移动浏览器中嵌入HTML页面来开发移动应用，代表的有Apache Cordova（http://cordova.apache.org/），以及基于Apache Cordova衍生的Inoic（http://ionicframework.com/）等，如图1.2所示。
? 跨平台的语言：例如，基于.NET和C#的Xamarin（https://www.xamarin.com/），以及基于Ruby的RubyMotion（http://www.rubymotion.com/cn/），如图1.3所示。
图1.2 Apache Cordova LOGO图1.3 Xamarin LOGO
? React Native：使用的是Web开发语言（JavaScript）和环境（Node.js）。除了本书介绍的React Native之外，类似的技术方案还有NativeScript（http://www. telerik.com/nativescript）、Weex（http://weex-project.io/）等，如图1.4所示。
图1.4 Weex LOGO
?提示：想要了解关于更多React Native的架构和原理，可以参考1.1.3节。
1.1.3 解剖React Native应用的结构
在了解完这么多关于React Native的故事和优势之后，让我们走近React Native，来进一步了解React Native的原理和架构。
React Native应用的整体结构如图1.5所示。
图1.5 React Native应用的整体结构
通过之前的介绍和图1.5可以看出：React Native应用开发使用的是与React相同的开发语言JavaScript和设计思想React，而底层仍然是基于原生平台的。这样，不同平台的适配就交由React Native平台去处理，而开发者只需要专注于React Native平台应用开发本身，体现出的优势如下。
? 应用层的开发变得简单、高效和跨平台。
? 应用稳定性、运行时的性能和原生平台接近。
? 在理解React Native原理之后，开发者也可以根据实际的产品需求开发自己的React Native组件，以复用已有原生平台的大量优秀组件。
1.2 React Native的特点
那么，作为跨平台应用开发的“新贵”，React Native相比其他跨平台技术到底有哪些优势呢？
1.2.1 其一：Learn Once, Write Anywhere
这句话是React Native官网（http://facebook.github.io/react-native/）对React Native的概述，简单明了地概括了React Native的*特点和优点。
只需要学习React Native这一种开发方式（包括平台、语言和开发环境等）就可以开发多个不同平台的App。
这句话简单来说就是Learn Once, Write Anywhere，这也是React Native的宣传广告，如图1.6所示。
图1.6 Learn Once, Write Anythere宣传广告
?小知识：除了React Native提出的Learn Once，Write Anywhere的口号，Java语言也提出过类似的口号Write Once，Run Anywhere，两者看起来类似，但其实是完全不同的。React Native就像上面介绍的，降低的是学习成本，针对不同平台可能还需要单独开发；而Java语言的意思是只需要开发一次，就可以成功运行在不同的平台和设备上。
目前，React Native对iOS、Android平台的支持已经非常好了，在不远的将来，应该还会支持Windows、Tizen等更多的移动平台。
而且，React Native的大多数组件也是可以在多个平台复用的，所以学习了React Native开发之后，完全可以胜任多个平台的开发任务且不需要很高的额外学习成本，大大降低了开发成本。
1.2.2 其二：简单易学的开发语言
React Native开发是基于JavaScript语言的，虽然JavaScript也是一门灵活、强大且复杂的语言，但是对于新人来说，上手速度相比Objective-C或Java等还是要快得多。而且，由于JavaScript严格模式的使用以及ECMAScript 2015（下文简称ES 6）标准的推出，JavaScript被人诟病的各种语言问题也大大减少。
不仅如此，Facebook为了进一步提高代码可读性和开发效率，还扩展出了JSX语法，即一种可以在JavaScript代码中直接书写HTML标签的语法糖。
例如，一个典型的React Native项目的JavaScript代码看起来是这样的：
01 export default class ch02 extends Component { // 每个页面可以理解成一个组件
02 render() { // 渲染页面的函数
03 return (
04 <View style={styles.container}> // 页面根View
05 <Text style={styles.welcome}>
06 Welcome to React Native!
07 </Text>
08 <Text style={styles.instructions}>
09 To get started, edit index.ios.js
10 </Text>
11 <Text style={styles.instructions}>
12 Press Cmd R to reload,{'\n'}
13 Cmd D or shake for dev menu
14 </Text>
15 </View>
16 );
17 }
16 }
除了开发语言使用JavaScript之外，在React Native开发中，样式和布局的技术相比原生平台也是比较简单的。
React Native的样式使用了类似CSS的规范，只是根据JavaScript的语法要求将命名方式改成了“驼峰命名法”，例如，Web开发中的background-color要写成backgroundColor。
React Native的布局使用了Flexbox布局方式，Flexbox是Flexible Box的缩写，又称“弹性盒子布局”。Flexbox布局不仅使用简单，*的优势还在于提供了自适应显示设备和屏幕大小的能力，从而可以很好解决iOS、Android等屏幕适配问题。
例如，一个典型的React Native项目中的样式和布局代码看起来是这样的：
01 const styles = StyleSheet.create({
02 container: { // 页面根View的样式
03 flex: 1,
04 justifyContent: 'center',
05 alignItems: 'center',
06 backgroundColor: '#F5FCFF'
07 },
08 welcome: { // “欢迎”文本的样式
09 fontSize: 20,
10 textAlign: 'center',
12 margin: 10
12 },
13 instructions: { // “说明”文本的样式
14 textAlign: 'center',
15 color: '#333333',
16 marginBottom: 5
17 }
18 });
?提示：关于JSX和Flexbox布局的更多介绍，可以参考本书第2章的内容。
1.2.3 其三：接近原生应用的性能和体验
对于React Native上述的两个优点，混合应用开发的方式其实也都有，但是，混合应用开发的方式在实际开发中却存在性能和体验不佳的先天不足（其原理是在移动浏览器里嵌入HTML页面，导致原生平台的性能优势无法充分发挥出来）。
混合应用开发方式从PhoneGap发展到Apache Cordova，而且衍生的Ionic也都在不断强调和优化性能，但是现阶段，在移动浏览器中嵌入HTML页面的运行效率，仍然无法和原生应用相媲美。
而React Native虽然使用的是类似混合应用开发的语言，但是其实现机制却完全不同：React Native的底层仍然是基于原生平台的！所以，React Native在性能和体验上与原生应用几乎没有太大差别，用户很难区分所使用的App到底是原生开发的还是React Native开发的。
1.2.4 其四：完善的生态系统
生态系统是衡量一个开发平台成熟度的重要标志，所以开发者在选择任何开发平台时，很有必要了解该平台的生态状况。
React Native有着非常庞大的开发者社区和很高的活跃度，这点从React Native在Github上线*天5000多颗星，截至2017年1月4日40000多颗星、9000多次Fork以及9000多次提交就可以看出，如图1.7所示。
图1.7 React Native项目在Github上的关注度和贡献
Google Trends（https://www.google.com/trends/explore?date=today%2012-m&q=ios%20 development,android%20development,react%20native）也反映出了React Native开发的趋势和热度，如图1.8所示。
图1.8 Google Trends上React Native的趋势和热度
同时，Facebook也在大力支持和推广React Native，并推出了官方的调试工具React Developer Tools（https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgof adopljbjfkapdkoienihi）和开发工具Nuclide（https://nuclide.io/），如图1.9所示。
图1.9 Facebook推出的React Native开发工具Nuclide
另外，网络上还有大量优秀的开源项目可供学习和参考，例如：
? React Native开源库检索网站JS.coach（https://js.coach/react-native）。
? React Native学习资源汇总项目awesome-react-native（https://github.com/jondot/ awesome-react-native）。
总之，在学习和开发React Native的路上，不仅有本书可以参考，还有非常多的资源和帮助，借用一首歌名来说：You will never walk alone。
