React-Native中的佈局

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 number

flexDirection enum('row', 'column')

flexWrap enum('wrap', 'nowrap')

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

練習

一個點

<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