想要创建一张翻转卡，但它会赢得翻转

Question

我正在尝试创建一张简单的翻转卡，但是当我按翻转它不会，从 https://www.youtube.com/watch?v=ghlum0anok4 。

当我单击“翻盖”按钮时，什么都没有发生，甚至没有错误消息

是代码

const [isFlipped, setIsFlipped] = useState(false);
  const animate = useRef(new Animated.Value(0));
  const frontRef = useRef();
  const backRef = useRef();

  const doAFlip = () => {
    Animated.timing(animate.current, {
      duration: 300,
      toValue: isFlipped ? 0 : 180,
      useNativeDriver: true,
    }).start(() => {
      
      setIsFlipped(!isFlipped);
    });
  };

  const interpolateFront = animate.current.interpolate({
    inputRange: [0, 180],
    outputRange: ['0deg', '180deg'],
  });

  const interpolateBack = animate.current.interpolate({
    inputRange: [0, 180],
    outputRange: [ '180deg', '360deg'],
  });

  const rotateFront = {
    transform: [
      {
        rotateY: interpolateFront,
      },
    ],
  };

  const rotateBack = {
    transform: [
      {
        rotateY: interpolateBack,
      },
    ],
  };

和这里

<View>
        <Animated.View style={[rotateFront], {backfaceVisibility: 'hidden'}}>
          <View style={{backgroundColor: 'green', height: 60, width: 60}}/>

        </Animated.View>
        <Animated.View style={[rotateBack], {backfaceVisibility: 'hidden', position: 'absolute', top: 0}}>
        <View style={{backgroundColor: 'blue', height: 60, width: 60}}/>
          
        </Animated.View>
        <Button title='Flip' onPress={doAFlip}>Flip</Button>
      </View>````