Класс StyleSheet

Класс StyleSheet собирает объект стиля для View и других компонентов с параметром style. Метод create регистрирует именованные стили. Именованные значения absoluteFill, absoluteFillObject и hairlineWidth подходят для типовых задач раскладки.

Синтаксис

const styles = StyleSheet.create({
	box: {
		padding: 8,
	},
});

Значения

Значение	Описание
`absoluteFill`	Зарегистрированный стиль на весь родитель: абсолютное позиционирование и нулевые отступы от всех сторон.
`absoluteFillObject`	Обычный объект `{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }` без регистрации через `create`.
`hairlineWidth`	Толщина линии в один физический пиксель на текущем экране.

Методы

Метод	Описание
`create`	Регистрирует объект стилей и возвращает ссылки на них.
`flatten`	Сливает массив стилей в один объект.
`compose`	Складывает два стиля; аргумент `null` игнорируется.

Пример

Давайте зарегистрируем стиль контейнера:

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

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

const styles = StyleSheet.create({
	box: {
		padding: 12,
	},
});

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

Пример

Давайте растянем слой на весь родитель через absoluteFill:

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

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

const styles = StyleSheet.create({
	root: {
		height: 120,
	},
});

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

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

метод create,
который регистрирует объект стилей
метод flatten,
который сливает массив стилей
компонент View,
который держит дочерние элементы
перечисление FlexDirection,
которое задает направление ряда