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','stretch') flex number flexDirection enum('row','column') flexWrap enum('wrap','nowrap') justifyContent enum('flex-start','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,flexDirection:'column',justifyContent: 'space-between',

三个点

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

box3:{ padding:5,item32:{ borderRadius:7.5,alignSelf:'center',item33:{ alignSelf:'flex-end',borderRadius:7.5,

四个点

<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,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.52php.cn/article/p-qmytnbsu-bnx.html
http://segmentfault.com/a/1190000002658374

文章出处 http://hanks.xyz