Layout Props¶

Пример¶

Следующий пример показывает, как различные свойства могут влиять на макет React Native. Например, можно попробовать добавить или убрать квадраты из пользовательского интерфейса, изменяя значения свойства flexWrap.

Свойства¶

alignContent¶

alignContent управляет выравниванием строк в поперечном направлении, переопределяя alignContent родителя. Подробнее см. align-content.

alignItems¶

alignItems выравнивает дочерние элементы в поперечном направлении. Например, если дочерние элементы перетекают по вертикали, alignItems управляет тем, как они выравниваются по горизонтали. Работает подобно align-items в CSS (по умолчанию: stretch). Подробнее см. align-items.

alignSelf¶

alignSelf управляет выравниванием дочернего элемента в поперечном направлении, переопределяя alignItems родительского элемента. Работает аналогично align-self в CSS (по умолчанию: auto). Подробнее см. align-self.

aspectRatio¶

Соотношение сторон управляет размером неопределенного измерения узла. Более подробная информация приведена на сайте aspect-ratio.

• Для узла с заданной шириной/высотой соотношение сторон управляет размером неопределенного измерения
• В узле с заданным базисом flex соотношение сторон контролирует размер узла по поперечной оси, если он не задан.
• В узле с функцией измерения соотношение сторон работает так, как будто функция измерения измеряет гибкую основу
• В узле с функцией flex grow/shrink соотношение сторон управляет размером узла по поперечной оси, если оно не задано.
• Соотношение сторон учитывает минимальные/максимальные размеры

borderBottomWidth¶

borderBottomWidth работает так же, как border-bottom-width в CSS. Подробнее см. border-bottom-width.

borderEndWidth¶

Если направление равно ltr, то borderEndWidth эквивалентно borderRightWidth. Если направление rtl, то borderEndWidth эквивалентна borderLeftWidth.

borderLeftWidth¶

borderLeftWidth работает так же, как border-left-width в CSS. Подробнее см. border-left-width.

borderRightWidth¶

borderRightWidth работает так же, как border-right-width в CSS. Подробнее см. border-right-width.

borderStartWidth¶

Если направление равно ltr, то borderStartWidth эквивалентна borderLeftWidth. Если направление rtl, то borderStartWidth эквивалентна borderRightWidth.

borderTopWidth¶

borderTopWidth работает так же, как border-top-width в CSS. Подробнее см. border-top-width.

borderWidth¶

borderWidth работает так же, как border-width в CSS. Подробности см. на сайте border-width.

bottom¶

bottom - это количество логических пикселей для смещения нижнего края данного компонента.

Работает аналогично bottom в CSS, но в React Native необходимо использовать точки или проценты. Эмы и другие единицы измерения не поддерживаются.

Подробнее о том, как bottom влияет на верстку, см. bottom.

columnGap¶

columnGap работает аналогично column-gap в CSS. В React Native поддерживаются только пиксельные единицы измерения. Подробнее см. column-gap.

direction¶

direction задает направленность потока пользовательского интерфейса. По умолчанию используется inherit, за исключением корневого узла, который будет иметь значение, основанное на текущей локали.

Направление раскладки задает направление, в котором должны располагаться дочерние элементы и текст в иерархии. Направление компоновки также влияет на то, к какому краю относятся start и end. По умолчанию Yoga выстраивается с направлением раскладки LTR. В этом режиме start ссылается на left, а end - на right. При локализации приложений для рынков с языками RTL необходимо настроить этот режим, передав направление в вызов CalculateLayout или задав направление в корневом узле.

ltr (По-умолчанию)

Текст и дочерние элементы размещаются слева направо. Отступы и поля, применяемые к началу элемента, применяются с левой стороны.

rtl

Текст и дочерние элементы располагаются справа налево. Отступы и поля, наложенные на начало элемента, применяются с правой стороны.

display¶

display задает тип отображения данного компонента.

Он работает аналогично display в CSS, но поддерживает только 'flex' и 'none'. По умолчанию используется 'flex'.

end¶

Когда направление равно ltr, end эквивалентно right. Когда направление равно rtl, end эквивалентен left.

Этот стиль имеет приоритет над стилями left и right.

flex¶

В React Native flex работает не так, как в CSS. flex - это число, а не строка, и оно работает в соответствии с механизмом верстки Yoga.

Если flex - положительное число, то это делает компонент гибким, и его размер будет пропорционален значению flex. Так, компонент с flex, равным 2, займет в два раза больше места, чем компонент с flex, равным 1. flex: <положительное число> эквивалентно flexGrow: <положительное число>, flexShrink: 1, flexBasis: 0.

Когда flex равен 0, компонент имеет размеры width и height и является негибким.

Когда flex равен -1, компонент нормально размещается в соответствии с width и height. Однако если места недостаточно, компонент уменьшится до своих minWidth и minHeight.

Функции flexGrow, flexShrink и flexBasis работают так же, как и в CSS.

flexBasis¶

flexBasis - это независимый от оси способ задать размер элемента по умолчанию вдоль главной оси. Установка flexBasis дочернего элемента аналогична установке ширины этого элемента, если его родитель является контейнером с flexDirection: row, или установке высоты дочернего элемента, если его родитель является контейнером с flexDirection: column. Значение flexBasis элемента - это размер элемента по умолчанию, размер элемента до выполнения любых вычислений flexGrow и flexShrink.

flexDirection¶

flexDirection управляет тем, в каких направлениях движутся дочерние элементы контейнера. row идет слева направо, column - сверху вниз, и вы, возможно, догадываетесь, что делают два других. Это работает так же, как flex-direction в CSS, только по умолчанию используется column. Подробнее см. flex-direction.

flexGrow¶

Функция flexGrow описывает, как пространство внутри контейнера должно быть распределено между его дочерними элементами вдоль главной оси. После размещения своих дочерних элементов контейнер распределяет оставшееся пространство в соответствии со значениями flex grow, указанными его дочерними элементами.

flexGrow принимает любое значение с плавающей точкой >= 0, по умолчанию используется значение 0. Контейнер будет распределять оставшееся пространство между своими дочерними элементами с учетом значений flexGrow дочерних элементов.

flexShrink¶

flexShrink описывает, как уменьшать дочерние элементы вдоль главной оси в случае, когда суммарный размер дочерних элементов превышает размер контейнера на главной оси. Свойство flexShrink очень похоже на flexGrow и может рассматриваться аналогичным образом, если любой переполненный размер рассматривается как отрицательное оставшееся пространство. Эти два свойства также хорошо работают вместе, позволяя дочерним элементам увеличиваться и уменьшаться по мере необходимости.

flexShrink принимает любое значение с плавающей точкой >= 0, причем по умолчанию используется значение 0. Контейнер будет сжимать своих дочерних элементов, взвешивая значения flexShrink дочерних элементов.

flexWrap¶

flexWrap управляет тем, могут ли дочерние элементы обернуться после того, как они попадут в конец гибкого контейнера. Работает аналогично flex-wrap в CSS (по умолчанию: nowrap). Более подробную информацию см. на сайте flex-wrap. Обратите внимание, что он больше не работает с alignItems: stretch (по умолчанию), поэтому вы можете использовать, например, alignItems: flex-start (подробности изменения).

gap¶

gap работает аналогично gap в CSS. В React Native поддерживаются только пиксельные единицы измерения. Подробнее см. gap.

height¶

height задает высоту данного компонента.

Работает аналогично height в CSS, но в React Native необходимо использовать пункты или проценты. Эмы и другие единицы измерения не поддерживаются. Подробнее см. height.

justifyContent¶

justifyContent выравнивает дочерние элементы по основному направлению. Например, если дочерние элементы перетекают по вертикали, justifyContent управляет тем, как они выравниваются по вертикали. Работает подобно justify-content в CSS (по умолчанию: flex-start). Подробнее см. justify-content.

left¶

left - это количество логических пикселей для смещения левого края данного компонента.

Работает аналогично left в CSS, но в React Native необходимо использовать точки или проценты. Эмы и другие единицы измерения не поддерживаются.

Подробнее о том, как left влияет на верстку, см. left.

margin¶

Установка margin имеет тот же эффект, что и установка каждого из marginTop, marginLeft, marginBottom и marginRight. Подробнее см. margin.

marginBottom¶

marginBottom работает подобно margin-bottom в CSS. Подробнее см. margin-bottom.

marginEnd¶

Если направление равно ltr, то marginEnd эквивалентно marginRight. Если направление rtl, то marginEnd эквивалентно marginLeft.

marginHorizontal¶

Установка marginHorizontal имеет тот же эффект, что и установка marginLeft и marginRight.

marginLeft¶

marginLeft работает подобно margin-left в CSS. Подробнее см. margin-left.

marginRight¶

marginRight работает так же, как margin-right в CSS. Подробнее см. margin-right.

marginStart¶

Если направление равно ltr, то marginStart эквивалентно marginLeft. Если направление rtl, то marginStart эквивалентно marginRight.

marginTop¶

marginTop работает так же, как margin-top в CSS. Подробности см. на сайте margin-top.

marginVertical¶

Установка marginVertical имеет тот же эффект, что и установка marginTop и marginBottom.

maxHeight¶

maxHeight - это максимальная высота для данного компонента в логических пикселях.

Работает аналогично max-height в CSS, но в React Native необходимо использовать точки или проценты. Эмы и другие единицы измерения не поддерживаются.

Подробнее см. max-height.

maxWidth¶

maxWidth - это максимальная ширина данного компонента в логических пикселях.

Работает аналогично max-width в CSS, но в React Native необходимо использовать точки или проценты. Эмы и другие единицы измерения не поддерживаются.

Подробнее см. max-width.

minHeight¶

minHeight - это минимальная высота для данного компонента в логических пикселях.

Работает аналогично min-height в CSS, но в React Native необходимо использовать точки или проценты. Эмы и другие единицы измерения не поддерживаются.

Более подробную информацию см. на сайте min-height.

minWidth¶

minWidth - это минимальная ширина данного компонента в логических пикселях.

Работает аналогично min-width в CSS, но в React Native необходимо использовать точки или проценты. Эмы и другие единицы измерения не поддерживаются.

Подробнее см. min-width.

overflow¶

overflow управляет тем, как измеряются и отображаются дочерние элементы. overflow: hidden заставляет виды обрезаться, а overflow: scroll заставляет виды измеряться независимо от главной оси их родителей. Работает аналогично overflow в CSS (по умолчанию: visible). Подробнее см. overflow.

padding¶

Установка padding имеет тот же эффект, что и установка каждого из paddingTop, paddingBottom, paddingLeft и paddingRight. Подробнее см. padding.

paddingBottom¶

paddingBottom работает подобно padding-bottom в CSS. Подробнее см. padding-bottom.

paddingEnd¶

Если направление равно ltr, то paddingEnd эквивалентно paddingRight. Если направление rtl, то paddingEnd эквивалентно paddingLeft.

paddingHorizontal¶

Установка paddingHorizontal аналогична установке обоих paddingLeft и paddingRight.

paddingLeft¶

paddingLeft работает подобно padding-left в CSS. Подробнее см. padding-left.

paddingRight¶

paddingRight работает так же, как padding-right в CSS. Подробнее см. padding-right.

paddingStart¶

Если направление равно ltr, то paddingStart эквивалентно paddingLeft. Если направление rtl, то paddingStart эквивалентно paddingRight.

paddingTop¶

paddingTop работает так же, как padding-top в CSS. Подробнее см. padding-top.

paddingVertical¶

Установка paddingVertical аналогична установке paddingTop и paddingBottom.

position¶

position в React Native аналогичен обычному CSS, но по умолчанию все имеет значение relative, поэтому позиционирование absolute всегда относительно родителя.

Если вы хотите позиционировать дочерний элемент с помощью определенного количества логических пикселей относительно родителя, задайте для него absolute position.

Если требуется позиционировать дочерний компонент относительно чего-то, что не является его родителем, не используйте для этого стили. Используйте дерево компонентов.

Тип 'position' элемента определяет, как он позиционируется внутри своего родителя.

relative По-умолчанию

По умолчанию элемент позиционируется относительно. Это означает, что элемент позиционируется в соответствии с нормальным течением макета, а затем смещается относительно этой позиции на основе значений top, right, bottom и left. Смещение не влияет на положение дочерних или родительских элементов.

absolute

При абсолютном позиционировании элемент не участвует в обычном потоке верстки. Вместо этого он размещается независимо от своих братьев и сестер. Позиция определяется на основе значений top, right, bottom и left.

Значения позиций top, right, bottom и left ведут себя по-разному в зависимости от позиции элемента. Для relative элемента они смещают позицию элемента в указанном направлении. Для absolute элемента эти свойства задают смещение стороны элемента относительно той же стороны на родителе.

right¶

right - это количество логических пикселей для смещения правого края данного компонента.

Работает аналогично right в CSS, но в React Native необходимо использовать точки или проценты. Эмы и другие единицы измерения не поддерживаются.

Подробнее о том, как right влияет на верстку, см. right.

rowGap¶

rowGap работает аналогично row-gap в CSS. В React Native поддерживаются только пиксельные единицы измерения. Подробнее см. row-gap.

start¶

Когда направление равно ltr, start эквивалентно left. Если направление rtl, то start эквивалентен right.

Этот стиль имеет приоритет над стилями left, right и end.

top¶

top - это количество логических пикселей для смещения верхнего края данного компонента.

Работает аналогично top в CSS, но в React Native необходимо использовать точки или проценты. Эмы и другие единицы измерения не поддерживаются.

Подробнее о том, как top влияет на верстку, см. top.

width¶

width задает ширину данного компонента.

Он работает аналогично width в CSS, но в React Native необходимо использовать пункты или проценты. Эмы и другие единицы измерения не поддерживаются. Подробнее см. width.

zIndex¶

zIndex управляет тем, какие компоненты отображаются поверх других. Обычно zIndex не используется. Компоненты отображаются в соответствии с их порядком в дереве документа, поэтому более поздние компоненты рисуются поверх более ранних. Использование zIndex может быть полезно, если у вас есть анимация или пользовательские модальные интерфейсы, где такое поведение нежелательно.

Оно работает подобно свойству CSS z-index - компоненты с большим zIndex будут отрисовываться сверху. Считайте, что направление z направлено от телефона к вашему глазному яблоку. Более подробную информацию см. на сайте z-index.

В iOS для корректной работы zIndex может потребоваться, чтобы View были братьями и сестрами друг друга.

Комментарии