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

Компонент Animated.Text совпадает с Text, но в style можно передать Value. Так меняют прозрачность, размер шрифта и смещение подписи.

Синтаксис

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

Параметры

Параметр	Описание
`style`	Стиль текста с анимируемыми полями. Остальные ключи смотрите у `Text`.
`children`	Строка или вложенные элементы текста.

Пример

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

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

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

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

	return (
		<Animated.Text style={{ opacity, fontSize: 18 }}>
			abcde
		</Animated.Text>
	);
}

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

Пример

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

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

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

	useEffect(() => {
		Animated.timing(shift, {
			toValue: 0,
			duration: 350,
			useNativeDriver: true,
		}).start();
	}, [shift]);

	return (
		<View>
			<Animated.Text>12345</Animated.Text>
			<Animated.Text style={{ transform: [{ translateX: shift }] }}>
				abcde
			</Animated.Text>
		</View>
	);
}

На экране нижняя строка подъезжает к верхней.

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

компонент Text,
обычная строка без Animated
компонент Animated.View,
контейнер с тем же приемом style
метод timing,
который меняет opacity подписи
класс Easing,
который задает кривую для timing