ReactNative中使用Flexbox布局

  |     |   本文总阅读量:

【基础篇】ReactNative中使用Flexbox布局

Flexbox布局简单介绍

Flexbox布局常用的属性

Flexbox布局参考文章


Flexbox布局简单介绍

  • flex 属性决定元素在主轴上如何 填满 整个可用区域;整个区域会根据每个元素设置的flex属性被分割成多个部分
  • 在 ReactNative 中使用 Flexbox 规则来指定某个组件的子元素布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构
  • 一般情况下, 我们只需要使用 flexDirectionalignItemsjustifyContent 这三个样式属性就可以满足大部分布局的需求
  • 除了一些例外,Flexbox在ReactNative中的工作方式与Web CSS中的工作方式相同。默认值不同,flexDirection 默认为 column 而不是 row,而flex参数仅支持单个数字。

Flexbox布局常用的属性

Flex Direction

flexDirection 控制节点的子级布局方向, 也称为主轴横轴是与主轴垂直的轴,或者是布局包装线的轴

  • row: 从左到右对齐子元素,如果启用了换行,则下一行将从容器左侧第一行的下方开始
  • column: 是flexDirection的默认值。从上到下对齐子元素,如果启用了换行,则下一行将从容器顶部左边的第一行开始
  • row-reverse: 从右向左对齐子元素,如果启用了换行,则下一行将从容器右侧的第一行开始
  • column-reverse: 从下向上对齐子元素,如果启用了换行,则下一行将从容器底部的第一行开始
Layout Direction

布局方向指定层次结构中子元素和文本的布局方向, 布局方向也会影响边的起点和终点, 默认情况下, ReactNative使用 LTR 布局方向进行布局;此模式下, 开始指的是左侧, 结束指的是右侧

  • LTR: 默认的布局方式,文本和子元素从左向右排列。应用于元素开始的边距和填充在左侧
  • RTL: 文本和子元素从右向左排列。应用于元素开始的边距和填充在右侧
Justify Content

jsutifyContent 描述的是如何在子容器的主轴内对齐子元素,它有以下几种取值:

  • flex-start: 默认值,将容器的子元素与容器主轴的起点对齐
  • flex-end: 将容器的子元素与容器主轴的末端对齐
  • center: 将容器的子元素与容器主轴的中心对齐
  • space-between: 子元素在容器主轴上的空间均匀,在子元素之间分配剩余空间
  • space-around: 子元素在容器主轴上的空间均匀,将剩余空间分布在子元素的周围。相较于间隔,space-around 会导致空间分配到第一个子元素的开始和最后一个子元素的结束
  • space-evenly: 沿主轴均匀的分布在对齐容器内,每一对相邻元素之间的边距,主开始边缘和第一个元素以及主结束边缘和最后一个元素都完全相同
Align Items

alignItems 描述如何沿着子容器的横轴对齐子元素,align属性与justifyContent非常相似,但是alignItems应用于交叉轴,而不是应用于主轴;其取值如下:

  • stretch: 默认值,拉伸容器的子元素以使其与容器的横轴高度匹配
  • flex-start: 将容器的子元素与容器横轴的起点对齐
  • flex-end: 将容器的子元素与容器的末端对齐
  • center: 将容器的子元素与容器的横轴中心对齐
  • baseline: 将容器的子元素沿着共同的基线对齐,可以将单个子元素设置为其父元素的参考基准

    为了使伸展效果发挥作用, 子元素不得沿着辅助轴固定尺寸

Align Self

alignSelf 具有与 alignItems 相同的选项和效果,但是您可以对单个子元素应用此属性来更改其父元素中的对齐方式,而不用影响容器中的子级;其取值与alignItems一致

Align Content

alignContent 定义沿着横轴的线分布,这仅在使用 flexWrap 将项目包装到多行时才有效;其取值如下:

  • flex-start: 默认值, 将换行的线与容器横轴的起点对齐
  • flex-end: 将包裹的线对齐到容器横轴的末端
  • stretch: 换行以匹配容器横轴的高度
  • center: 将包装线对齐到容器横轴的中心
  • space-between: 沿着容器的主轴线均匀的缠绕线,在线之间分配剩余空间
  • space-around: 沿着容器的主轴线均匀的包裹线,在线周围分配剩余空间。与使用空格之间的空间相比, 周围的空间将导致空间分配到第一行的开头和最后一行的结尾
Flex Wrap

flexWrap 属性在容器上设置,并控制当元素沿着主轴一处容器大小时发生的情况。默认情况下,自己被强制为一行(可以收缩元素)。如果允许包装,则根据需要将项目沿着主轴包装成多行

换行时,可以使用 alignContent 指定行在容器中的放置方式

Flex Basis, Grow, and Shrink
  • flexGrow: 描述了容器中的任何空间应如何沿着主轴在子容器之间分配。放置其子项后,容器将根据其子元素指定的 flex grow的值分配所有剩余空间

flexGrow接收任何大于等于零的浮点数,默认值为 0,容器将在子元素之间分配剩余空间,该剩余空间将根据子元素的弹性增长值来加权

  • flexShrink: 描述了在子元素的总大小溢出容器在主轴上的大小情况下如何沿着主轴收缩子元素。flexShrinkflexGrow 是非常相似的,如果溢出大小被视为负的剩余空间,则可以使用相同的方式来考虑。通过允许子元素根据需要伸展或收缩,这两个属性也可以很好的协同工作

flexShrink接收任何大于等于0的浮点值,默认值为1,容器将根据子元素的 flex 收缩值对子元素进行收缩

  • flexBasis: 它是一种与轴无关的方式,用于沿着主轴提供项目的默认大小。如果子元素的父级是带有 flexDirection: row 的容器,则设置子项的 flex 基础类似于设置子元素的宽度; 如果子元素的父级是带有 flexDirection: column 的容器,则设置子元素的高度
Width and Height

Yoga 中的 width 属性指定元素内容区域的宽度。同样,height 属性指定元素内容区域的高度。

宽度和高度都可以采用以下值:

  • auto: 默认值,ReactNative根据元素的内容(无论是其他子元素,文本还是图像)计算元素的宽高
  • pixels: 它以绝对像素定义宽度/高度。根据组件上设置的其他样式,这可能是节点的最终尺寸,也可能不是
  • percentage: 它定义宽度和高度,分别为其父元素的宽度额高度的百分比
Absolute & Relative Layout

元素的位置类型定义了元素在其父元素中的位置。

  • relative: 默认值,默认情况下,元素的相对位置。这意味着元素将根据布局的正常流程进行定位,然后根据上、右、下、左的值相对于该位置偏移。偏移量不会影响任何统计元素偶父元素的位置
  • absolute: 当绝对放置时,元素不会参与正常的布局流程。相反,它的布局与兄弟姐妹无关,根据顶部、右侧、底部和左侧的值确定位置

参考文章

如果学习完以上内容, 还不能对Flexbox有一个比较清晰的理解, 可以参考 阮一峰 老师的这两篇文章

Flex 布局教程:语法篇

Flex 布局教程:实例篇


赏作者一颗糖吧, 您的支持将鼓励我继续创作!



文章目录
  1. 1. 【基础篇】ReactNative中使用Flexbox布局
    1. 1.0.1. Flexbox布局简单介绍
    2. 1.0.2. Flexbox布局常用的属性
      1. 1.0.2.0.1. Flex Direction
      2. 1.0.2.0.2. Layout Direction
      3. 1.0.2.0.3. Justify Content
      4. 1.0.2.0.4. Align Items
      5. 1.0.2.0.5. Align Self
      6. 1.0.2.0.6. Align Content
      7. 1.0.2.0.7. Flex Wrap
      8. 1.0.2.0.8. Flex Basis, Grow, and Shrink
      9. 1.0.2.0.9. Width and Height
      10. 1.0.2.0.10. Absolute & Relative Layout
  2. 1.0.3. 参考文章
您是第 位小伙伴 | 本站总访问量 | 已经写了 22.6k 字啦

载入天数...载入时分秒...