ReactNative系列之二FlexBox布局

时间:2021-12-03 16:17:20

感谢:阮一峰大神,本文在大神的讲解的网页CSS的flex的基础上针对ReactNative再进行介绍(属性名,及参数在RN上的异同)

参考:http://reactnative.cn/docs/0.41/layout-props.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool


简介:在Android和iOS中常用的有线性布局、帧布局、相对布局、绝对布局、自动布局等。在ReactNative中,我们使用FlexBox(弹性盒子)布局方式。

一、     基本概念

1、在ReactNative中,通常需要界面渲染的内容都包含在一个View中。当然View中又可以包含单个或多个子元素。我们把相对的控件称为Flex容器(flex container),它的所有子元素称为容器成员(flex item)。利用Flex布局,我们能够很好的控制flex item的布局位置。

2、根据下图,了解一些概念:

容器默认存在两根轴:水平的主轴(mainaxis)和垂直的交驻轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start, 结束位置叫做main end; 交叉轴的开始位置叫做cross start, 结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

ReactNative系列之二FlexBox布局

ReactNative系列之二FlexBox布局

注:看到这里如果对概念不清楚,不用担心!接下来对照实例能很好的理解。

二、     常用容器属性

 

1、        flexDirection:‘row|row-reverse|column|column-reverse’

该属性决定主轴的方向(即flex item的排列方向)

row: 主轴为水平方向,起点在左端

row-reverse: 主轴为水平方向,起点在右端

column: 主轴为垂直方向,起点在上沿

column-reverse: 主轴为垂直主向,起点在下沿

注:通常我们只用到row和column

a)      ReactNative系列之二FlexBox布局

b)      ReactNative系列之二FlexBox布局

2、        justifyContent: ‘flex-start | flex-end | center | space-between | space-around ’

定义了项目在主轴上的对齐方式,以下默认主轴为row的情况

flex-start(默认值): 左对齐

flex-end : 右对齐

center : 居中

space-between : 两端对齐,项目之间的间隔都相等

Space-around : 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的    间隔大一倍

ReactNative系列之二FlexBox布局

3、        flexWrap: ‘nowrap | wrap’

默认情况下,项目都排在一条线(称‘轴线’)上。flexWrap属性定义,如果一条轴线排不下,如何换行。

ReactNative系列之二FlexBox布局

a)      nowrap (默认) : 不换行

ReactNative系列之二FlexBox布局

b)      wrap : 换行,第一行在上方

ReactNative系列之二FlexBox布局

c)       wrap-reverse (React Native上并元此属性,区别于网页CSS)

4、        justifyContent : ‘flex-start |flex-end | center | space-between | space-around’

属性定就了项目在主轴上的对齐方式,下图假设主轴为水平

ReactNative系列之二FlexBox布局

a)      flex-start (默认值) : 左对齐

b)      flex-end : 右对齐

c)       center : 居中

d)      space-between : 两端对齐,项目之间的间隔都相等

e)      space-around: 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

5、        alignItems : ‘flex-start |flex-end | center | stretch | baseline’

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

ReactNative系列之二FlexBox布局

a)      stretch (默认值) : 如果项目未设置高度或设为auto,将占满整个容器的高度

b)      flex-start : 交叉轴(纵轴或次轴)的起点对齐

c)       flex-end : 交叉纵的终点对齐

d)      center : 交叉轴的中间点对齐

e)      baseline : 项目的第一行文字的基线对齐

三、     常用的元素属性

1、        flex标签

使用flex,通常会在flex container设置flex:1 表示使用flex布局并且布局将占用整个屏幕(在ReactNative中,包含状态栏)

ReactNative系列之二FlexBox布局

在Reac Native中,flex的取值只能为整数值,区别于CSS的’auto’。

当flex取正整数值时, is a positive number, it makes the component flexible and it willbe sized proportional to its flex value. So a component with flex setto 2 will take twice the space as a component with flex set to 1.

When flex is 0, the component issized according to width and height and it is inflexible.

When flex is -1, the component isnormally sized according width and height. However, if there'snot enough space, the component will shrink to its minWidth and minHeight.

2、        alignSelf: ‘auto | flex-start |flex-end | center | baseline | stretch’

决定了元素在容器的决轴方向的排列方向,该属性除了auto,其它值均与alignItems属性完全一致

ReactNative系列之二FlexBox布局

3、        flexGrow number

属性定义元素的放大比例,默认为0,如果存在剩余空间也不放大,如果所有的项目的属性值都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flexGrow属性为2,其它项目都为1,则前者占据的剩余空间将比其它项多一倍

ReactNative系列之二FlexBox布局

4、        flexShrink number

属性定义了元素的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有的元素值为1,当空间不足时,都将等比例缩小。如果一个项目的属性为0,其它项目都为1,则空间不足时,前者缩小。

 

ReactNative系列之二FlexBox布局