实例分析如何具体实现跨平台响应式的布局

　　【导语】React Native 的样式和布局部分采用了前端布局上所使用 CSS 的子集。利用 CSS 里的 Flexbox 进行布局和原生平台的布局方式有比较大的区别。本文集中讲解 Flexbox 的原理，以及 Platform、Dimensions API的用法。并结合具体例子，介绍如何具体实现跨平台响应式的布局。

　　和原生的 iOS 以及 Android 的开发方式不同，React Native 的布局采用了 Web 前端布局所常用的 Flexbox 模型。这个模型的特点在于能够在按照固定尺寸布局之后，灵活地分配屏幕上的剩余空间，利用这个模型可以轻松实现许多应用中所需要的布局设计。

　　开发人员掌握了 Flexbox 模型即可随心所欲地对屏幕上的 UI 元素进行布局，再结合 React Native 所提供的获取屏幕信息、平台信息的 API，就可以进阶实现响应式布局。本文就实现响应式布局的三大支柱——Flex box 模型，获取屏幕信息的 Dimensions API，获取平台信息的 Platform API 进行介绍，最后结合例子来实践响应式布局。

　　Flexbox 模型

　　React Native 在布局和样式上极大程度上借鉴了 Web 前端所使用的 CSS 规格。CSS 布局方面的算法主要由三个部分组成，首先是解决单个 UI 元素的尺寸问题的 Box 模型（具体由 width，height，padding，border，margin 属性构成），其次是解决 UI 元素相对位置的 Position 模型（具体由 position，top，right，bottom，left 属性构成），最后是解决剩余空间分配问题的 Flexbox 模型。

　　三者当中，前两者解决相对局部的布局问题，概念也相对易懂，本文中将不再多做说明。Flexbox 模型则相对复杂，会牵扯一些独特的概念，下图展示了 Flexbox 算法中所涉及的用语。

　　“容器”指定了进行 Flexbox 模型布局的范围，任意的某个单个 UI 元素都可以当作容器，Flexbox 模型的算法不会改变该元素以及其外部元素的布局，只影响其直系子辈元素的布局。

　　“项目”则是 Flexbox 所直接作用的部分，通常是容器下面的直系子辈元素。

　　“主轴”定义了 Flexbox 进行布局的方向，在 React Native 中默认为纵向（从上往下），Flexbox 模型的算法将会沿这个方向依序对项目进行布局。

　　“交叉轴”为主轴所垂直的轴，在 React Native 中默认为横向（从左往右），开发人员可以指定每个项目在交叉轴上如何布局。

　　在了解了 Flexbox 的主要用语之后，就可以试着理解一下 Flexbox 模型的算法。下图辅以具体的布局例子进行图解，算法的步骤如下：

　　1. 首先在主轴上按各项目默认尺寸（通常按 Box 模型属性或是 flexBasis 属性指定）进行布局；