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

Перечисление FlexDirection задает главную ось контейнера View. Значение пишут в ключе flexDirection объекта стиля. Объект собирают через класс StyleSheet.

Синтаксис

flexDirection: 'row'

Значения

Значение	Описание
`'column'`	Дочерние элементы встают столбцом, сверху вниз.
`'row'`	Дочерние элементы встают в ряд. При письме слева направо это слева направо.
`'column-reverse'`	Дочерние элементы встают столбцом в обратном порядке, снизу вверх.
`'row-reverse'`	Дочерние элементы встают в ряд в обратном порядке.

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

Пример

Давайте поставим два текста в один ряд:

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

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

const styles = StyleSheet.create({
	row: {
		flexDirection: 'row',
	},
});

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

Пример

Давайте развернем столбец через 'column-reverse':

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

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

const styles = StyleSheet.create({
	col: {
		flexDirection: 'column-reverse',
	},
});

На экране второй текст окажется выше первого.

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

перечисление JustifyContent,
которое распределяет элементы вдоль главной оси
перечисление AlignItems,
которое выравнивает элементы поперёк главной оси
компонент View,
который держит дочерние элементы
класс StyleSheet,
который собирает объект стиля