《ReactNative移动开发实战.html.pdf》由会员分享，可在线阅读，更多相关《ReactNative移动开发实战.html.pdf（380页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、前言 随着手机和移动互联网技术的日益成熟，移动应用的领域也从如何开发，发展到如何更高效、更低成本地开发。传统的原生平台（iOS、Android）开发技术虽然比较成熟，但由于开发效率和成本的限 制，已经越来越无法满足移动互联网应用的开发需求。 所以，具有简单、迅速、跨平台的优势，而且基于Web开发语言和布局技术的React Native得以迅速流行，并一举夺得跨平台开发技术的头筹。 目前市场上大多数React Native书籍主要以翻译和讲解官方文档为主，并未从开发实际应用出发，通过典型案例来指导读者提高开发水平。本书以实战为主旨，通过完整的电商类App项目实例，来介 绍React Native
2、中常用的组件、API、布局、第三方组件和原生接口，让读者全面、深入、透彻地理解React Native主流的开发和设计方法，提升实际开发水平和项目实战能力。 本书涉及的概念较多，下面给出一个技术点云图，希望读者有所了解。 本书的进阶顺序，也给出如下一个图，便于读者了解。 本书特色 1每一步都有详细的源码和实例参考 为了便于读者理解本书内容，提高学习效率，本书的所有内容都有详细的源码和实例参考。对于这些源码和实例，作者均亲自编写和验证，杜绝复制、粘贴代码以敷衍读者的不负责任行为。本书源码 可以在 2内容涵盖React Native开发的各个方面 本书涵盖React Native组件、API、布局
3、、第三方组件以及原生接口等React Native应用开发的各个方面，尽量保证不出现知识“死角”。凡是涉及的一些技术（如原生、瀑布流、耦合性和JSON）， 也给出了概念或原理的解释。 3结合工具助力更高效的React Native开发 在本书“实战”讲解的过程中，详细介绍了React Native开发工具Nuclide的使用、React Native命令行工具的用法及各种调试工具（包括布局、断点及实时加载等）的使用，不仅教读者如何开发，还 教读者如何更高效地开发。 4项目案例典型，实战性强，有较高的应用价值 本书以开发一个电商类应用为例，涵盖了React Native应用开发中会用到的所有重点
4、知识，设计和源码做到拿来可用，方便应用开发者随时查阅和参考。 5收获的不仅仅是React Native平台和编码 对于一些学习能力较强的读者，完全可以在React Native开发文档的帮助下快速学习和掌握React Native。而本书希望读者在掌握平台和编码之外，还能够了解实际应用开发过程中涉及的软件开发流 程、应用架构设计、代码重构技巧，以及原生平台与其他跨平台开发的相关知识，让读者融会贯通地理解应用开发技术。 本书内容及知识体系 第1篇 React Native入门和基础（第12章） 本篇介绍了跨平台开发的主流方案和React Native基础知识，主要包括开发环境搭建、React N
5、ative命令行工具和React Native布局调试。 第2篇 React Native应用开发实战（第37章） 本篇介绍了React Native实际应用开发中常用的技术，主要包括基本组件、使用第三方组件、搭建基于Node.js的服务器为应用绑定真实数据、fetch API、AsyncStorage/SQLite/Realm数据库存储、 更多React Native组件和API的用法、原生平台接口开发等。 第3篇 React Native混合编程（第810章） 本篇主要总结和回顾了前7章所开发的电商类应用的技术和架构，主要包括应用的文件结构、Flexbox的整体布局、应用的逻辑结构、应用的
6、通信过程及进一步改进的地方和思路，其中就包括了redux 开发框架。 第4篇 App的发布和更新（第1112章） 本篇主要介绍了React Native应用打包和发布的全过程，配以详细的截图说明，并且对React Native应用发布后的热更新实现和方案CodePush做了详细的示例说明。 适合阅读本书的读者 React Native学习人员； iOS平台应用开发工程师； Android平台应用开发工程师； Web前端开发工程师； Node.js服务端开发工程师； 计算机相关专业的学生； 专业培训机构的学员； 软件开发项目经理。 本书作者 本书由袁林主笔编写。其他参与编写的人员有高旭、贺庆端、
7、黎林、李伟浩、刘成智、刘利、刘源、谭建利、吴贵文、吴娟、夏秀英、肖太平、郑星。 致谢 感谢本书的编辑，让我有机会和本书结缘。感谢我的伙伴们：邵长磊、刘冬冬、袁方、袁满、翟绍虎、洪敏、郭晨光及张砚，与我一起探讨新技术并和React Native结缘。感谢我的妻子韩丽、女儿可 可及我的父母，写作占用了我很多陪伴家人的时间和精力，正是有了家人的支持，才得以坚持下去。 最后还要感谢读者，本书的价值因你们而存在。 编者 第1篇 React Native入门和基础 第1章 为什么要学习React Native 第2章 全局解析React Native开发的基础技术 第1章 为什么要学习React Nati
8、ve 无论读者是移动平台开发者，还是Web前端开发者，想必对现在“大红大紫”的React Native都有所耳闻。那么，除了“乘着Facebook这棵大树好乘凉”的优势之外，React Native到底是何方“神 圣”，有什么令大家“趋之若鹜”的优点呢？下面带着这样的好奇，来随本书一探究竟吧！ 本章主要内容有： React Native与React.js的对比。 为什么说React Native是跨平台的。 React Native应用的结构。 React Native的特点。 React Native的环境搭建。 创建第一个React Native应用。 1.1 看透React Native
9、 React Native（http:/facebook.github.io/react-native/）第一次进入公众的视野是在2015年1月的React.js Conf（http:/conf.reactjs.org/）上，随后，同年5月份，Facebook在 F8Conference（ Native项目（如图1.1所示）在Github开源。结果一天之内，就收获了5000多颗星，受关注程度可见一斑！ 图1.1 React Native Logo 小知识：React.js Conf是指Facebook的React开发者大会，F8Conference是指Facebook的开发者大会，Github
10、是全球最大的软件项目托管平台，也被戏称为“人类的代码仓库”。 1.1.1 React Native与React.js 想必读者在还没弄清React Native之前，又发现了一个“新朋友”React.js（下文简称React），那到底什么是React呢？它和React Native又是什么关系呢？ 先来看看Facebook官方（ React is a JavaScript library for building user interfaces 从上述官方的定义可以知道：React是一个用于前端UI开发的JavaScript库。和其他类似的前端框架相比，例如，老牌的Backbone（http:
11、/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等。而前端开发是相对于后端（又称服 务器端）开发而言的，前端主要负责开发通过浏览器和用户交互的部分，开发语言和技术主要有HTM
12、L、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:/mic
13、rosoft.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/）可能较慢，读者可以访问国内的中文资源网站，例如Reac
14、t Native中文网（ 索加快React Native官网访问速度的办法。 1.1.2 React Native的跨平台 简单了解了React Native的由来之后，读者或许会有这样的疑问，开发移动平台App使用原生开发平台和语言就好了，为什么要出现使用React Native来开发移动平台App的技术呢？换句话说，React Native到底可以解决什么问题呢？ 在进一步讨论之前，笔者觉得有必要明确一下什么是原生应用和跨平台应用。 1原生应用 所谓的原生应用是指：使用原生开发语言、工具和平台开发的应用。原生应用开发的优势在于拥有较高的平台成熟度，包括平台的稳定性、运行时的性能及完善的生态
15、。 小知识：所谓的“生态”应该算是比较抽象的概念，开发平台的生态圈包含了很多方面，从硬件上芯片和各种电子元器件的生产、供应，到软件上所使用的语言、开发工具及第三方开源库的数量 质量，以及人的方面，如开发者的数量、水平等因素。 但是，原生应用开发也不是没有任何缺点，那就是开发成本较高，导致开发效率相对较低。例如，当一个产品需要支持多种类型的移动终端时，就需要熟悉多个原生平台开发的工程师。 2跨平台应用 为了解决产品满足多个平台的需求，就有了所谓的跨平台应用开发。根据实现跨平台方案的不同，也就有了以下几种常见的跨平台解决方案。 混合应用开发：在移动浏览器中嵌入HTML页面来开发移动应用，代表的有A
16、pache Cordova（http:/cordova.apache.org/），以及基于Apache Cordova衍生的Inoic（ 1.2所示。 跨平台的语言：例如，基于.NET和C#的Xamarin（ 图1.2 Apache Cordova LOGO 图1.3 Xamarin LOGO React Native：使用的是Web开发语言（JavaScript）和环境（Node.js）。除了本书介绍的React Native之外，类似的技术方案还有NativeScript（ project.io/）等，如图1.4所示。 图1.4 Weex LOGO 提示：想要了解关于更多React Nat
17、ive的架构和原理，可以参考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平 台去处理，而开发者只需要专
18、注于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-
19、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，
20、两者看起来类似，但其实是完全不同的。React Native就像上面介绍 的，降低的是学习成本，针对不同平台可能还需要单独开发；而Java语言的意思是只需要开发一次，就可以成功运行在不同的平台和设备上。 目前，React Native对iOS、Android平台的支持已经非常好了，在不远的将来，应该还会支持Windows、Tizen等更多的移动平台。 而且，React Native的大多数组件也是可以在多个平台复用的，所以学习了React Native开发之后，完全可以胜任多个平台的开发任务且不需要很高的额外学习成本，大大降低了开发成本。 1.2.2 其二：简单易学的开发语言 React Na
21、tive开发是基于JavaScript语言的，虽然JavaScript也是一门灵活、强大且复杂的语言，但是对于新人来说，上手速度相比Objective-C或Java等还是要快得多。而且，由于JavaScript严格模式 的使用以及ECMAScript2015（下文简称ES6）标准的推出，JavaScript被人诟病的各种语言问题也大大减少。 不仅如此，Facebook为了进一步提高代码可读性和开发效率，还扩展出了JSX语法，即一种可以在JavaScript代码中直接书写HTML标签的语法糖。 例如，一个典型的React Native项目的JavaScript代码看起来是这样的： 01 expo
22、rt default class ch02 extends Component / 每个页面可以理解成一个组件 02 render() / 渲染页面的函数 03 return ( 04 / 页面根View 05 06 Welcome to React Native! 07 08 09 To get started, edit index.ios.js 10 11 12 Press Cmd+R to reload,n 13 Cmd+D or shake for dev menu 14 15 16 ); 17 16 除了开发语言使用JavaScript之外，在React Native开发中，样式和
23、布局的技术相比原生平台也是比较简单的。 React Native的样式使用了类似CSS的规范，只是根据JavaScript的语法要求将命名方式改成了“驼峰命名法”，例如，Web开发中的background-color要写成backgroundColor。 React Native的布局使用了Flexbox布局方式，Flexbox是Flexible Box的缩写，又称“弹性盒子布局”。Flexbox布局不仅使用简单，最大的优势还在于提供了自适应显示设备和屏幕大小的能力，从而 可以很好解决iOS、Android等屏幕适配问题。 例如，一个典型的React Native项目中的样式和布局代码看起来是
24、这样的： 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
25、color: #333333, 16 marginBottom: 5 17 18 ); 提示：关于JSX和Flexbox布局的更多介绍，可以参考本书第2章的内容。 1.2.3 其三：接近原生应用的性能和体验 对于React Native上述的两个优点，混合应用开发的方式其实也都有，但是，混合应用开发的方式在实际开发中却存在性能和体验不佳的先天不足（其原理是在移动浏览器里嵌入HTML页面，导致原 生平台的性能优势无法充分发挥出来）。 混合应用开发方式从PhoneGap发展到Apache Cordova，而且衍生的Ionic也都在不断强调和优化性能，但是现阶段，在移动浏览器中嵌入HTML页面的运行
26、效率，仍然无法和原生应用相媲美。 而React Native虽然使用的是类似混合应用开发的语言，但是其实现机制却完全不同：React Native的底层仍然是基于原生平台的！所以，React Native在性能和体验上与原生应用几乎没有太大差 别，用户很难区分所使用的App到底是原生开发的还是React Native开发的。 1.2.4 其四：完善的生态系统 生态系统是衡量一个开发平台成熟度的重要标志，所以开发者在选择任何开发平台时，很有必要了解该平台的生态状况。 React Native有着非常庞大的开发者社区和很高的活跃度，这点从React Native在Github上线第一天5000多颗
27、星，截至2017年1月4日40000多颗星、9000多次Fork以及9000多次提交就可以看出，如 图1.7所示。 图1.7 React Native项目在Github上的关注度和贡献 Google Trends（ 17 16 为了证实我们的想法，将代码中的文本内容从“Welcome to React Native！”修改为“我的第一个React Native应用！”，然后在iOS模拟器中使用快捷键command+R重新加载应用，果然界面更 新了！如图1.25所示。 图1.25 修改文本内容后的效果 提示：如果已经打开了Enable Live Reload调试选项，就不需要手动重新加载应用了，
28、修改完代码直接可以看到效果。 接着，再来看看显示样式的代码： 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: / “说明”文本的样式
29、 14 textAlign: center, 15 color: #333333, 16 marginBottom: 5 17 18 ); 在welcome样式中添加color：red属性： 01 welcome: 02 fontSize: 20, 03 textAlign: center, 04 margin: 10, 05 color: red / 也可以用RGB值#FF0000来表示红色 06 , 注意：第一次编写React Native代码时很容易发生遗漏逗号“，”等拼写错误。 重新加载应用后，效果如图1.26所示。 以上是iOS App的运行效果，同样也可以对index.androi
30、d.js文件做类似的修改，重新加载Android App效果如图1.27所示。 图1.26 修改文字颜色后效果 图1.27 Android App运行的效果 提示：实际开发中，index.io.js和index.android.js往往复用相同的逻辑，即将相同的代码提取到公共文件中，这样就可以大大发挥React Native的跨平台优势。 1.6 小结 React Native兼顾了开发的难易度、稳定性、性能、成本以及复用等产品开发中的诸多因素，再加上React以及React Native自身优秀的设计及开源社区的积极参与和贡献，React Native才有了今天这 样的地位。 通过本章的介绍
31、，想必读者已经对React Native开发有了一个初步的认识，体会到了React Native开发简单、跨平台的优势。接下来将通过开发一个完整的App实例，进一步学习和掌握React Native。 第2章 全局解析React Native开发的基础技术 在第1章搭建好React Native开发环境之后，我们开发了第一个React Native应用。虽然其功能比较简单，但却向着学习React Native开发迈开了一大步，意味着读者能够独立完成一个React Native应 用的开发。 从本章开始，我们将从零开始开发一个功能更加完备、强大的React Native应用。还在等什么？赶紧进入
32、状态吧！ 本章主要内容有： 掌握版本控制工具Git的使用。 了解JSX解决方案。 熟悉React Native的布局。 了解如何调试React Native项目。 从零开始设计第一个完成的电商App。 2.1 开发具备的基础知识说明 日常生活中，人们越来越离不开的就是网购，因此，本书就以典型的电商类移动应用为例，向读者展示使用React Native设计、开发应用的全过程。 不过，在正式开发电商类移动应用之前，有必要先了解一些React Native开发的基础知识。 提示：本书面向对JavaScript有一定了解的读者，所以JavaScript相关知识本书不做深入解释，想要了解更多JavaSc
33、ript知识，请读者参考相关书籍和教程。 React Native开发中需要具备的基础知识如下。 Git：最流行的版本控制工具，是开发中代码管理的基础。 JSX：React Native开发所使用的语言，一种基于JavaScript的扩展语法。 Flexbox布局：React Native开发的布局技术，是UI（User Interface）开发的核心。 调试：提高React Native开发效率的重要手段。 小知识：UI（User Interface）指用户界面（亦称使用者界面），是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。 2.2 Git版本
34、控制工具 对于现在的软件项目来说，版本控制工具应该是“标配”的开发工具之一了。 问题：什么是版本控制工具？ 回答：版本控制工具提供完备的版本管理功能，用于存储、追踪目录（文件夹）和文件的修改历史。 2.2.1 安装Git 这里笔者推荐一款免费、开源、简单易用的版本控制工具Git（https:/git- 小知识：Git的诞生与Linux有不解之缘，Git是由被誉为“Linux之父”的Linus Torvalds（https:/zh.wikipedia.org/wiki/%E6%9E%97%E7%BA%B3%E6%96%AF%C2%B7%E6%89%98%E7%93%A6%E5%85%B9）最初开
35、发的，他认为之前现有的版本控制工具，例如 CVS（http:/www.nongnu.org/cvs/）、SVN（https:/subversion.apache.org/）都满足不了Linux Kernel开发的需求（免费、简单、高效以及分布式），所以就决定自己开发一款全新的版本控制工具Git。 Git的安装比较简单，请读者自行到官网下载页面（https:/git- 图2.1 查看Git版本号和帮助来验证Git安装是否成功 2.2.2 Git常用命令 本节来了解Git常用命令的用法。 （1）新建一个文件夹，然后在新建的文件夹中创建Git仓库。使用的命令如下： mkdir git-demo /
36、新建git-demo文件夹 cd git-demo / 进入git-demo文件夹 git init / 创建了一个新的Git仓库 效果如图2.2所示。 图2.2 新建本地Git仓库 （2）在刚才新建的Git仓库中，就可以进行添加和提交修改的操作了。 touch test.file / 为了演示Git的使用，这里先新建test.file文件 提示：touch命令是Linux和macOS系统下的命令行工具，touch test.file的作用是在当前目录下新建空文件test.file，读者也可以使用其他自己熟悉的方法新建测试文件。 （3）Git添加修改的命令使用方法如下： git add tes
37、t.file / 添加test.file文件 git add * / 添加所有文件 （4）Git提交修改的命令使用方法如下： git commit -m 新建test.file / 提交修改并且描述此次修改的内容 提示：第一次使用git commit命令时，会提示用户配置Git账户和邮箱，配置方法为git config-global user.nameYour Name、git config-global user.emailYour Email。 此时，Git的工作流如图2.3所示。 图2.3 Git添加和提交修改的工作流 （5）添加和提交操作成功之后，可以通过如下方法查看结果。 git l
38、og / 查看Git提交的历史记录 此时，对于上面的提交，读者可以看到类似下面的信息。 commit COMMIT-ID Author: GIT-USER-NAME Date: COMMIT-DATE 新建test.file （6）除了自己创建Git仓库，还可以从网上下载已有的Git仓库代码。这里，以Github上React Native项目（ git clone / 将远程仓库复制到本地 （7）此时，由于Git仓库是在远程服务器上，还需要用到git pull和git push这两个命令来操作Git仓库。 cd react-native / 首先需要进入Git仓库所在的文件夹 把刚才复制到本地
39、的Git仓库更新到远程仓库的最新改动，使用git pull命令。 git pull 把刚才复制到本地的Git仓库提交的修改提交到远程仓库中，使用git push命令。 git push 提示：使用Github上React Native项目的例子，执行git push可能会提交失败，这是因为提交至远程仓库需要权限，请读者知悉。 当然，除了上述介绍的基本用法之外，Git命令还有很多，举例如下。 git status：查看Git仓库状态。 git diff：查看Git仓库修改内容的差异。 git branch：使用和管理Git分支。 git tag：使用和管理Git标签。 本书限于篇幅就不一一介绍了
40、，想要深入了解的读者可以参考Git相关书籍和教程。 提示：如果读者对Git命令不熟悉的话，推荐使用Git的图形化工具，例如，SourceTree（ macOS的版本。 2.3 React Native的JSX解决方案 JSX并不是一门新的开发语言，而是Facebook提出的语法方案：一种可以在JavaScript代码中直接书写HTML标签的语法糖，所以，JSX本质上还是JavaScript语言。 小知识：语法糖（Syntactic sugar）是由英国计算科学家彼得兰丁（https:/zh.wikipedia.org/wiki/%E5%BD%BC%E5%BE%97%C2%B7%E5%85%B0
41、%E4%B8%81）发明的一个术语，指计算机语言 中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。语法糖让程序更加简洁，有更高的可读性。 在React和React Native开发中，不一定非要使用JSX，也可以直接使用JavaScript进行开发。但是，强烈建议读者使用JSX！因为JSX在定义类似HTML这种树形结构时，简单明了，极大地提高了开发 和维护的效率。 下面以1.4节第一个React Native应用中的代码为例： 01 export default class ch02 extends Component / 每个页面可以理解成一个组件 02 render
42、() / 渲染页面的函数 03 return ( 04 / 页面根View 05 06 Welcome to React Native! 07 08 09 To get started, edit index.ios.js 10 11 12 Press Cmd+R to reload,n 13 Cmd+D or shake for dev menu 14 15 16 ); 17 16 在上述代码中，组件的render（）方法函数是用于渲染页面的，它的返回值是一个View的对象，但是为什么没有发现创建对象和设置属性的代码呢？原来，JSXTransformer帮我们把代码中XML-Like 语法编
43、译转换成真实可用的JavaScript代码，它不仅仅创建View对象、设置View样式和布局，同时更加贴心的是，还构建了View之间的树形结构。例如，上述例子中的树形结构是这样的： Root View (style container) - Sub Text 1 (style welcome) - Sub Text 2 (style instructions) - Sub Text 3 (style instructions) 2.4 React Native的Flexbox布局 无论是在移动平台还是Web前端开发中，布局技术都是必不可少的。了解Web开发的读者想必都听说过著名的CSS“盒子模
44、型”，如图2.4所示。 图2.4 CSS“盒子模型” CSS“盒子模型”依赖于position属性、浮动属性以及display属性来进行布局，所以，对于一些特殊但常用的布局（例如垂直居中）实现就比较困难。 于是，在2009年，W3C提出了一种新的方案Flexbox布局。Flexbox（Flexible Box的缩写，又称弹性盒子布局）布局旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使 他们的大小是未知或者动态的。Flexbox布局的主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。 小知
45、识：W3C（World Wide Web Consortium）指万维网联盟，该组织建立于1994年，其宗旨是通过促进通用协议的发展并确保其通用型，以激发Web世界的全部潜能。 目前，主流浏览器都已经很好地支持Flexbox布局，如图2.5所示。 图2.5 Flexbox布局与主流浏览器的兼容性 React Native实现了Flexbox布局的大部分功能，并且在实际应用开发中也使用Flexbox来实现布局。这不仅使React Native的UI开发变得更加简单，还很好地解决了iOS、Android等屏幕适配的问 题。 提示：React Native中Flexbox布局的工作原理和Web开发基本一致，只有少许差异。例如，默认值不同，React Native中flexDirection属性的默认值是column而不是row，alignItems的默认值是stretch而不 是flex-start，另外，flex只能指定一个数字值。 为了方便读者理解后面的代码，这里先简单介绍React Native开发中Flexbox布局的使用。 Flexbox布局所使用的属性，简单来说，可以分为以下两个。 决定子组件排列规则的属性，例如，flexDirec