每当道具改变时，如何在 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
    }
  }

})

每当道具改变时，如何在 react-native-animatable 中重置动画？

How can I reset the animation in react-native-animatable whenever props change?

react-native

expo

react-props

react-native-animatable