反应本机弯曲方向

时间:2017-04-12 08:55:29

标签: react-native flex-direction react-flexbox-grid

一般在excel表中..我们有如下行

Row1
Row2
Row3

之类的列
column1  | column2 | column3

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

flexcolumn1
flexcolumn2
flexcolumn3

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

flexrow1  | flexrow2 | flexrow3

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

5 个答案:

答案 0 :(得分:1)

我认为这意味着:

ActivityCompat.requestPermissions(this,
            new String[]{Manifest.permission.WRITE_EXTERNAL_STORAGE},1);

在第一个例子中,所有" flex cell"在一列中,在另一列中,它们都在一行中。

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

来自docs

  

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

答案 4 :(得分:0)

我认为您是正确的,指出行彼此叠放:

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控制节点的子代的方向 布置。这也称为主轴。

这并不是说它设置节点的子节点本身是否是行/列,而是说它们将以什么方向流动。也许horizontalvertical会是更好的名字。