React實戰-對比ReactJs與ReactNative中的Flex用法

React實戰-對照ReactJs與ReactNative中的Flex用法

不管是Web還是移動端，讓人花費大量精力和時間的是頁面布局，在新Css3中提供了flex為我們解決了很大的問題，我們不要再設置如此多的float, 為個元素居中傷透腦筋，以致網上出現有9種元素居中的做法，跟茴香豆的茴有4種寫法1樣，自從出現flex后，頁面布局就變的輕松多了。但是ReactNative與ReactJs中寫法又有很多不同。flex的基本用法我們可以直接看Flex的官方文檔便可。

1.ReactJs中flex寫法與普通html的不同

相比ReactNative來講，ReactJs中flex的寫法更接近普通html的flex寫法，基本上無障礙，無損傷的繼承了css的寫法，不同主要在于JSX與html中的寫法不同，之前的博文中有提到JSX寫法的不同，固然這些不同仍然帶到了ReactNative中。

2.ReactNative中Flex的寫法與ReactJs中寫法的不同

除繼承了JSX語法對css命名的特殊性，ReactNative相比ReactJs在flex的寫法也有所不同。主要表現在以下幾點：

a.在ReactNative中flex的參數只支持單1數字

在ReactNative中可以采取flexFlow:'row'，但如果寫成flexFlow:'row, wrap'，將不會起作用。

b.在ReactNative中flexDirection的默許值為column,而css中默許值為row

c.在ReactNative中alignItems默許值為stretch，而css中默許值為flex-start

d.在ReactNative中屬性采取JSX中的寫法，沒有‘-’,并且第2個單詞開始首字母大寫（1般如此，非絕對正確）,而css中1般采取小寫加‘-’連接，如：justify-content。

e.Flex的屬性值在ReactNative和css中基本相同。

雖然ReactNative中flex屬性寫法不同，但值卻是相同的。如：

flexDirection:'row-reverse'。

至于Flex的用法，還是那句話，想快速入門可以看1眼他人的介紹，細看還是看官網原文，如果你只想簡單利用，只需了解主要的幾個屬性：

l Flex Direction：row,column

定義子元素排列方向，row橫向排列，column縱向排列

l Justify Content：flex-start, center, flex-end, space-around,  space-between

定義子元素排列的出發點，間隔空間。

l Align Items：flex-start, center, flex-end, stretch

定義子元素排列方向的縱向排列方式，也就是Flex Direction的垂直方向上的排列方式。

l Flex:number

定義子元素所占空間的比例。定義這個元素，width或height會失效。

了解了以上4個屬性的用法，也基本了解了flex的用法，可以隨便的布局了。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈