上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式
本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化。
转载请注明出处：http://blog.csdn.net/wingichoy/article/details/51811866
Flexbox
Flex布局意思为弹性布局，他使用起来非常的方便。
他主要有以下几种属性
flexDirection //设置主轴方向
flexWrap //设置是否换行
justifyContent //主轴对齐方式
alignItems //交叉轴对齐方式
我们将上一篇中的布局样式修改一下，来介绍flex布局的主要属性。
1.flexDirection
可以看到Text和Image是竖直排列的，下面将其改为水平排列，只需要在style添加一行
flexDirection:'row'即可
如图所示，要决定主轴的方向（水平、垂直），可以按照如下设置
flexDirection:'row' //主轴水平
flexDirection:'column '//主轴垂直2.flexWrap
这个属性用于设置是否换行，默认为nowrap，即不换行，为了演示，将图片改小，添加多几个Text。
此时，添加flexWrap属性
flexWrap:'wrap',
发现已经成功换行。
如图所示，要决定是否换行，可以按照如下设置
flexWrap:'wrap' //设置换行
flexWrap:'nowrap'//设置不换行3.justifyContent
这个属性用于视图在主轴上的对其方式，主要有如下几种
justifyContent:'flex-start' //开头对齐
justifyContent:'flex-end' //末尾对齐
justifyContent:'center' //居中
justifyContent:'space-between' //均匀分布
justifyContent:'space-around' //每个视图两侧padding一样顺序效果如下：
flex-start
flex-end
space-between
space-around
注意仔细区分between和around的区别。
4.alignItems
这个属性是指主轴的交叉轴的对其方式(X,Y轴对应)，主要有以下几种
alignItems: 'flex-start' //开头对齐
alignItems: 'flex-end' //末尾对齐
alignItems: 'center' //居中对齐
alignItems: 'stretch' //默认值充满整个容器顺序效果如下：
flex-start
flex-end
center
stretch
为了区分我给text加了背景 注意其细微的区别
到此，Flex的常用属性就已经介绍完毕了，如果你想要了解更多，不妨参考这篇文章
学以致用
下面我们设计以下布局，将文字放到海报的右方。因为整体水平排列，内部垂直排列，所以我们需要多加一个容器将两个Text包裹起来（Android对比LinearLayout嵌套）。修改之后的代码如下：
class WingProject extends Component {
render() {
var movie = MOVIES_DATA[0];
return (
<View style={styles.container}>
<Image source={{uri:movie.img}}
style = {styles.image}
/>
//将两个Text用新的容器包裹起来，新容器的style为rightContainer
<View style={styles.rightContainer}>
<Text style = {styles.title}>{movie.title}</Text>
<Text style = {styles.title}>{movie.year}</Text>
</View>
</View>
);
}
}style如下
const styles = StyleSheet.create({
container: {
flex:1,
//主轴水平排列
flexDirection:'row',
//对其方式居中
justifyContent: 'center',
//交叉轴居中
alignItems:'center',
backgroundColor: '#F5FCFF',
},
image:{
width:400,
height:600,
},
title:{
padding:5,
fontSize:20,
},
rightContainer:{
//设置右容器为竖直排列
flexDirection:'column'
}
});
现在界面已经如下所示了：
嗯嗯 感觉不错。今天就到这里吧。
如果你喜欢我的博客，请评论或者点击关注，谢谢！
参考文章：http://facebook.github.io/react-native/docs/sample-application-movies.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool