作为一名RN初学者(连菜鸟都算不上),在学习RN的过程中对一些知识点做一些记录,顺便加上一些自己的理解。如有说错之处,还望指出。谢谢!!!
介绍
Flexbox
指的是一个模块,包括容器(flex容器)上的属性以及容器子元素(flex项目)上的属性。
React Native中使用Flexbox
来指定某个组件子元素的布局,可以自动调整,计算元素在容器空间中的大小。从而在不同屏幕尺寸上提供一致的布局结构。
使用
本文主要以每种属性的使用,及其所对应的效果的方式来说明。这里主要对 flexDirection
、justifyContent
、alignItems
、flexWrap
、alignSelf
、flex
等进行介绍。
轴
在使用前,先了解下水平轴和竖直轴的概念,直接看图就好了。
详细用法
下面将对Flexbos
中常用到的一些属性进行讲解
flexDirection(容器属性)
flexDirection
——决定布局的主轴(与主轴相垂直的为次轴)
取值:
-
column
(默认):竖直排列(上 -> 下) -
column-reverse
:竖直排列(下 -> 上) -
row
:水平排列(左 -> 右) -
row-reverse
:水平排列(右 -> 左)
代码如下:(省略部分代码,请忽略代码的粗糙)
效果:
justifyContent(容器属性)
justifyContent
——决定其子元素沿着主轴的排列方式
代码:
取值:
-
flex-start
(默认):位于容器的开头;
-
center
:位于容器的中心;
-
flex-end
:位于容器的结尾;
-
space-around
:位于各行之前、之间、之后都留有空白的容器内;
-
space-between
:位于各行之间留有空白的容器内。
alignItems(容器属性)
alignItems
——决定其子元素沿着次轴(与主轴垂直的轴)的排列方式
代码:
取值:
-
flex-start
(默认):位于容器的开头;
-
center
:位于容器的中心;
-
flex-end
:位于容器的结尾;
-
stretch
:项目被拉伸以适应容器。
flexWrap(容器属性)
flexWrap
——控制换行(如果子View
放不下,则自动换行)
代码:
取值:
-
nowrap
(默认):不自动换行
可以从图中看到,超过的部分被裁剪了。
-
wrap
:自动换行
alignSelf(子元素属性)
alignSelf
——设置子布局在交叉轴方向位置
代码:
取值:
auto
(默认):如果有父元素,就为元素的父元素的align-items的值,否则为stretchcenter
:位于容器的中心;flex-start
:位于容器的开头;flex-end
:位于容器的结尾;stretch
:项目被拉伸以适应容器。
效果:
flex(子元素属性)
flex
——权重,分配主轴上剩余的空间(类似Android中weight)
直接看例子
默认图:
-
例1:
效果:
-
例2
效果:
(持续更新中...)
参考链接
React Native 中文网
一个完整的Flexbox指南
[React Native]弹性布局Flexbox
以上有错误之处,感谢指出