React实战-对比ReactJs与ReactNative中的Flex用法

React实战-对比ReactJs与ReactNative中的Flex用法

无论是Web还是移动端，让人花费大量精力和时间的是页面布局，在新Css3中提供了flex为我们解决了很大的问题，我们不要再设置如此多的float, 为个元素居中伤透脑筋，以至网上出现有9种元素居中的做法，跟茴香豆的茴有4种写法一样，自从出现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的参数只支持单一数字

在ReactNative中可以采用flexFlow:'row'，但如果写成flexFlow:'row, wrap'，将不会起作用。

b.在ReactNative中flexDirection的默认值为column,而css中默认值为row

c.在ReactNative中alignItems默认值为stretch，而css中默认值为flex-start

d.在ReactNative中属性采用JSX中的写法，没有‘-’,并且第二个单词开始首字母大写（一般如此，非绝对正确）,而css中一般采用小写加‘-’连接，如：justify-content。

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

虽然ReactNative中flex属性写法不同，但值却是相同的。如：

flexDirection:'row-reverse'。

至于Flex的用法，还是那句话，想快速入门可以看一眼别人的介绍，细看还是看官网原文，如果你只想简单应用，只需了解主要的几个属性：

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的用法，可以随意的布局了。