Компонент Animated.View

Компонент Animated.View ведет себя как View, но в style можно передать Value и результат interpolate. Остальные параметры совпадают с обычным контейнером.

Синтаксис

<Animated.View style={{ opacity: fade }}>
	...
</Animated.View>

Параметры

Параметр	Описание
`style`	Объект стиля с числами или анимируемыми значениями. Полный список ключей смотрите у `View`.
`children`	Дочерние элементы внутри контейнера.

Пример

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

import { useEffect, useRef } from 'react';
import { Animated, Text } from 'react-native';

export default function App() {
	const opacity = useRef(new Animated.Value(0)).current;

	useEffect(() => {
		Animated.timing(opacity, {
			toValue: 1,
			duration: 400,
			useNativeDriver: true,
		}).start();
	}, [opacity]);

	return (
		<Animated.View style={{ opacity, padding: 12, backgroundColor: '#ddeeff' }}>
			<Text>abcde</Text>
		</Animated.View>
	);
}

На экране блок с текстом проявляется из прозрачного состояния.

Пример

Давайте сожмем блок по оси Y:

import { useEffect, useRef } from 'react';
import { Animated, View, Text } from 'react-native';

export default function App() {
	const scaleY = useRef(new Animated.Value(0)).current;

	useEffect(() => {
		Animated.spring(scaleY, {
			toValue: 1,
			useNativeDriver: true,
		}).start();
	}, [scaleY]);

	return (
		<Animated.View style={{ transform: [{ scaleY }] }}>
			<View style={{ padding: 8, backgroundColor: '#eeddcc' }}>
				<Text>12345</Text>
			</View>
		</Animated.View>
	);
}

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

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

компонент View,
без поддержки Animated.Value в style
класс Animated,
который создает этот компонент
компонент Animated.Text,
который анимирует строку
метод createAnimatedComponent,
который делает такую обертку для своего компонента