6

通常在 excel 表中..我们有如下行

Row1
Row2
Row3

和像这样的列

column1  | column2 | column3

但是为什么在使用flexDirection: 'column'框的/文本时反应原生被定义为

flexcolumn1
flexcolumn2
flexcolumn3

并且在使用flexDirection: 'row'框的/文本时定义为

flexrow1  | flexrow2 | flexrow3

我觉得这很奇怪而且很困惑......这只是反应原生的标准差异还是这背后有不同的概念?

4

5 回答 5

2

我认为您正确地指出行是相互堆叠的:

Row 1
Row 2
Row 3

并且这些列并排设置:

Column 1 | Column 2 | Column 3

这里要理解的是什么flexDirection意思。我们把它放在一个容器上。如果我们将它设置为row,我们并不是说容器的每个子容器都是它自己的行。如果我们是你,你会说事情应该这样布置:

Row 1
Row 2
Row 3

我们说容器本身将成为一行,容器内的子项将成为该行中的元素

Row 1 Item 1 | Row 1 Item 2 | Row 1 Item 3

以下是文档的措辞:

flexDirection 控制节点子节点的布局方向。这也称为主轴。

它并没有说它设置节点的子节点本身是否是行/列,而是说它们将流动的方向。也许horizontal并且vertical会是更好的名字。

于 2020-02-28T23:04:40.177 回答
1

我认为它的意思是这样的:

column1_cell1
column1_cell2
column1_cell3

row1_cell1, row1_cell2, row1_cell3

在第一个示例中,所有“弹性单元格”都在一列中,在另一列中,它们都在一行中。

于 2017-04-12T09:10:43.167 回答
1

文档

Flexbox 在 React Native 中的工作方式与在 Web 上的 CSS 中的工作方式相同,但有一些例外。默认值不同,flexDirection 默认为列而不是行,并且 flex 参数仅支持单个数字。

于 2017-06-07T09:08:01.773 回答
0

只是一个小技巧。在列中,元素从上到下(或从下到上)显示,这是弹性盒的默认对齐方式。flexDirection: 'row': 表示您从左到右显示元素形式(或从右到左,无论您是否使用行反转)

于 2017-05-08T18:27:48.947 回答
0

它更多地与 Flexbox 布局规范有关。https://www.w3.org/TR/css-flexbox-1/#flex-direction-property

将其视为一个容器,以及项目如何在容器内放置/流动。如果方向是行,则其中的项目沿水平方向流动。如果方向是列,则其中的项目沿垂直方向流动。

于 2017-04-12T09:06:47.120 回答