Animated.spring 功能组件中的 onPress 不工作？

Question

我要创建一个动画运行通过点击一个按钮，我通过 Animated.timing 顺利地完成了这个并且没有任何问题但是当我尝试运行动画通过 Animated.spring 它只是运行一次，下次点击不起作用我怎样才能解决这个问题？ Animated.spring 在函数式组件中是否流畅？这是我的代码

const BoxShape = () => {
  const jumpValue = new Animated.Value(0);
  const ActiveAnim = () => {
    Animated.spring(jumpValue, {
      toValue: 1,
      friction: 1,
    }).start();
  }

  return (
    <View>
      <Animated.Image
        style={{ transform: [{ scale: jumpValue }], width: 120, height: 120, marginBottom: 30 }}
        source={require('.././images/ball.png')}
      >
      </Animated.Image>
      <Button
        title='Active Ball'
        onPress={ActiveAnim}
      />
    </View>
  )
}

Answer 1

这是正常行为，因为您将第一个运行的值更新为 1，但从未将其重置为 0，以便动画再次运行。

我建议您在每个运行之后将值重置为 0，方法是在您的代码中添加下面的代码片段 :p :

const ActiveAnim = () => {
    Animated.spring(jumpValue, {
      toValue: 1,
      friction: 1,
    }).start(() => jumpValue.setValue(0));
  };

start() 接受一个函数作为参数，该函数将在动画结束后调用， https://facebook.github.io/react-native/docs/animated#configuring-animations

Animated.spring 功能组件中的 onPress 不工作？

Animated.spring in functional components doesn't work with onPress?

animation

react-native

react-animated

react-functional-component