Метод flatten

Метод flatten класса StyleSheet принимает массив стилей или один стиль. На выходе возвращает один плоский объект правил. Поздние элементы массива перекрывают ранние ключи.

Синтаксис

const res = StyleSheet.flatten(массив);

Параметры

Параметр	Описание
`массив`	Массив объектов стиля, зарегистрированных стилей или `null`. Допускается передать один объект вместо массива.

Пример

Давайте сольем базовый стиль и переопределение:

import { StyleSheet } from 'react-native';

const base = { padding: 8 };
const extra = { padding: 16, margin: 4 };

const res = StyleSheet.flatten([base, extra]);

Результат выполнения кода:

{ padding: 16, margin: 4 }

Пример

Давайте соберем стиль для View из массива и условного элемента:

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

export default function App() {
	const active = true;
	return (
		<View style={StyleSheet.flatten([styles.box, active && styles.active])}>
			<Text>abcde</Text>
		</View>
	);
}

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

На экране контейнер получит оба набора правил, а при active полупрозрачность перекроет базовый вид.

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

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