實例分析如何具體實現(xiàn)跨平臺響應式的布局
【導語】React Native 的樣式和布局部分采用了前端布局上所使用 CSS 的子集。利用 CSS 里的 Flexbox 進行布局和原生平臺的布局方式有比較大的區(qū)別。本文集中講解 Flexbox 的原理，以及 Platform、Dimensions API的用法。并結合具體例子，介紹如何具體實現(xiàn)跨平臺響應式的布局。
和原生的 iOS 以及 Android 的開發(fā)方式不同，React Native 的布局采用了 Web 前端布局所常用的 Flexbox 模型。這個模型的特點在于能夠在按照固定尺寸布局之后，靈活地分配屏幕上的剩余空間，利用這個模型可以輕松實現(xiàn)許多應用中所需要的布局設計。
開發(fā)人員掌握了 Flexbox 模型即可隨心所欲地對屏幕上的 UI 元素進行布局，再結合 React Native 所提供的獲取屏幕信息、平臺信息的 API，就可以進階實現(xiàn)響應式布局。本文就實現(xiàn)響應式布局的三大支柱——Flex box 模型，獲取屏幕信息的 Dimensions API，獲取平臺信息的 Platform API 進行介紹，最后結合例子來實踐響應式布局。
Flexbox 模型
React Native 在布局和樣式上極大程度上借鑒了 Web 前端所使用的 CSS 規(guī)格。CSS 布局方面的算法主要由三個部分組成，首先是解決單個 UI 元素的尺寸問題的 Box 模型（具體由 width，height，padding，border，margin 屬性構成），其次是解決 UI 元素相對位置的 Position 模型（具體由 position，top，right，bottom，left 屬性構成），最后是解決剩余空間分配問題的 Flexbox 模型。
三者當中，前兩者解決相對局部的布局問題，概念也相對易懂，本文中將不再多做說明。Flexbox 模型則相對復雜，會牽扯一些獨特的概念，下圖展示了 Flexbox 算法中所涉及的用語。
“容器”指定了進行 Flexbox 模型布局的范圍，任意的某個單個 UI 元素都可以當作容器，F(xiàn)lexbox 模型的算法不會改變該元素以及其外部元素的布局，只影響其直系子輩元素的布局。
“項目”則是 Flexbox 所直接作用的部分，通常是容器下面的直系子輩元素。
“主軸”定義了 Flexbox 進行布局的方向，在 React Native 中默認為縱向（從上往下），F(xiàn)lexbox 模型的算法將會沿這個方向依序對項目進行布局。
“交叉軸”為主軸所垂直的軸，在 React Native 中默認為橫向（從左往右），開發(fā)人員可以指定每個項目在交叉軸上如何布局。
在了解了 Flexbox 的主要用語之后，就可以試著理解一下 Flexbox 模型的算法。下圖輔以具體的布局例子進行圖解，算法的步驟如下：
1. 首先在主軸上按各項目默認尺寸（通常按 Box 模型屬性或是 flexBasis 屬性指定）進行布局；
非常好我支持^.^
(0) 0%
不好我反對
(0) 0%