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

Перечисление Overflow задает ключ overflow в стиле View. Значение решает, видна ли часть дочерних элементов за пределами ширины и высоты контейнера.

Синтаксис

overflow: 'hidden'

Значения

Значение	Описание
`'visible'`	Содержимое может выходить за границы контейнера и остается видимым.
`'hidden'`	Часть содержимого за границей обрезается и не показывается.
`'scroll'`	За границей можно прокручивать содержимое, если платформа это поддерживает.

Значение по умолчанию: 'visible'.

Пример

Давайте обрежем текст, который не помещается по высоте:

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

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

const styles = StyleSheet.create({
	box: {
		height: 40,
		overflow: 'hidden',
	},
});

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

Пример

Давайте оставим содержимое видимым за границей:

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

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

const styles = StyleSheet.create({
	box: {
		width: 60,
		overflow: 'visible',
	},
	wide: {
		width: 120,
	},
});

На экране текст может выступать за узкий контейнер, если платформа рисует overflow.

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

компонент ScrollView,
который прокручивает длинное содержимое
перечисление Position,
которое выносит элемент из потока
перечисление Display,
которое скрывает элемент из раскладки
компонент View,
который задает размер контейнера