[React Native]弹性布局Flexbox

992 查看

1. 什么是Flexbox？
简单来说Flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为Flexbox是CSS领域类似Android中 LinearLayout的一种布局，但是要比 LinearLayout要强大的多。

2. ReactNative中的Flexbox
总所周知，移动端在使用和操作习惯与PC端有着截然的不同，这就注定了它和WEB端在布局方式以及复杂度方面有着巨大的差别。所以在ReactNative中，官方对Flexbox做了一些阉割，以用来适应移动端的布局方式。

关于完整的Flexbox布局教程，可以参考阮一峰的Flex 布局教程：语法篇。

3. ReactNative中Flexbox常用的几个属性

容器属性
flexDirection、justifyContent、alignItems、flexWrap
元素属性
alignSelf、flex、position

本文只介绍重点的几个属性，其他类似marginLeft、padding等，无论你之前是做网页开发，还是做原生开发，应该都非常熟悉，所以这里不做过多说明，大家稍微尝试看一下效果就知道了。另外，更多属性支持请查看官方文档。

在我们介绍这些属性之前，有一个概念，需要跟大家讲解下，那就是主轴和交叉轴。上面的多数属性和这个概念有直接关系，起初学习Flexbox可能比较困惑，有可能就是没理解清楚这个概念。

主轴和交叉轴是由flexDirection这个属性来决定的，让我们首先来看下flexDirection

flexDirection：这个属性决定了子View排列的方向，类似Android中LinearLayout的orientation属性，它有两个值：
row：横向排列，主轴为水平方向，交叉轴为垂直方向；
column：竖直排列，主轴为垂直方向，交叉轴为水平方向。
其中，默认值是column。

flexDirection.png

justifyContent：设置子布局在主轴方向位置

justifyContent.png

alignItems：设置子布局在交叉轴方向位置

alignItems.png

flexWrap：水平或垂直布局时：如果子View放不下，则自动换行, 默认为'nowrap'(不换行)

flexWrap.png

alignSelf：设置子布局在交叉轴方向位置

alignSelf.png

flex：权重，类似Android中weight

flex.png

position：定位模式，分为absolute和relative两种
absolute：绝对定位，相对于原点（左上角）

<Text style={{
  fontSize: 20,
  textAlign: 'center',
  backgroundColor: '#0000FF',
  color: '#FFFFFF',
  position: 'absolute',
  left: 100,
  top: 100
  }}>
  B
</Text>

absolute.png

relative：相对定位，相对于当前位置

<Text style={{
  fontSize: 20,
  textAlign: 'center',
  backgroundColor: '#0000FF',
  color: '#FFFFFF',
  position: 'relative',
  left: 100,
  top: 100
  }}>
  B
</Text>

relative.png