setState之后的新动画 - React Native

我对我的反应本机应用程序没有找到问题的答案。setState之后的新动画 - React Native

如果你有一个想法如何做到这一点，那将是巨大的:)

我想要做的事：

在一个页面，当我按下某个地方，我想在新闻媒介的位置上显示一个动画（例如一个正方形的幻影）。

我所取得的成就： 当我点击，一个正方形是显示与正确的位置上的动画。但是，当我点击其他地方，广场的位置改变，但动画不会重新启动。

我曾尝试：

做动画，我把一个<查看/>（与位置：“绝对”）在印刷机上的位置。

这<查看/>在我称之为1次在我的应用程序组件包埋渲染：

<ClickAnimation x={item.x} y={item.y}/>

其中item.x和item.y是有坐标。

这是我的组件的代码：

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

在componentDidUpdate中的console.log给我的每次点击2日志：

{_children：阵列（2），_value：2。 ..，_animation：空...}

{_children：阵列（2），_value：0，...，_animation：空...}

我真的不知道下一步该怎么做。

PS：在NativeScript中，这更简单。我只需将新组件添加到DOM。

来源

2017-08-05 Wandrille