Компонент ActivityIndicator

Компонент ActivityIndicator показывает системный спиннер. Параметр animating включает и выключает вращение. Размер задают через size и перечисление IndicatorSize. На Android в size можно передать число в пикселях, но в перечислении описаны только 'small' и 'large'. Цвет меняют параметром color.

Синтаксис

<ActivityIndicator animating size="small" color="#336699" />

Параметры

Параметр	Описание
`animating`	При значении `true` индикатор крутится, при `false` скрывается.
`size`	`'small'` или `'large'` из `IndicatorSize`. На Android допустимо число в пикселях.
`color`	Цвет спиннера в формате строки, например `'#336699'`.

Пример

Давайте покажем индикатор, пока данные не готовы:

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

export default function App() {
	const loading = true;

	return (
		<View>
			{loading ? (
				<ActivityIndicator animating size="large" color="#112233" />
			) : (
				<Text>abcde</Text>
			)}
		</View>
	);
}

На экране крутится крупный индикатор темного цвета вместо текста.

Пример

Давайте поставим маленький спиннер рядом с подписью:

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

export default function App() {
	return (
		<View style={styles.row}>
			<ActivityIndicator animating size="small" color="#cc6633" />
			<Text>12345</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	row: {
		flexDirection: 'row',
		alignItems: 'center',
		gap: 8,
	},
});

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

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

перечисление IndicatorSize,
которое задает размер спиннера
компонент StatusBar,
который меняет системную полосу
компонент View,
который держит индикатор и текст
компонент RefreshControl,
который показывает загрузку при обновлении списка