Перечисление FlexWrap

Перечисление FlexWrap управляет переносом дочерних элементов View на новую линию, когда места вдоль главной оси не хватает. Значение пишут в ключе flexWrap объекта стиля. При переносе имеет смысл ключ AlignContent.

Синтаксис

flexWrap: 'wrap'

Значения

Значение	Описание
`'nowrap'`	Все элементы остаются на одной линии, при нехватке места они сжимаются.
`'wrap'`	Элементы переносятся на следующую линию по главной оси.
`'wrap-reverse'`	Перенос на новую линию в обратном порядке линий.

Значение по умолчанию: 'nowrap'.

Пример

Давайте перенесем широкие элементы на вторую линию:

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View style={styles.row}>
			<Text style={styles.item}>abcde</Text>
			<Text style={styles.item}>12345</Text>
			<Text style={styles.item}>abcde</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	row: {
		flexDirection: 'row',
		flexWrap: 'wrap',
	},
	item: {
		width: '50%',
	},
});

На экране третий элемент уйдет на следующую строку под первыми двумя.

Пример

Давайте оставим все элементы на одной линии:

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View style={styles.row}>
			<Text style={styles.item}>abcde</Text>
			<Text style={styles.item}>12345</Text>
			<Text style={styles.item}>abcde</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	row: {
		flexDirection: 'row',
		flexWrap: 'nowrap',
	},
	item: {
		width: 120,
	},
});

На экране все три блока останутся в одном ряду и могут сжаться по ширине.

Смотрите также

перечисление AlignContent,
которое выравнивает перенесенные линии
перечисление FlexDirection,
которое задает направление главной оси
перечисление JustifyContent,
которое распределяет элементы вдоль оси
компонент View,
который держит дочерние элементы