react-native - 每当道具发生变化时，如何重置 react-native-animatable 中的动画？

Question

我想重置动画并随着道具的变化重播，但它一开始只能工作一次。我使用了react-native-animatable npm 库，但找不到重置动画的解决方案。

这是我的动画代码。

import * as Animatable from 'react-native-animatable';

function ResetAnimation (changeAnimation) {
   const zoomAnimation = {
    0: {
      scale: 1
    },
    0.5: {
      scale: 2
    },
    1: {
      scale: 1
    }
  };
  return (
    <View>
       <Animatable.View animation = {zoomAnimation}>
         <View>
          // At first it works well but next no animation.
          .......
         </View>
       </Animatable.View>
    </View>
 );
}

帮我。

Answer 1

您可以将动画定义为状态：

construstor(props){
  super(props)
  this.state = {
     zoomAnimation = {
    0: {
      scale: 1
    },
    0.5: {
      scale: 2
    },
    1: {
      scale: 1
    }
  }
   }
}

// then use it in the view
<Animatable.View animation = {this.state.zoomAnimation}>
         <View>
          // At first it works well but next no animation.
          .......
         </View>
       </Animatable.View>

// when you want reset it, you call this.setState,
this.setState({
zoomAnimation = {
    0: {
      scale: 1
    },
    0.5: {
      scale: 2
    },
    1: {
      scale: 1
    }
  }

})