ReactNative►第五章：ReactNative详解

第1节：ReactNative详解布局

[TOC]

ReactNative详解布局

参考文章：

前言

布局

一、flex

flex:1 ，那么这是什么意思呢？
可以理解为比重

· 如果同级组件上只有一个，并且设置了 flex:1，那么这个组件相当于分配了全部空间。
· 如果同级组件上只有两个，并且这两个都设置了 flex:1，那么相当于这两个组件平均分配了全部空间。
· 如果同级组件上只有两个，并且第一个组件设置了 flex:1，第二个组件设置了 flex:2，那么相当于第一个组件占据全部空间的三分之一，第二个组件占据全部空间的三分之二。
· 如果没有设置 flex 属性，那么这个组件按需分配空间。

1、flex 与 width/height 的优先级

同时有flex、width、height时候，flex 与 width/height 的优先级

flex的优先级 > width/height。具体，

①、当组件是竖向排列时候，flex的优先级 > height，即height的设置会失效；

②、当组件是横向排列时候，flex的优先级 > width，即width的设置会失效；

如还有不懂此相关的文章可参考：https://www.jianshu.com/p/025f4ad7a4a4

二、flexDirection

flexDirection enum('row', 'column','row-reverse','column-reverse')
flexDirection属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式。

类型 含义 图形举例
column(默认的排列方式) 从上向下排列
column-reverse 从下向上排列
row 从左向右依次排列
row-reverse 从右向左依次排列

图形举例：

image-20190522144243353

三、flexWrap

flexWrap enum('wrap', 'nowrap')
flexWrap属性定义了子元素在父视图内是否允许多行排列，默认为nowrap。

类型 含义
nowrap
(默认)		 flex的元素只排列在一行上，可能导致溢出。
wrap flex的元素在一行排列不下时，就进行多行排列
wrap-reverse 换行，第一行在下方

图形举例：

image-20190522144822763

代码举例：

1
2
3
<View style={ {flexWrap:'wrap',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

四、justifyContent

类型 含义 row举例 column举例
flex-start
(default)		 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐 image-20190522141651963 image-20190522141910412
center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。 image-20190522141712063 image-20190522141921712
flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。 image-20190522141735033 image-20190522141945434
space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 image-20190522141408707 image-20190522141846812
space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。 image-20190522141755193 image-20190522142004059

其他图：

image-20190522143527522

代码使用举例：

1
2
3
<View        style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

五、alignItems（此样式设置在父元素上）

类型 比较 注意
justifyContent 决定其子元素沿着主轴的排列方式
alignItems 决定其子元素沿着次轴的排列方式

alignItems决定了子元素在次轴方向的排列方式（此样式设置在父元素上）。例如若子元素本来是沿着竖直方向排列的（即主轴竖直，次轴水平），则alignItems决定了它们在水平方向的排列方式。此样式和CSS中的align-items表现一致，默认值为stretch。

alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignItems属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。

类型 含义
stretch
(默认)		 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
flex-start 元素向侧轴起点对齐
flex-end 元素向侧轴终点对齐
center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

在{justifyContent:'center',flexDirection:'row'}的情况下：

image-20190522151226308

六、alignSelf（此样式设置在子元素上）

类型 比较 注意
alignItems 决定了子元素在次轴方向的排列方式（此样式设置在父元素上）
alignSelf 决定了该元素在父元素的次轴方向的排列方式（此样式设置在子元素上） 其值会覆盖父元素的alignItems的值

七、其他

1、position(定位)

React Native 中，position 默认值为 relative，即相对布局。

position enum(‘absolute’, ‘relative’)属性设置元素的定位方式，为将要定位的元素定义定位规则。

类型 含义
relative
(默认值)		 生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
absolute 生成绝对定位的元素，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

默认情况下，使用position: 'absolute'后，后面的元素会默认覆盖在前面的元素之上。

2、边缘与宽高(flex、width/height、top/left/bottom/right)

类型 含义
top 元素的上外边距边界与其包含块上边界之间的偏移
left 元素左外边距边界与其包含块左边界之间的偏移
bottom 元素的下外边距边界与其包含块下边界之间的偏移
right 元素右外边距边界与其包含块右边界之间的偏移
width 元素的宽
height 元素的高

①、相对布局relative下，flex优先级比width/height高

父组件的前提下 对子组件进行的设置 造成子组件结果
如果父组件设置了 flex 值 子组件设置了 flex 值的同时，也设置了高度值 则高度无效
如果父组件设置了 flex 值 子组件没有设置 flex 值，只设置了高度值， 则子组件高度有效

参考文章：React-Native 中的基本布局技巧

②、绝对布局absolute下，width/height优先级比flex高

3、margin(外边距)

类型 含义
marginTop 上外边距
marginLeft 左外边距
marginBottom 下外边距
marginRight 右外边距
marginHorizontal 左右外边距
marginVertical 上下外边距

4、padding(内边距)

类型 含义
paddingTop 上内边距
paddingLeft 左内边距
paddingBottom 下内边距
paddingRight 右内边距
paddingHorizontal 左右内边距
paddingVertical 上下内边距

5、视图边框

类型 含义
borderTopWidth 顶部边框宽度
borderLeftWidth 左边框宽度
borderBottomWidth 底部边框宽度
borderRightWidth 右边框宽度
borderColor 边框颜色
border<Bottom\ Left\ Right\ Top>Color 各个方向边框的颜色