Реагировать на родное направление

Question

Вообще в листе Excel.. у нас есть строки, как показано ниже

Row1
Row2
Row3

и столбцы, как

column1  | column2 | column3

Но почему в реагировать родной при использовании flexDirection: 'column' поле / текст определены как

flexcolumn1
flexcolumn2
flexcolumn3

и при использовании flexDirection: 'row' поле / текст определены как

flexrow1  | flexrow2 | flexrow3

я нахожу это странным и запутывающимся... это просто стандартная разница в реакции нативного или за этим стоит другая концепция?

Answer 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

Вот как это написано в документации:

flexDirection контролирует направление, в котором размещаются дочерние элементы узла. Это также называется главной осью.

Он не говорит, что он устанавливает, являются ли дочерние элементы узла самими строками / столбцами, он говорит, в каком направлении они будут течь. Может бытьhorizontal а также vertical были бы лучшие имена.

Answer 2

Я думаю, что это подразумевается так:

column1_cell1
column1_cell2
column1_cell3

row1_cell1, row1_cell2, row1_cell3

В первом примере все "гибкие ячейки" находятся в одном столбце, в другом - все в одном ряду.

Answer 3

Из документов:

Flexbox работает в React Native так же, как и в CSS в Интернете, за некоторыми исключениями. Значения по умолчанию различаются: во FlexDirection по умолчанию используется столбец, а не строка, а параметр flex поддерживает только одно число.

Answer 4

Это больше связано со спецификацией макета Flexbox. https://www.w3.org/TR/css-flexbox-1/

Думайте об этом как о контейнере и о том, как предметы размещаются / перемещаются внутри контейнера. Если направление - строка, элементы внутри него текут в горизонтальном направлении. Если направление столбца, элементы внутри него текут в вертикальном направлении.

Answer 5

Просто маленький трюк. Внутри столбца элементы отображаются сверху вниз (или снизу вверх), и это выравнивание по умолчанию для гибкого блока. flexDirection: 'row': означает, что вы отображаете форму элемента слева направо (или справа налево, независимо от того, используете ли вы обратную строку или нет)