本文主要是介绍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
这篇关于RN8_React-Native知识点2之-布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
