Reactive Native Abbrechen Animationsverzögerung, wenn Komponente unmount

Question

Ich habe ein kleines Problem mit einer Animation. Ich versuche eine Flash-Leiste Info in meiner App für die Fehler zu machen. Um dies zu tun, erstelle ich eine neue Komponente, diese Komponente kann in einer bestimmten Ansicht platziert werden oder nicht, und wenn der Fehler von meinem Speicher ausgelöst wird, wird der Status meiner Komponente durch componentWillReceiveProps geändert und auf sichtbar gesetzt, wenn eine Fehlermeldung angezeigt wird .

Also, wenn es nicht eine Fehlermeldung falsch Wert Funktion Rückkehr macht meint aber, wenn es eine Fehlermeldung, die ich meine Run-Funktion mit dieser Animation Code machen:

// 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 
}); 

Wenn ich auf meiner Sicht bleiben Während der Animationsverzögerung funktioniert das einwandfrei, aber wenn ich zu meiner vorherigen Ansicht gehe, wenn die Nachricht auf sichtbar gesetzt ist, wird die Funktion setState aufgerufen, wenn meine Komponente nicht geladen ist. Also habe ich diesen waring:

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. 

Es ist ein normales Verhalten, da die Komponente an dieser Stelle nicht angebracht ist. Also versuche ich eine Möglichkeit zu finden, meine Animationssequenz abzubrechen, wenn die Komponente unmount wird.

Während meiner Forschung, die ich durch die Verwendung setTimeout() Funktion mit clearTimeout einen temporären Weg finden, wann die Komponente aushang, aber ich kann nicht finden, wie mit Animated.delay Funktion in einem Animated.sequence das zu tun, ist es möglich?

Im Voraus vielen Dank für Ihre Antworten!

TLDR;

Es ist möglich, eine Animationsverzögerung abzubrechen, wenn die Komponente unmounten wird?

Answer 1

Die Funktion, die Sie Animated.start() geben, wird mit einem Objekt aufgerufen, das angibt, ob die Animation erfolgreich bis zum Ende ausgeführt wurde. React-Native beendet außerdem implizit die Animation, wenn die Komponente deaktiviert ist. Überprüfen Sie daher die finished -Eigenschaft in Ihrem Rückruf und nur setState, wenn die Animation bis zum Ende ausgeführt wurde.

dies sollte also funktionieren:

... 

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

(. Beachten Sie, wenn Sie manuell die Animation stoppen, zB mit Animated.stop() oder einem anderen Animation mit den gleichen Animated.Value starten, die finished -property wird dann false auch sein)

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