天天看点

React Native入门教程 3 -- Flex布局

Flexbox

Flex布局意思为弹性布局,他使用起来非常的方便。

他主要有以下几种属性

flexDirection //设置主轴方向 flexWrap //设置是否换行 justifyContent //主轴对齐方式 alignItems //交叉轴对齐方式

我们将上一篇中的布局样式修改一下,来介绍flex布局的主要属性。

React Native入门教程 3 -- Flex布局

可以看到Text和Image是竖直排列的,下面将其改为水平排列,只需要在style添加一行

即可

React Native入门教程 3 -- Flex布局

如图所示,要决定主轴的方向(水平、垂直),可以按照如下设置

这个属性用于设置是否换行,默认为nowrap,即不换行,为了演示,将图片改小,添加多几个Text。

React Native入门教程 3 -- Flex布局

此时,添加flexWrap属性

React Native入门教程 3 -- Flex布局

发现已经成功换行。

如图所示,要决定是否换行,可以按照如下设置

这个属性用于视图在主轴上的对其方式,主要有如下几种

顺序效果如下:

React Native入门教程 3 -- Flex布局
React Native入门教程 3 -- Flex布局
React Native入门教程 3 -- Flex布局

注意仔细区分between和around的区别。

这个属性是指主轴的交叉轴的对其方式(X,Y轴对应),主要有以下几种

React Native入门教程 3 -- Flex布局
React Native入门教程 3 -- Flex布局

为了区分我给text加了背景 注意其细微的区别

React Native入门教程 3 -- Flex布局

到此,Flex的常用属性就已经介绍完毕了

下面我们设计以下布局,将文字放到海报的右方。因为整体水平排列,内部垂直排列,所以我们需要多加一个容器将两个Text包裹起来(Android对比LinearLayout嵌套)。修改之后的代码如下:

style如下

现在界面已经如下所示了:

React Native入门教程 3 -- Flex布局

嗯嗯 感觉不错。今天就到这里吧。