React Native Flex布局-基础

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native Flex布局-基础相关的知识,希望对你有一定的参考价值。

flex布局 - 弹性布局

 容器默认存在两根轴:主轴(main axis)和交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。Flex布局与android的线性布局(LinearLayout)有点类似,都可以设置布局方向,对齐方式,以及项目的布局占位权重,区别是flex容器中项目分布的总长度超出屏幕宽度,超出的那部分项目不可见,项目不会变形,或者可以设置flexWrap属性,让容器可以分行布局,所有项目都能显示出来。

基本属性

flex属性可以分为容器属性和项目属性

容器属性

flexDirection
justifyContent
alignItems
flexWrap
项目属性包括:
flex
alignSelf

容器属性

flexDirection:布局方向决定主轴的方向,默认值是column,即纵向布局

描述
row横向布局,主轴为水平方向
column纵向布局,主轴为竖直方向

 justifyContent:主轴方向对齐方式

描述
flex-start主轴开端
center居中
flex-end主轴末端
space-between项目与项目之间插入相等空隙
space-around项目两旁插入相等空隙

 alignItems:交叉轴方向对齐方式

默认值flex-start,即交叉轴开端

描述
flex-start交叉轴开端
center交叉轴居中
flex-end交叉轴末端

 flexWrap:包含内容 默认值是nowrap,不包裹所有内容

描述
nowrap项目沿主轴方向布局,超出容器长度的部分不可见
wrap项目沿主轴布局所需长度大于容器总长度时,分行布局,所有项目内容都可见

 项目属性

flex:布局权重

描述
>=0项目占位权重

 alignSelf:项目交叉轴方向自身对齐方式

描述
flex-start开端
center居中
flex-end末端

css属性

width: ReactPropTypes.number,
height: ReactPropTypes.number,
top: ReactPropTypes.number,
left: ReactPropTypes.number,
right: ReactPropTypes.number,
bottom: ReactPropTypes.number,
margin: ReactPropTypes.number,
marginVertical: ReactPropTypes.number,
marginHorizontal: ReactPropTypes.number,
marginTop: ReactPropTypes.number,
marginBottom: ReactPropTypes.number,
marginLeft: ReactPropTypes.number,
marginRight: ReactPropTypes.number,
padding: ReactPropTypes.number,
paddingVertical: ReactPropTypes.number,
paddingHorizontal: ReactPropTypes.number,
paddingTop: ReactPropTypes.number,
paddingBottom: ReactPropTypes.number,
paddingLeft: ReactPropTypes.number,
paddingRight: ReactPropTypes.number,
borderWidth: ReactPropTypes.number,
borderTopWidth: ReactPropTypes.number,
borderRightWidth: ReactPropTypes.number,
borderBottomWidth: ReactPropTypes.number,
borderLeftWidth: ReactPropTypes.number,
属性类型描述
widthnumber容器或者项目的宽度
heightnumber容器或者项目的高度
top,bottom,left,rightnumber在父容器的上下左右偏移量
marginnumber留边,留边的空间不属于容器或者项目自身空间
marginHorizontalnumber水平方向留边
marginVerticalnumber垂直方向留边
paddingnumber填充,填充的空间输入容器或者项目自身空间
paddingHorizontalnumber水平方向填充
paddingVerticalnumber垂直方向填充
borderWidthnumber边界宽度
positionenum位置方式:absolute与relative

position:默认值为relative

描述
absolute绝对布局
relative相对布局

react的默认位置方式是relative,项目是一个接一个排列下去的,absolute为绝对布局,一般会与left和top属性一起使用。有时候我们需要实现某些项目重叠起来,absolute属性就能发挥作用了,例如下图:react的基本组件暂时不支持以图片作为背景,所以这里的的转入是一个文本组件,而红色的圆形是一个图片组件,在ios里面组件也可以作为容器,图片可以正常显示,但是在Android里面,可能存在些问题,如果使用组件作为容器都会出现图片变得好奇怪,所以就可以absoulte来解决问题了

以上是关于React Native Flex布局-基础的主要内容,如果未能解决你的问题,请参考以下文章

React Native,flexbox布局

React Native资料

React-Native Flex布局整理

React Native知识1-FlexBox 布局内容

4手把手教React Native实战之flexbox布局(伸缩属性)

React-Native:替代 flex-basis