首先看完阮一峰的Flex布局教程
1.Flex属性
class AwesomeProject extends Component {
render() {
return (
);
}
}
var styles = StyleSheet.create({
test: {
flex:1,
borderWidth:5,
borderColor:'gray'
},
test1:{
flex:5,
height:40,
borderWidth:5,
borderColor:'blue'
},
test2:{
flex:10,
borderWidth:5,
borderColor:'red'
},
test3:{
}
});
当一个(元素)组件，定义了flex属性时，表示该元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩，其小于和等于0的时候不伸缩，例如：flex:0, flex:-1等。上面的代码，最外层的view是可伸缩的，因为没有兄弟节点和它抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1／4伸缩空间， 最后一个view占据1／2空间。
因此，我们看到的布局图如下
Paste_Image.png
2.flexDirection
flexDirection在React-Native中只有两个属性，一个是row(横向伸缩)和column(纵向伸缩)；
row（默认值）：主轴为水平方向，起点在左端
column：主轴为垂直方向，起点在上沿
class AwesomeProject extends Component {
render() {
return (
);
}
}
var styles = StyleSheet.create({
test: {
flex:1,
borderWidth:5,
borderColor:'gray'
},
test1:{
flex:5,
flexDirection:'row',
borderWidth:5,
borderColor:'blue'
},
test2:{
flex:5,
flexDirection:'column',
borderWidth:5,
borderColor:'blue'
},
test3:{
width:20,
height:20,
borderRadius:20,
backgroundColor:'green',
}
}
);
效果如下图：
Paste_Image.png
以下属性可自己尝试：
flexWrap('wrap','nowrap')
alignItems('flex-start','flex-end','center','stretch')
alignSelf('auto','flex-start','flex-end','center','stretch')
justifyContent('flex-start','flex-end','center','space-between','space-around')