React Native отменяет задержку анимации при размонтировании компонента

У меня небольшая проблема с анимацией. Я пытаюсь сделать Flash Bar Info в своем приложении для ошибок. Итак, для этого я создаю новый компонент, этот компонент может быть размещен в одном конкретном представлении или нет, и когда ошибка возникает из моего хранилища, состояние моего компонента изменяется на componentWillReceiveProps и становится видимым, если есть сообщение об ошибке .

Итак, если нет сообщения об ошибке, моя функция рендеринга возвращает ложное значение, но если есть сообщение об ошибке, я запускаю свою функцию рендеринга с этим кодом анимации:

// Ease in ease out anitmation
Animated.sequence([
  Animated.timing(this.state.translateY, {
    toValue: 40,
    easing: Easing.bounce, // Like a ball
    duration: 450,
  }),
  Animated.delay(3000),
  Animated.timing(this.state.translateY, {
    toValue: 0,
    duration: 300,
  }),
]).start(() => {
  this.props.clearMessage();
  this.setState({ visible: false }); // <-- Problem is here
});

Если я остаюсь в своем представлении во время задержки анимации, это работает отлично, но если я перехожу к своему предыдущему представлению, когда сообщение установлено как видимое, функция setState вызывается, когда мой компонент не смонтирован. Итак, я получил это предупреждение:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

Это нормальное поведение, потому что на данный момент компонент не смонтирован. Итак, я пытаюсь найти способ отменить мою анимационную последовательность, когда компонент размонтируется.

Во время моих исследований я нашел временный способ, используя функцию setTimeout() с clearTimeout, когда компонент будет размонтирован, но я не могу найти, как это сделать с помощью функции Animated.delay в Animated.sequence, возможно ли это?

Заранее спасибо за ваши ответы!

TLDR;

Можно ли отменить задержку анимации при размонтировании компонента?


react-native animation delay settimeout
person Jérémy Magrin    schedule 21.03.2016    source источник
comment
В документах упоминается метод stopAnimation. Вы пробовали в него заглянуть? Это здесь.   -  person G. Hamaide    schedule 22.03.2016
comment
Спасибо, Hamaide, но да, я тоже пробовал, но функция stopAnimation не найдена для Animated.sequence.   -  person Jérémy Magrin    schedule 22.03.2016

Ответы (1)


arrow_upward
7
arrow_downward

Функция, которую вы передаете Animated.start(), вызывается с объектом, объявляющим, успешно ли завершилась анимация. React-Native также неявно отменяет вашу анимацию, если компонент размонтирован. Поэтому проверьте свойство finished в обратном вызове и только setState, если анимация дошла до конца.

Итак, это должно работать:

...

]).start((done) => {
  if (done.finished) {
    this.props.clearMessage();
    this.setState({ visible: false });
  }
});

(Обратите внимание, что если вы вручную остановите анимацию, используя, например, Animated.stop() или запустив другую анимацию с тем же Animated.Value, свойство finished также будет равно false.)

См.: https://facebook.github.io/react-native/docs/animated.html#working-with-animations

person mtkopone    schedule 04.10.2017