Класс LayoutAnimation

Класс LayoutAnimation задает анимацию следующего изменения раскладки. Перед обновлением состояния вызывают configureNext с пресетом из LayoutAnimation.Presets. Подходит, когда элементы появляются, исчезают или меняют высоту без ручного Value.

Синтаксис

import { LayoutAnimation } from 'react-native';

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

Значения

Значение	Описание
`easeInEaseOut`	Плавное ускорение и замедление, пресет `LayoutAnimation.Presets.easeInEaseOut`.
`linear`	Равномерная смена раскладки, пресет `LayoutAnimation.Presets.linear`.
`spring`	Легкий пружинный эффект, пресет `LayoutAnimation.Presets.spring`.

Методы

Метод	Описание
`configureNext`	Задает анимацию для ближайшего изменения дерева компонентов.

Пример

Давайте плавно покажем второй блок через easeInEaseOut:

import { useState } from 'react';
import { LayoutAnimation, View, Text, Pressable } from 'react-native';

export default function App() {
	const [open, setOpen] = useState(false);

	const toggle = () => {
		LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
		setOpen((v) => !v);
	};

	return (
		<View>
			<Pressable onPress={toggle}>
				<Text>abcde</Text>
			</Pressable>
			{open ? (
				<View style={{ padding: 12, backgroundColor: '#ddeeff' }}>
					<Text>12345</Text>
				</View>
			) : null}
		</View>
	);
}

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

Пример

Давайте добавим пункт списка с пресетом spring:

import { useState } from 'react';
import { LayoutAnimation, View, Text, Pressable } from 'react-native';

export default function App() {
	const [items, setItems] = useState(['abcde']);

	const add = () => {
		LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
		setItems((list) => [...list, '12345']);
	};

	return (
		<View>
			<Pressable onPress={add}>
				<Text>abcde</Text>
			</Pressable>
			{items.map((line) => (
				<Text key={line}>{line}</Text>
			))}
		</View>
	);
}

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

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

метод configureNext,
который включает анимацию раскладки
класс Animated,
который анимирует отдельные свойства style
компонент View,
чья раскладка меняется после configureNext
компонент Pressable,
который часто запускает смену состояния