Ich finde keine Antwort auf mein Problem für meine native App reagieren.Neue Animation nach setState - React Native
Wenn Sie eine Idee haben, wie das zu erreichen, das wäre toll :)
Was ich versuche zu tun:
In einer Seite, wenn ich irgendwo drücken, ich möchte Zeigen Sie eine Animation (z. B. eine quadratische Erscheinung) auf der Druckposition an.
Was ich erreicht habe: Wenn ich klicke, wird ein Quadrat mit einer Animation an der richtigen Position angezeigt. Aber wenn ich irgendwo anders klicke, ändert sich die Position des Quadrats, aber die Animation wird nicht neu gestartet.
Was ich versucht habe:
die Animation zu tun, lege ich eine < Ansicht /> (mit Position: 'absolut') an der Pressposition.
Diese < Ansicht /> in einer Komponente eingebettet ist, dass ich 1 Mal in meinem App rufen machen:
<ClickAnimation x={item.x} y={item.y}/>
wo item.x und item.y sind die Koordinaten.
Dies ist der Code meiner Komponente:
import React from 'react';
import {Animated, View} from 'react-native';
export default class ClickAnimation extends React.Component {
state = {
scaleAnim: new Animated.Value(0)
};
componentWillMount() {
Animated
.timing(this.state.scaleAnim, {
toValue: 2,
duration: 500
})
.start();
}
componentWillUpdate(nextProps) {
if (nextProps.x != this.props.x && nextProps.y != this.props.y) {
this.setState({
scaleAnim: new Animated.Value(0)
})
}
}
componentDidUpdate() {
console.log("componentDidUpdate",this.state.scaleAnim)
Animated
.timing(this.state.scaleAnim, {
toValue: 2,
duration: 500
})
.start();
}
render() {
return (<Animated.View
style={{
position: "absolute",
top: this.props.y,
left: this.props.x,
width: 50,
height: 50,
backgroundColor: "red",
transform: [
{
scaleY: this.state.scaleAnim
}, {
scaleX: this.state.scaleAnim
}, {
translateX: -25
}, {
translateY: -25
}
]
}}/>);
}
}
Die console.log in componentDidUpdate mir geben für jede 2-Protokolle klicken:
{_children: Array (2), _value: 2,. .., _animation: null ...}
{_children: Array (2), _value: 0, ..., _animation: null ...}
ich weiß wirklich nicht, was als nächstes zu tun ist.
PS: In NativeScript war das einfacher. Ich musste nur die neue Komponente zum DOM hinzufügen.
Ich habe mit componentWillReceiveProps versucht, aber das ändert nicht das Ergebnis. Eine console.log in componentWillReceiveProps zeigt mir, dass der Status die Daten korrekt erhält. – Wandrille
Versuchen Sie einfach, die Dauer von 500 auf 5000 ms zu erhöhen und überprüfen Sie, was passiert –
Ende, das funktioniert. Die zweite Klick-Animation wird angezeigt. Aber die Animation funktioniert nicht gut. Es gibt keinen Übergang. Ich weiß nicht, ob das ein Problem mit EXPO oder ein Problem mit de-Code ist. – Wandrille