react-native - 反应原生弯曲方向

Question

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

Row1
Row2
Row3

和像这样的列

column1  | column2 | column3

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

flexcolumn1
flexcolumn2
flexcolumn3

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

flexrow1  | flexrow2 | flexrow3

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

score 2 · Accepted Answer

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

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会是更好的名字。

score 1 · Accepted Answer

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

column1_cell1
column1_cell2
column1_cell3

row1_cell1, row1_cell2, row1_cell3

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

5 回答 5