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