Перечисление Display

Перечисление Display задает ключ display в стиле View и других компонентов. Значение 'none' убирает элемент из раскладки, не оставляя для него места.

Синтаксис

display: 'none'

Значения

Значение	Описание
`'flex'`	Элемент участвует в flex-раскладке как обычно.
`'none'`	Элемент не показывается и не занимает места в контейнере.

Пример

Давайте скроем второй текст из ряда:

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

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

const styles = StyleSheet.create({
	row: {
		flexDirection: 'row',
	},
	hidden: {
		display: 'none',
	},
});

На экране останется только первый текст, второй не займет места в ряду.

Пример

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

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

export default function App() {
	const showExtra = false;
	return (
		<View>
			<Text>abcde</Text>
			<View style={showExtra ? styles.show : styles.hide}>
				<Text>12345</Text>
			</View>
		</View>
	);
}

const styles = StyleSheet.create({
	show: {
		display: 'flex',
	},
	hide: {
		display: 'none',
	},
});

На экране при showExtra равном false нижний блок исчезнет из раскладки.

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

компонент View,
который держит дочерние элементы
перечисление Position,
которое ставит элемент в поток или поверх него
перечисление Overflow,
которое обрезает содержимое за границей
перечисление FlexDirection,
которое задает направление ряда