React Native 之 FlexBox 布局篇

什么是FlexBox布局?

弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒装模型提供最大的灵活性。
Flex布局主要思想是:让容器有能力让其子项目能够改变其宽度、高度(甚至是顺序),以最佳方式填充可用空间;

Flexbox在布局中能够解决什么问题?

浮动布局
各种机型屏幕的适配
水平和垂直居中
自动分配宽度
......

Flex布局基于flex-flow流

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

Flexbox的常用属性

** 1. 容器属性 **
** flexDirection: row | row-reverse | column | column-reverse **
该属性决定主轴的方向(即项目的排列方向)。

row:主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column(默认值):主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。

** justifyContent:flex-start | flex-end | center | space-between | space-around**
定义了伸缩项目在主轴线的对齐方式

flex-start(默认值):伸缩项目向一行的起始位置靠齐。
flex-end:伸缩项目向一行的结束位置靠齐。
center:伸缩项目向一行的中间位置靠齐。
space-between:两端对齐,项目之间的间隔都相等。
space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。

** alignItems: flex-start | flex-end | center | baseline | stretch**
定义项目在交叉轴上如何对齐,可以把其想像成次轴(垂直于主轴)的“对齐方式”。

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐 。
center:交叉轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

** flexWrap: nowrap | wrap | wrap-reverse**
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

nowrap(默认值):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。(和wrap相反)

** 2. 元素属性**

** flex **

“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写, 其中第二个和第三个参数(flex-shrink、flex-basis)是可选参数。
默认值为“0 1 auto”。
宽度 = 弹性宽度 * ( flexGrow / sum( flexGorw ) )
这里我找了个图,可能会好理解一些


20151001110223899.jpeg

** alignSelf:auto | flex-start | flex-end | center | baseline | stretch **
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐 。
center:交叉轴的中点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

在React Native中使用Flexbox

** 获取当前屏幕的宽度、高度、分辨率 **

import Dimensions from 'Dimensions';
var { width, height, scale } = Dimensions.get('window');

render() {
  return (
    <View>
      <Text>
        屏幕的宽度:{width + '\n'}
        屏幕的高度:{height + '\n'}
        屏幕的分辨率:{scale + '\n'}
      </Text>
    </View>
  );
}

** 绝对定位和相对定位 **

与css定位不同,在React Native中定位不需要再父组件中设置position属性。
通常情况下设置position和absolute,定位的效果是一样的,但是如果父组件设置了内边距,position会做出相应的定位改变,而absolute则不会。

** 默认宽度 **

我们都知道块级标签如果不设置宽度,通常都是独占一行的,在React Native中的组件中需要设置flexDirection:'row',才能在同一行显示,flex的元素如果不设置宽度,都会百分之百的占满父容器。

水平、垂直居中

当alignItems、justifyContent传center时与flexDirection的关系:


QQ20160815-0.png

想理解这个很简单,看我上班讲的alignItems、justifyContent,心里想着主轴和次轴就可以理解,justifyContent是主轴方向居中,而alignItems是次轴方向居中,flexDirection默认为column,所以误区会认为alignItems为水平居中,justifyContent为垂直居中。

padding和margin

这里就不累赘啦,具体和css用法是一样的

参考链接:http://www.w3cplus.com/css3/a-guide-to-flexbox.html

持续更新React Native相关博客,喜欢敬请关注。

推荐阅读更多精彩内容