React-Native中的布局

来源：互联网发布：看图软件acdsee9.0 编辑：程序博客网时间：2024/05/16 13:42

title: React-Native中的布局
date: 2015-12-21 15:11:14
tags:

- React-Native

React-Native 使用 FlexBox布局来放置元素

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

Flexbox

alignItems enum('flex-start', 'flex-end', 'center', 'stretch')alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')flex numberflexDirection enum('row', 'column')flexWrap enum('wrap', 'nowrap')justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

练习

flex

一个点

<View style={styles.box}>  <View style= {styles.item}/></View>

box:{  padding:5,  height:65,  width:65,  borderRadius:5,  backgroundColor:'#ffffff',  justifyContent: 'center',  alignItems:'center',  margin:10,},item:{  borderRadius:7.5,  height:15,  width:15,  backgroundColor:'#333333'},

两个点

<View style={styles.box2}>  <View style= {styles.item}/>  <View style= {styles.item}/></View>

box2:{    padding:5,    margin:10,    height:65,    width:65,    borderRadius:5,    backgroundColor:'#ffffff',    flexDirection:'column',    justifyContent: 'space-between',    alignItems:'center',  },

三个点

<View style={styles.box3}>  <View style= {styles.item}/>  <View style= {styles.item32}/>  <View style= {styles.item33}/></View>

box3:{    padding:5,    margin:10,    height:65,    width:65,    borderRadius:5,    backgroundColor:'#ffffff',    flexDirection:'column',    justifyContent: 'space-between',  },  item32:{    borderRadius:7.5,    height:15,    width:15,    alignSelf:'center',    backgroundColor:'#333333'  },  item33:{    alignSelf:'flex-end',    borderRadius:7.5,    height:15,    width:15,    backgroundColor:'#333333'  },

四个点

<View style={styles.box4}>  <View style= {styles.column41}>    <View style= {styles.item}/>    <View style= {styles.item}/>  </View>  <View style= {styles.column42}>    <View style= {styles.item}/>    <View style= {styles.item}/>  </View> </View>

box4:{  padding:5,  margin:10,  height:65,  width:65,  borderRadius:5,  backgroundColor:'#ffffff',  justifyContent: 'space-between',  flexDirection:'row',},column41:{  justifyContent:'space-between',},column42:{  justifyContent:'space-between',},

五个点

<View style={styles.box4}>  <View style= {styles.column41}>    <View style= {styles.item}/>    <View style= {styles.item}/>  </View>  <View style= {styles.column52}>    <View style= {styles.item}/>  </View>  <View style= {styles.column42}>    <View style= {styles.item}/>    <View style= {styles.item}/>  </View> </View>

column52:{  justifyContent:'center',},

参考链接:
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://segmentfault.com/a/1190000002658374

文章出处 http://hanks.xyz

0 0