RN8_React-Native知识点2之-布局

RN8_React-Native知识点2之-布局

参考：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

 

Flex布局

 

宽度设置：

默认值：

flex的元素如果不设置宽度，都会百分之百的占满父容器。设置了宽度则按照宽度值设置。

通过权值设置：

百分比：

Flex属性

1.      flex-direction

2.      flex-wrap

3.      flex-flow

4.      justify-content

5.      align-items

6.      align-content

flex-direction

.box {

 flex-direction:row |row-reverse |column |column-reverse;

}

flex-wrap

定义了如果一条轴线排不下，如何换行。

.box{

 flex-wrap:nowrap (默认)|wrap|
wrap-reverse;

}

Nowrap：



Wrap：



wrap-reverse：

justify-content

定义了项目在主轴上的对齐方式。

.box {

justify-content:

flex-start|flex-end |center |
space-between |space-around

;

}

align-items

.box {

align-items:

flex-start|flex-end | center| baseline | stretch

;

}

 


 

 

 

 

 

 

网格布局

1、等分网格布局

2、不等分表格

 

图片布局

在图片布局中，有三种mode：contain, cover, stretch。

Contain模式：

<Image style={{flex: 1, height:100, resizeMode: Image.resizeMode.contain}} source={{uri:'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}}
/>

Cover模式

<Image style={{flex: 1, height:100, resizeMode: Image.resizeMode.cover}} source={{uri: 'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}}
/>

Stretch模式

<Image style={{flex: 1, height:100, resizeMode: Image.resizeMode.stretch}} source={{uri:'http://gtms03.alicdn.com/tps/i3/TB1Kcs5GXXXXXbMXVXXutsrNFXX-608-370.png'}}
/>

 

布局练习

参考：
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html