在React Native中使用弹性布局(flexbox)

 在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。


 React Native中的Flexbox的工作原理和web上的CSS基本一致,但也存在少许差异。它们的默认值不同:flexDirection的默认值是column而不是row,而 flex也只能指定一个数字值。


  React Native中 使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求


 指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列 


  指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢?亦或应该均匀分布?对应的这些可选项   有:flex-start(与交叉轴的起点对齐)、center(与交叉轴的中点对齐)、flex-end(与交叉轴的终点对齐)、space-around(每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。以及space-between(与交叉轴两端对齐,轴线之间的间隔平均分布)。


指定alignItems可以决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式。对应的这些可选项有:flex-start、center、flex-end、stretch(默认值,如果项目未设置高度或设为auto,将占满整个容器的高度)、baseline(项目的第一行文字的基线对齐)。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容