React Native-Animated.spring未被调用

问题描述

我想要的输出： 当我单击卡时，它被翻转，并将isValidated设置为true。当我第二次单击时，它会翻转回到其原始位置。

我不明白为什么我需要两次触发onPressCard才能翻转卡片。

控制台输出也确实很奇怪：

“ rotationValue 0”，按1次

再次按下

'rotationValue3 0 rotationValue 0'

这是代码：

    
interface RotativeCardProps {
  card: RotativeCardType,index: number
}

const Rotative = ({ card,index }: RotativeCardProps) => {
  const [isValidated,setIsValidated] = useState<boolean>(false);
  let rotationValue = 0;
  const animatedValue = new Animated.Value(0);
  animatedValue.addListener(({ value }) => { rotationValue = value; });

  const onPressCard = () => {
    if (!isValidated) { setIsValidated(true); }
    flipCard();
  };

  const flipCard = () => {
    console.log('rotationValue',rotationValue);

    if (rotationValue > 89) {
      console.log('rotationValue2',rotationValue);
      Animated.spring(animatedValue,{
        tovalue: 0,friction: 8,tension: 10,useNativeDriver: true,}).start();
    } else {
      console.log('rotationValue3',{
        tovalue: 180,}).start();
    }
  };

  const frontInterpolate = animatedValue.interpolate({ inputRange: [0,180],outputRange: ['0deg','180deg'] });
  const backInterpolate = animatedValue.interpolate({ inputRange: [0,outputRange: ['180deg','360deg'] });
  const frontAnimatedStyle = { transform: [{ rotateY: frontInterpolate }] };
  const backAnimatedStyle = { transform: [{ rotateY: backInterpolate }] };

```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）