[React-Native]React-Native for Android(三):FlexBox布局

2018-02-27 11:30:02来源:https://www.jianshu.com/p/bb12e6dfc16a作者:tinyfight人点击

分享


概述

在我们使用React-Native的时候,最主要的方面是对界面UI组件的编写。React-Native采用了FlexBox的布局方式,FlexBox全称Flexible Box,是CSS3中的一种布局方式,可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防止内容溢出,确保元素拥有恰当的行为。可以看出,FlexBox可以在不同尺寸的屏幕上保持几乎一致的布局行为,这一点对于在碎片化严重的Android机型上尤为重要。


FlexBox属性分类

FlexBox所使用的属性可以大致分为四类:


位置,宽高等样式的属性,比如position,width,height等。
决定子组件排列规则的属性,比如flexDirection,flexWrap,justifyContent,alignItems等。
决定组件本身显示规则的属性,比如flex,alignSelf等。
控制组件填充,空隙等的属性,比如margin,padding等。
FlexBox属性运用示例

位置,宽高属性



position:它是字符串类型的,取值有:relative,absolute,用来表述当前的位置是绝对的还是相对的。


absolute:可以用top,bottom,left,right描述距父组件上下左右的位置。
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
export default class Main extends Component {
render () {
return(
<View style={styles.container}>
<View style={styles.first}/>
<Text style={styles.positionAbsolute}>
Position
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: 'white'
},
positionAbsolute: {
backgroundColor:'red',
height: 40,
width: 120,
position: 'absolute',
top: 20,
left: 20
}
})


运行效果如下:


positionabsolute.jpg

relative:描述的是和同级的上一个组件之间的位置关系,用relative时,不可以使用bottom和right描述,同时left和top默认为0。
  ...//略去重复部分
<Text style={styles.positionRelative}>
Position
</Text>
...//略去重复部分
positionRelative: {
backgroundColor:'blue',
height: 40,
width: 120,
color:'white',
position:'relative',
top:20
}


运行效果如下:


positionRelative.jpg


宽高属性:这个比较简单,指定组件宽高大小的。主要有width,minWidth,maxWidth,height,minHeight,maxHeight。

决定子组件排列规则的属性


flexDirection:控制子组件的排列方向,取值有:row,row-reverse,column,column-reverse。默认值为column
row
  import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Dimensions
} from 'react-native';
const windowWidth = Dimensions.get('window').width;
export default class Main extends Component {
render () {
return(
<View style={styles.container}>
<View style={styles.first}/>
<View style={styles.second}/>
<View style={styles.third}/>
<View style={styles.forth}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: 'white',
width:windowWidth,
height:200,
flexDirection:'row'
},
first:{
width:windowWidth/4,
height:100,
backgroundColor:'red'
},
second:{
width:windowWidth/4,
height:100,
backgroundColor:'blue'
},
third:{
width:windowWidth/4,
height:100,
backgroundColor:'pink'
},
forth:{
width:windowWidth/4,
height:100,
backgroundColor:'purple'
}
})



效果如下:


direction-row.jpg

row-reverse
...//略去重复代码
flexDirection:'row-reverse'
...//略去重复代码

效果如下:




row-reverse.jpg

可以看到是和row成逆序排列。所以带reverse就是翻转排列的意思。
column
...//略去重复代码
const windowHeight = Dimensions.get('window').height;
...//略去重复代码
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: 'white',
width:200,
height:windowHeight,
flexDirection:'column'
},
first:{
width:100,
height:windowHeight/4,
backgroundColor:'red'
},
second:{
width:100,
height:windowHeight/4,
backgroundColor:'blue'
},
third:{
width:100,
height:windowHeight/4,
backgroundColor:'pink'
},
forth:{
width:100,
height:windowHeight/4,
backgroundColor:'purple'
}
})


效果如下:


column.jpg

column-reverse:把column进行翻转,即从下往上排列。

flexWrap
在默认的情况下,组件中的子组件会按照flexDirection设定的排列下去,即使超出边界也不会管。而flexWrap属性则是控制这种情况的发生,设置flexWrap以后子组件放不下了则会自动换行或者换列。
我们使用上文中row排列方式排列布局,但是每一个子组件的宽度加上20。


width:windowWidth/4 + 20,

效果如下:




no-flexwrap.jpg

显而易见,最后一个紫色超出边界了,但是还是会排列下去,有部分内容不会被显示出来。
当我们在父组件中设置flexWrap:'wrap'以后:



flexwrap.jpg

justifyContent和alignItems
在学习这两个属性之前我们先了解一下主轴和次轴的概念,当flexDirection指定了一个方向时,该方向则为主轴,与之垂直的方向则为次轴。比如设置flexDirection:'row',这时候水平方向则为主轴,竖直方向则为次轴。



justifyContent控制子组件在主轴方向的排列方位。其取值为:flex-start,flex-end,center,space-between,space-around




jutifycontent.jpg


alignItems控制子组件在次轴方向的排列方位。其取值为:flex-start,flex-end,center,stretch




alignItems.jpg


因为这两个属性是最常用也是相对比较复杂的属性,建议大家多多练习使用这两个属性,尽可能嵌套搭配使用,看看具体的效果。



组件自身显示规则的属性


flex
flex取值类型为整数值,默认为0。可以取-1,0,或者任意正整数。当它的值非0时,在父组件弹性方向(flexDirection指定方向),组件将自动缩放以适应父组件剩下的布局空间。如果父组件的弹性方向为column,那么即使子组件的height有值也会失效,同样弹性方向为row时,子组件的width有值也会失效。
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: 'white',
width:windowWidth,
height:windowHeight,
flexDirection:'row',
},
first:{
flex:1,
width:100,
height:100,
backgroundColor:'red'
},
second:{
flex:1,
width:100,
height:100,
backgroundColor:'blue'
},
third:{
flex:1,
width:100,
height:100,
backgroundColor:'pink'
},
forth:{
flex:3,
width:100,
height:100,
backgroundColor:'purple'
}
})

效果如下:




flex.jpg

简单来说,flex和Android中线性布局中的weight权重属性比较类似。在很多时候可以看作就是一个权重的属性。
alignSelf
其用途是为了让子组件忽略父组件的alignItems的设置,取自身alignSelf的值。取值为:auto,flex-start,flex-end,center,stretch
...//省略重复代码
container: {
flex:1,
backgroundColor: 'white',
width:windowWidth,
height:windowHeight,
flexDirection:'row',
alignItems:'flex-start'
},
...//省略重复代码
forth:{
width:100,
height:100,
backgroundColor:'purple',
alignSelf:'center'
}


效果如下:


alignself.jpg



空隙,填充
这个属性比较简单,上一张图大家就能看明白:





round.jpg

border:取值为borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth
padding:取值为
padding对四周都有效,paddingHorizontal对水平方向有效,paddingVertical对垂直方向有效,paddingBottom,paddingRight,paddingLeft,paddingTop
margin:取值为
margin对四周都有效,marginHorizontal对水平方向有效,marginVertical对垂直方向有效,marginBottom,marginRight,marginLeft,marginTop


总结

FlexBox使用起来简单方便,各项属性约束也很成熟,使用FlexBox可以很快速方便的完成UI界面的搭建。就算是复杂布局也可以很容易实现。React-Native用来写界面实在是太爽了。飞快~并且几乎一致的布局行为和界面展示,再也不用担心安卓碎片化严重的问题啦。








最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台