在一台onPress上按顺序运行功能

Question

我已经编写了一张翻转卡片动画，在一个onPress事件中定义了两个函数，我希望当有人单击按钮时，只有一个函数运行，而另一个函数仅在下次单击时运行（每个函数在当前代码中）单击这两个功能都运行，实际上我希望在当前代码中，每次单击卡翻转360度时，每次单击仅出现前卡或后卡，并且您只能看到字体卡） 我怎样才能做到这一点？ 这是我的代码：

const FlipFunc = () => {
  const FlipValue = new Animated.Value(0);
  const FlipValue2 = new Animated.Value(0);

  const ActivateAnimation = () => {
    FlipValue.setValue(0);

    Animated.timing(FlipValue, {
      toValue: 1,
      duration: 800
    }).start();
  };

  const ActivateAnimation2 = () => {
    FlipValue2.setValue(0);

    Animated.timing(FlipValue2, {
      toValue: 1,
      duration: 800
    }).start();
  };

  const FirstFlip = FlipValue.interpolate({
    inputRange: [0, 1],
    outputRange: ["0deg", "180deg"]
  });

  const SecondFlip = FlipValue2.interpolate({
    inputRange: [0, 1],
    outputRange: ["180deg", "360deg"]
  });

  return (
    <View style={{ alignItems: "center" }}>
      <Animated.View
        style={{ ...styles.back, transform: [{ rotateY: SecondFlip }] }}
      >
        <Text style={{ color: "white" }}>Text Back Flip</Text>
      </Animated.View>

      <Animated.View
        style={{ ...styles.front, transform: [{ rotateY: FirstFlip }] }}
      >
        <Text style={{ color: "white" }}>Text Front Flip</Text>
      </Animated.View>

      <TouchableHighlight
        style={styles.button}
        onPress={() => {
          ActivateAnimation;
          ActivateAnimation2;
        }}
      >
        <Text style={{ color: "white", textAlign: "center" }}>Flip</Text>
      </TouchableHighlight>
    </View>
  );
};

export default FlipFunc;