React Native FlexBox布局
2017-02-20 21:13
525 查看
这段时间熟悉了一下ReactNative,里面的布局感觉很有意思,跟我以前接触的布局思想有很大不同,所以就自己测试了一些FlexBox的属性,一下是效果图:
RN的布局主要依赖于FlexBox系统,它有如下几个主要属性:
flex 视图的比重,这里注意了:In React Native
not work the same way that it does in CSS
flexDirection 子视图在容器中排布的方向,这是用来确定主轴的 flexDirection controls which directions children of a Container Go
justifyContent 子视图在主轴的排列方式 justifyContent aligns children in the main direction
alignItems 子视图在主轴的交叉轴(次轴)排列方式 alignItems aligns children in the cross direction
alignSelf 子视图在次轴的排列方式,主要是用来重写父视图的alignItems
alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent.
position 布局方式,默认是相对布局relative
flexWrap 是否包裹 ,默认值是nowrap
接下来看代码实现:
首先我们也仿照官方的列子写个Circle类来描述作为子视图的球
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
其次我们再写个CircleBlock类作为容器,其实就是小球的父视图:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
先看看flexDirection这个属性有哪些值:
2
3
4
5
6
1
2
3
4
5
6
以下几个属性的实际效果:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
justifyContent作为子视图在主轴的排列方式有这些值:
2
3
4
5
6
7
1
2
3
4
5
6
7
看代码:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
至于效果,是这样的
alignItems是子视图在主轴交叉轴的排列方式,有这些值
2
3
4
5
6
1
2
3
4
5
6
alignSelf做为对alignItems的重写,值与alignItems一样
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
flexWrap包裹
2
3
4
1
2
3
4
下面是代码:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
position当子视图需要在父视图里面精准定位是需要将子视图的position设置为absoulute
2
3
4
1
2
3
4
而且是这里面的绝对布局可以理解是对容器剩余空间的布局,要注意区分这段代码的实现和效果:
实现
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
效果:
RN的布局主要依赖于FlexBox系统,它有如下几个主要属性:
flex 视图的比重,这里注意了:In React Native
flexdoes
not work the same way that it does in CSS
flexDirection 子视图在容器中排布的方向,这是用来确定主轴的 flexDirection controls which directions children of a Container Go
justifyContent 子视图在主轴的排列方式 justifyContent aligns children in the main direction
alignItems 子视图在主轴的交叉轴(次轴)排列方式 alignItems aligns children in the cross direction
alignSelf 子视图在次轴的排列方式,主要是用来重写父视图的alignItems
alignSelf controls how a child aligns in the cross direction, overriding the alignItems of the parent.
position 布局方式,默认是相对布局relative
flexWrap 是否包裹 ,默认值是nowrap
接下来看代码实现:
首先我们也仿照官方的列子写个Circle类来描述作为子视图的球
class Circle extends Component { render() { var size = this.props.size || 20 var backgroundColor = this.props.backgroundColor || '#dcdcdc' return( <View style={{ borderRadius:size/2, backgroundColor:backgroundColor, width:size, height:size, margin:2, shadowOffset:{width:4,height:4}, shadowColor:'#a9a9a9', shadowOpacity:0.6 }} /> )} }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
其次我们再写个CircleBlock类作为容器,其实就是小球的父视图:
class Circle extends Component { render() { var size = this.props.size || 20 var backgroundColor = this.props.backgroundColor || '#dcdcdc' return( <View style={{ borderRadius:size/2, backgroundColor:backgroundColor, width:size, height:size, margin:2, shadowOffset:{wid 4000 th:4,height:4}, shadowColor:'#a9a9a9', shadowOpacity:0.6 }} /> )} }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
先看看flexDirection这个属性有哪些值:
flexDirection: ReactPropTypes.oneOf([ 'row', //我的理解就是横排 'row-reverse', //横排颠倒,其实从效果上来看就是把row的一切都反过来 'column', //竖排 'column-reverse' //竖排颠倒 ]),1
2
3
4
5
6
1
2
3
4
5
6
以下几个属性的实际效果:
<Text>flexDirection:row</Text> <CircleBlock style={{flexDirection:'row'}}> {minCircles} </CircleBlock> <Text>flexDirection:column</Text> <CircleBlock style={{flexDirection:'column'}}> {minCircles} </CircleBlock> <Text>flexDirection:row-reverse</Text> <CircleBlock style={{flexDirection:'row-reverse'}}> {minCircles} </CircleBlock> <Text>flexDirection:column-reverse</Text> <CircleBlock style={{flexDirection:'column-reverse'}}> {minCircles} </CircleBlock>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
justifyContent作为子视图在主轴的排列方式有这些值:
justifyContent: ReactPropTypes.oneOf([ 'flex-start', //从开始位置排列,值从左到右或从上到下 'flex-end', //从结尾位置排列 'center', //居中 'space-between', //空间在子视图之间,从效果来看就是子视图等间距 'space-around' //空间环绕子视图,我的理解是每个子视图占据相同的空白 ]),1
2
3
4
5
6
7
1
2
3
4
5
6
7
看代码:
<Text>justifyContent:flex-start</Text> <CircleBlock style={{justifyContent:'flex-start'}}> {minCircles} </CircleBlock> <Text>justifyContent:center</Text> <CircleBlock style={{justifyContent:'center'}}> 11688 {minCircles} </CircleBlock> <Text>justifyContent:flex-end</Text> <CircleBlock style={{justifyContent:'flex-end'}}> {minCircles} </CircleBlock> <Text>justifyContent:space-between</Text> <CircleBlock style={{justifyContent:'space-between'}}> {minCircles} </CircleBlock> <Text>justifyContent:space-around</Text> <CircleBlock style={{justifyContent:'space-around'}}> {minCircles} </CircleBlock>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
至于效果,是这样的
alignItems是子视图在主轴交叉轴的排列方式,有这些值
alignItems: ReactPropTypes.oneOf([ 'flex-start', //从开始位置排列 'flex-end', //从结尾处排列 'center', //居中 'stretch' //拉伸 ]),1
2
3
4
5
6
1
2
3
4
5
6
alignSelf做为对alignItems的重写,值与alignItems一样
<Text>alignItems: flex-start</Text> <CircleBlock style={{alignItems:'flex-start',height:100}}> {minCircles} </CircleBlock> <Text> alignItems:center</Text> <CircleBlock style={{alignItems:'center',height:100}}> {minCircles} </CircleBlock> <Text>alignItems:flex-end</Text> <CircleBlock style={{alignItems:'flex-end',height:100}}> {minCircles} </CircleBlock>1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
flexWrap包裹
flexWrap: ReactPropTypes.oneOf([ 'wrap', //子视图超过一行的长度后将会换行 'nowrap' //子视图超过一行的长度后不换行 ]),1
2
3
4
1
2
3
4
下面是代码:
<Text>flexWrap:wrap</Text> <CircleBlock style={{flexWrap:'wrap',height:150}}> {[minCircles,minCircles,minCircles,minCircles,minCircles,minCircles]} </CircleBlock> <Text>flexWrap:nowrap</Text> <CircleBlock style={{flexWrap:'nowrap',height:150}}> {minCircles} <CircleBlock style={{width:100,flexWrap:'wrap',marginVertical:40}}> {minCircles} </CircleBlock> </CircleBlock> <CircleBlock style={{flexWrap:'wrap',height:150}}> <CircleBlock style={{width:100,flexWrap:'wrap',position:'absolute',marginVertical:40}}> {minCircles} </CircleBlock> {minCircles} </CircleBlock> <CircleBlock style={{flexWrap:'nowrap',height:150}}> {minCircles} <CircleBlock style={{width:100,flexWrap:'wrap',alignSelf:'center'}}> {minCircles} </CircleBlock> </CircleBlock>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
position当子视图需要在父视图里面精准定位是需要将子视图的position设置为absoulute
position: ReactPropTypes.oneOf([ 'absolute', //相对布局 'relative' //绝对布局 ]),1
2
3
4
1
2
3
4
而且是这里面的绝对布局可以理解是对容器剩余空间的布局,要注意区分这段代码的实现和效果:
实现
<CircleBlock style={{height:150}}> {minCircles} <CircleBlock style={{width:100,flexWrap:'wrap',marginVertical:40}}> {minCircles} </CircleBlock> </CircleBlock> <CircleBlock style={{height:150}}> <CircleBlock style={{width:100,flexWrap:'wrap',position:'absolute',marginVertical:40}}> {minCircles} </CircleBlock> {minCircles} </CircleBlock> <CircleBlock style={{height:150}}> {minCircles} <CircleBlock style={{width:100,flexWrap:'wrap',alignSelf:'center'}}> {minCircles} </CircleBlock> </CircleBlock>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
效果:
相关文章推荐
- React Native从零开始(二)Flexbox布局,和布局属性
- 浅谈React Native Flexbox布局(小结)
- React Native FlexBox布局(二) 应用篇
- ReactNative之Flexbox布局
- ReactNative (四)FlexBox 布局基础
- React-Native之flexbox布局
- ReactNative FlexBox布局
- React Native 弹性布局FlexBox
- React Native 弹性布局FlexBox
- React Native Flexbox布局
- React Native-4.React Native布局属性练习之flexBox模型实战
- React-Native之flexbox布局篇
- React Native之FlexBox布局上的一些心得
- React native FlexBox布局的基本用法
- React Native系列之flexbox布局详解
- React Native FlexBox布局
- 《React-Native系列》11、 图解RN布局之FlexBox,三分钟上手写RN界面
- React Native实战之flexbox布局(RN基础)
- [Wondgirl]从零开始学React Native之FlexBox布局(三)
- React-Native 学习之 Flex布局