Метод create

Метод create класса StyleSheet принимает объект, где ключ - имя стиля, а значение - правила раскладки. На выходе получают тот же набор имен с зарегистрированными стилями. Их передают в параметр style у View.

Синтаксис

const styles = StyleSheet.create(объект);

Параметры

Параметр	Описание
`объект`	Объект стилей: ключ - имя, значение - правила flexbox, отступов и размера.

Пример

Давайте зарегистрируем два имени стиля:

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

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

const styles = StyleSheet.create({
	row: {
		flexDirection: 'row',
		gap: 8,
	},
	label: {
		padding: 4,
	},
});

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

Пример

Давайте вынесем стили в константу и подключим один стиль к контейнеру:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
	center: {
		justifyContent: 'center',
		alignItems: 'center',
	},
});

export default styles;

В другом файле можно импортировать styles.center и передать его в View.

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

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