RN中布局方式FlexBox、absolute

FlexBox 布局基本用法

1、什么是FlexBox

Flexbox是Flexible Box的缩写，意为'弹性布局'，它为盒状模型提供了很大的灵活性，让任何一个容器都可以指定为Flex布局

任何一个容器都可以指定为Flex布局

2、基本概念和属性

使用Flex布局的元素，称为Flex容器（flex Container），简称'容器'。它的所有子元素自动成为容器的成员，称为Flex项目（flex Item）

先了解下标准的盒子模型：

下面主要讲解Flex的Container属性 和 Item属性

下面给出一张FlexBox布局的示例图：

从上面的示例图中可以看出，Flex容器默认存在两根轴：水平方向的主轴(main axis)，与主轴垂直方向的交叉轴(cross axis)。主轴的排布方向是从左至右，交叉轴的排布方向是从上至下，Flex容器中的Item元素默认是按照主轴方向进行排序，Item占据主轴空间称为main size，Item占据交叉轴空间称为cross size

3、Flex容器(Container)属性

• felxDirection
• justfyContent
• alignItems
• alignContent
• flexWrap

flexDirection （flex方向，控制item的主轴排列方向）

• row（主轴水平排列）
• column(主轴竖直排列)
• row-reverse（主轴水平从右开始排列）
• column-reverse（主轴竖直从下排列）

row的时候 水平为主轴，竖直为次轴；column时竖直为主轴，水平为次轴。

justfyContent （主轴方向的对齐方式（以主轴‘row’为例））

• flex-start起始位置对齐（左对齐）
• flex-end结束位置对齐（右对齐）
• center中心对齐（水平居中）
• space-between两端对齐，item之间间距平分
• space-around每个项目两端的间隔相等

alignItems（控制item在次轴上的排列方式，主要属性包括：（以主轴‘row’为例））

• flex-start：次轴起点开始（在竖直向上居顶显示）
• flex-end：次轴终点开始（在竖直向上居低显示）
• center：次轴中间开始（在竖直方向上居中显示）
• stretch：如果项目未设置高度或设为auto，将占满整个容器的高度
• baseline：第一行文字的基线对齐。

alignContent （控制多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。以主轴‘row’为例）

• flex-start：（默认值）与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• center：与交叉轴的中点对齐
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
• space-around：每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍
• stretch：轴线占满整个交叉轴

flexWrap（默认情况下，容器中的Item元素都排列在一条主轴线上，flex-wrap属性定义了如果在一条轴线上排列不下所有的Item元素，可以进行换行排列）

• nowrap：不换行，为默认效果
• wrap：换行，依次往后排
• wrap-reverse：换行，从后往前排

nowrap不换行，为默认效果

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方

 

alignSelf （属性允许单个Item有与其他Item不一样的对齐方式，设置在子元素上可覆盖父元素alignItems的属性。默认值为auto，表示继承父元素的alignItems属性，如果没有父元素，则等同于stretch）

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

扩展:RN布局层级问题（zIndex，elevation）

一、zIndex是rn在0.30开始支持的属性，是可以生效的；
二、shadow（阴影）开头的样式现在可以在iOS上应用，但在安卓中是不生效的，而Android上对应的属性是elevation。设置elevation属性就等价于使用原生的elevation API，因而也有同样的限制（比如最明显的就是需要Android 5.0以上版本）。此外还会影响到层叠视图在空间z轴上的顺序。

结论

对于Android，两个同一层级的定位组件（position：“absolute”）
1、 既没有ZIndex属性，又没有elevation 属性时，在z轴的层叠关系由其摆放位置决定的，放在下面的组件会在上层；
2、 两个组件只有zIndex没有elevation属性时，zIndex大的在上层
3、 两个组件有elevation属性时，elevation大的在上层
4、 两个组件既有zIndex属性elevation属性时，以elevation为准

对于IOS，同层级的组件，z轴的层叠关系只与摆放顺序与zIndex有关，与elevation无关

原文地址

参考文章

RN布局中遇到的层级问题（zIndex，elevation）

RN 中的 position 的理解