setState後の新しいアニメーション - 反応したネイティブ

反応したネイティブのアプリで私の問題の答えが見つかりません。setState後の新しいアニメーション - 反応したネイティブ

あなたは私が何をしようとしている:)

素晴らしいことだそれを達成するためにどのようなアイデアを持っている場合は、次のページで

、私はどこかに押したときに、私がしたいですプレス位置にアニメーション（例えば、四角形の出現）を表示する。

達成したこと： クリックすると、正方形が表示され、正しい位置にアニメーションが表示されます。しかし、どこか別の場所をクリックすると、四角形の位置は変わりますが、アニメーションは再開しません。私が試してみました何

：プレス位置に：

をアニメーションを行うために、私は（「絶対」位置で）<ビュー/>を配置します。

は、この/>は、私は私のアプリで1時間を呼び出すコンポーネントに埋め込まれ<ビューがレンダリング：item.xとitem.yがある

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

座標です。

この私のコンポーネントのコードされています

{_children：：アレイ（2）、_value：2、それぞれが2つのログをクリックするために

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

にconsole.log componentDidUpdateでは、私を与えます。 .. _animation：ヌル...}

{_children：アレイ（2）、_value：0、...、_animation：ヌル...}

私は本当に次に何をすべきか分かりません。

PS：NativeScriptの方が簡単でした。新しいコンポーネントをDOMに追加するだけでした。

出典

2017-08-05 Wandrille