React-Native中的布局

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

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

Flexbox

1
2
3
4
5
6
7
8
9
10
11
12
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')

练习

flex

一个点

1
2
3
<View style={styles.box}>
  <View style= {styles.item}/>
</View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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'
},

两个点

1
2
3
4
5
<View style={styles.box2}>
  <View style= {styles.item}/>
  <View style= {styles.item}/>
</View>

1
2
3
4
5
6
7
8
9
10
11
box2:{
    padding:5,
    margin:10,
    height:65,
    width:65,
    borderRadius:5,
    backgroundColor:'#ffffff',
    flexDirection:'column',
    justifyContent: 'space-between',
    alignItems:'center',
  },

三个点

1
2
3
4
5
<View style={styles.box3}>
  <View style= {styles.item}/>
  <View style= {styles.item32}/>
  <View style= {styles.item33}/>
</View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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'
  },

四个点

1
2
3
4
5
6
7
8
9
10
11
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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',
},

五个点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

1
2
3
column52:{
  justifyContent:'center',
},

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

文章出处 https://hanks.xyz