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