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

Перечисление ResizeMode задает масштаб bitmap у компонентов Image и ImageBackground. Строку значения передают в параметр resizeMode.

Синтаксис

resizeMode="cover"

Значения

Значение	Описание
`'cover'`	Масштаб с сохранением пропорций, рамка заполнена целиком. Лишнее по краям обрезается.
`'contain'`	Вся картинка видна внутри рамки, возможны поля по краям.
`'stretch'`	Растягивает bitmap на всю ширину и высоту без сохранения пропорций.
`'repeat'`	Повторяет плитку, пока не заполнит область.
`'center'`	Картинка по центру в исходном размере, без масштабирования.

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

Пример

Давайте обрежем фон режимом 'cover':

import { Image, StyleSheet } from 'react-native';

export default function App() {
	return (
		<Image
			source={{ uri: 'https://example.com/a.png' }}
			style={styles.pic}
			resizeMode="cover"
		/>
	);
}

const styles = StyleSheet.create({
	pic: {
		width: 100,
		height: 60,
	},
});

На экране узкая рамка полностью залита картинкой, края файла могут быть срезаны.

Пример

Давайте покажем файл целиком через 'contain':

import { Image, StyleSheet } from 'react-native';

export default function App() {
	return (
		<Image
			source={{ uri: 'https://example.com/a.png' }}
			style={styles.pic}
			resizeMode="contain"
		/>
	);
}

const styles = StyleSheet.create({
	pic: {
		width: 100,
		height: 100,
		backgroundColor: '#eee',
	},
});

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

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

перечисление ResizeMethod,
которое задает уменьшение большой картинки на Android
компонент Image,
который рисует картинку на экране
компонент ImageBackground,
который кладет картинку фоном
компонент View,
который задает размер контейнера