反应原生弯曲方向答案

【问题标题】：react native flex direction反应原生弯曲方向
【发布时间】：2020-08-14 04:58:06
【问题描述】：

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

Row1
Row2
Row3

和类似的列

column1  | column2 | column3

但是为什么在使用flexDirection: 'column' 时在本机反应中将框的/文本定义为

flexcolumn1
flexcolumn2
flexcolumn3

当使用flexDirection: 'row' 时，框的/文本被定义为

flexrow1  | flexrow2 | flexrow3

我觉得这很奇怪而且很困惑……这只是 React Native 的标准差异还是背后有不同的概念？

【问题讨论】：

【解决方案1】：

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

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

the docs 是这样说的：

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

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

【讨论】：

【解决方案2】：

我认为是这样的：

column1_cell1
column1_cell2
column1_cell3

row1_cell1, row1_cell2, row1_cell3

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

【讨论】：

【解决方案3】：

来自docs：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：