Метод compose

Метод compose класса StyleSheet принимает два стиля и возвращает массив для параметра style. Если один из аргументов null или undefined, второй передают без изменений. Второй стиль перекрывает ключи первого так же, как при массиве в style.

Синтаксис

const res = StyleSheet.compose(a, b);

Параметры

Параметр	Описание
`a`	Первый стиль: объект, зарегистрированный стиль или пустое значение.
`b`	Второй стиль, который перекрывает совпадающие ключи первого.

Пример

Давайте наложим акцент поверх базового стиля:

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

export default function App() {
	return (
		<View style={StyleSheet.compose(styles.base, styles.bold)}>
			<Text>abcde</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	base: {
		padding: 8,
	},
	bold: {
		padding: 16,
	},
});

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

Пример

Давайте передам null вместо второго стиля:

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
	only: {
		margin: 4,
	},
});

const res = StyleSheet.compose(styles.only, null);

В style останется только первый стиль без лишних элементов массива.

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

класс StyleSheet,
который собирает объект стиля
метод create,
который регистрирует объект стилей
метод flatten,
который сливает массив стилей
компонент View,
который принимает параметр style