Компонент View

Компонент View держит дочерние элементы и раскладывает их по правилам flexbox. Дочерние элементы пишут между открывающим и закрывающим тегом. Направление, отступы и размер задает параметр style. По умолчанию элементы встают столбцом и растягиваются по ширине родителя.

Синтаксис

<View>
	child1
	child2
</View>

Параметры

Параметр	Описание
`children`	Дочерние элементы. На экран они попадают в том порядке, в каком записаны.
`style`	Объект стиля: направление ряда, отступы и размер. Объект собирают через класс `StyleSheet`. Направление берется из перечисления `FlexDirection`.
`onLayout`	Вызов в момент, когда известны ширина и высота контейнера.
`pointerEvents`	Куда попадает касание по контейнеру и дочерним элементам. Строка из перечисления `PointerEvents`.
`accessibilityLabel`	Подпись для чтения с экрана, если у элемента нет видимого текста.
`accessibilityRole`	Роль элемента для чтения с экрана. Значение берется из перечисления `AccessibilityRole`.
`accessibilityState`	Состояние для чтения с экрана: выбран, отключен, раскрыт.

Ключи стиля

Ключи ниже пишут внутри объекта style, а не отдельными параметрами View. Ключ flex задает, как элемент делит свободное место вдоль главной оси. Ключи flexGrow, flexShrink и flexBasis уточняют рост, сжатие и базовый размер.

Ключи margin и padding ставят внешний и внутренний отступ. Их можно задать одним числом или по сторонам через marginTop и похожие ключи. Ключ gap задает расстояние между соседними дочерними элементами в контейнере.

Ключи width и height задают ширину и высоту. Ключи minWidth, maxWidth, minHeight и maxHeight ограничивают размер. При position 'absolute' ключи top, left, right и bottom привязывают элемент к краям родителя. Ключ transform сдвигает, поворачивает или масштабирует элемент.

Давайте зададим отступы, размер и долю места у двух блоков в ряду:

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

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

const styles = StyleSheet.create({
	wrap: {
		flexDirection: 'row',
		padding: 8,
		gap: 8,
	},
	boxA: {
		flex: 1,
		marginRight: 4,
		minHeight: 40,
	},
	boxB: {
		flex: 2,
		width: 120,
		maxWidth: 200,
	},
});

На экране оба блока встанут в ряд с зазором между ними. Первый займет меньшую долю ширины, второй растянется сильнее.

Пример

Давайте поставим два текста столбцом:

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

export default function App() {
	return (
		<View>
			<Text>abcde</Text>
			<Text>12345</Text>
		</View>
	);
}

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

Пример

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

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',
	},
});

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

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

компонент SafeAreaView,
который отступает от системных панелей
класс StyleSheet,
который собирает объект стиля
перечисление FlexDirection,
которое задает направление ряда
компонент Text,
который рисует строку или абзац