【導(dǎo)語(yǔ)】React Native 的樣式和布局部分采用了前端布局上所使用 CSS 的子集。利用 CSS 里的 Flexbox 進(jìn)行布局和原生平臺(tái)的布局方式有比較大的區(qū)別。本文集中講解 Flexbox 的原理，以及 Platform、Dimensions API的用法。并結(jié)合具體例子，介紹如何具體實(shí)現(xiàn)跨平臺(tái)響應(yīng)式的布局。

　　和原生的 iOS 以及 Android 的開發(fā)方式不同，React Native 的布局采用了 Web 前端布局所常用的 Flexbox 模型。這個(gè)模型的特點(diǎn)在于能夠在按照固定尺寸布局之后，靈活地分配屏幕上的剩余空間，利用這個(gè)模型可以輕松實(shí)現(xiàn)許多應(yīng)用中所需要的布局設(shè)計(jì)。

　　開發(fā)人員掌握了 Flexbox 模型即可隨心所欲地對(duì)屏幕上的 UI 元素進(jìn)行布局，再結(jié)合 React Native 所提供的獲取屏幕信息、平臺(tái)信息的 API，就可以進(jìn)階實(shí)現(xiàn)響應(yīng)式布局。本文就實(shí)現(xiàn)響應(yīng)式布局的三大支柱——Flex box 模型，獲取屏幕信息的 Dimensions API，獲取平臺(tái)信息的 Platform API 進(jìn)行介紹，最后結(jié)合例子來(lái)實(shí)踐響應(yīng)式布局。

　　Flexbox 模型

　　React Native 在布局和樣式上極大程度上借鑒了 Web 前端所使用的 CSS 規(guī)格。CSS 布局方面的算法主要由三個(gè)部分組成，首先是解決單個(gè) UI 元素的尺寸問題的 Box 模型（具體由 width，height，padding，border，margin 屬性構(gòu)成），其次是解決 UI 元素相對(duì)位置的 Position 模型（具體由 position，top，right，bottom，left 屬性構(gòu)成），最后是解決剩余空間分配問題的 Flexbox 模型。

　　三者當(dāng)中，前兩者解決相對(duì)局部的布局問題，概念也相對(duì)易懂，本文中將不再多做說(shuō)明。Flexbox 模型則相對(duì)復(fù)雜，會(huì)牽扯一些獨(dú)特的概念，下圖展示了 Flexbox 算法中所涉及的用語(yǔ)。

　　“容器”指定了進(jìn)行 Flexbox 模型布局的范圍，任意的某個(gè)單個(gè) UI 元素都可以當(dāng)作容器，F(xiàn)lexbox 模型的算法不會(huì)改變?cè)撛匾约捌渫獠吭氐牟季郑挥绊懫渲毕底虞呍氐牟季帧?/p>

　　“項(xiàng)目”則是 Flexbox 所直接作用的部分，通常是容器下面的直系子輩元素。

　　“主軸”定義了 Flexbox 進(jìn)行布局的方向，在 React Native 中默認(rèn)為縱向（從上往下），F(xiàn)lexbox 模型的算法將會(huì)沿這個(gè)方向依序?qū)?xiàng)目進(jìn)行布局。

　　“交叉軸”為主軸所垂直的軸，在 React Native 中默認(rèn)為橫向（從左往右），開發(fā)人員可以指定每個(gè)項(xiàng)目在交叉軸上如何布局。

　　在了解了 Flexbox 的主要用語(yǔ)之后，就可以試著理解一下 Flexbox 模型的算法。下圖輔以具體的布局例子進(jìn)行圖解，算法的步驟如下：

　　1. 首先在主軸上按各項(xiàng)目默認(rèn)尺寸（通常按 Box 模型屬性或是 flexBasis 屬性指定）進(jìn)行布局；

相關(guān)電子資料下載

• bootstrap響應(yīng)式布局 2247