Компонент ImageBackground

Компонент ImageBackground совмещает фон и содержимое в одном блоке. Картинка лежит позади дочерних элементов. Источник задают source, как у Image. Параметр style задает размер контейнера. Параметр imageStyle стилизует сам bitmap. Вписывание фона настраивают resizeMode из ResizeMode.

Синтаксис

<ImageBackground source={{ uri: 'https://example.com/a.png' }}>
	<Text>abcde</Text>
</ImageBackground>

Параметры

Параметр	Описание
`source`	Источник фоновой картинки: uri или `require`.
`style`	Стиль контейнера: ширина, высота и отступы блока.
`imageStyle`	Стиль, который применяют к самой картинке фона.
`children`	Дочерние элементы поверх фона.
`resizeMode`	Как вписать фон в контейнер. Строка из перечисления `ResizeMode`.

Пример

Давайте положим текст поверх сетевой картинки:

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

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

const styles = StyleSheet.create({
	wrap: {
		width: 200,
		height: 120,
		justifyContent: 'center',
	},
	label: {
		textAlign: 'center',
	},
});

На экране блок с фоном и подписью 'abcde' по центру.

Пример

Давайте сдвинем фон через imageStyle, а рамку оставим в style:

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

export default function App() {
	return (
		<ImageBackground
			source={{ uri: 'https://example.com/a.png' }}
			style={styles.wrap}
			imageStyle={styles.bg}
			resizeMode="contain"
		>
			<Text>12345</Text>
		</ImageBackground>
	);
}

const styles = StyleSheet.create({
	wrap: {
		width: 160,
		height: 160,
		padding: 8,
	},
	bg: {
		opacity: 0.8,
	},
});

На экране контейнер с отступом, полупрозрачный фон и текст '12345' сверху.

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

компонент Image,
который рисует только картинку без фона
перечисление ResizeMode,
которое задает вписывание фона
компонент Text,
который рисует строку поверх фона
класс StyleSheet,
который собирает объект стиля