Класс InteractionManager

Класс InteractionManager не рисует элементы на экране. Метод runAfterInteractions ставит функцию в очередь после завершения текущих взаимодействий. Так снижают рывки при тяжёлой работе сразу после нажатия или перехода.

Синтаксис

import { InteractionManager } from 'react-native';

InteractionManager.runAfterInteractions(() => {});

Методы

Метод	Описание
`runAfterInteractions`	Выполняет задачу, когда закончились жесты и анимация.

Пример

Давайте отложим запись в состояние после нажатия:

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

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

	const onPress = () => {
		InteractionManager.runAfterInteractions(() => {
			setLabel('12345');
		});
	};

	return (
		<View>
			<Pressable onPress={onPress}>
				<Text>{label}</Text>
			</Pressable>
		</View>
	);
}

На экране сначала 'abcde', после нажатия и завершения анимации - '12345'.

Пример

Давайте запустим тяжёлую функцию без блокировки перехода:

import { InteractionManager } from 'react-native';

InteractionManager.runAfterInteractions(() => {
	console.log('abcde');
});

Строка попадёт в консоль, когда интерфейс освободится от жестов.

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

метод runAfterInteractions,
который ставит задачу в очередь
класс AppState,
который сообщает, активно ли приложение
класс Animated,
который запускает анимацию свойств
компонент FlatList,
который строит длинный список