React Native实现Flip Card点击按钮无响应无法翻转问题

你的代码有三个核心问题导致点击按钮没有翻转效果：

• 样式传参写法错误：style={[rotateFront], {backfaceVisibility: 'hidden'}} 这种写法里，数组外的样式对象不会被React Native识别，相当于你写的backfaceVisibility、背面的绝对定位属性全部没生效，两个卡片面始终叠在一起，就算动画跑了也看不到效果。
• 插值和旋转样式定义位置不合理：你把插值逻辑写在了组件顶层，动画值变化触发重渲染时，样式不会跟着同步更新，动画驱动的样式变化根本没绑定到视图上。
• 状态更新时机有问题：你把setIsFlipped放在动画完成回调里，很容易出现闭包导致的状态值判断错误，连续点击的时候会出现动画方向错乱。

import React, { useRef, useState } from 'react';
import { View, Animated, Button } from 'react-native';

const FlipCard = () => {
  const [isFlipped, setIsFlipped] = useState(false);
  // 直接取ref的current值存动画实例，减少重复读取
  const animateValue = useRef(new Animated.Value(0)).current;

  const handleFlip = () => {
    const targetValue = isFlipped ? 0 : 180;
    // 先触发动画，再同步更新状态，避免闭包问题
    Animated.timing(animateValue, {
      duration: 300,
      toValue: targetValue,
      useNativeDriver: true,
    }).start();
    setIsFlipped(prev => !prev);
  };

  // 插值逻辑放在渲染逻辑里，动画值变化时会同步生成新的样式
  const frontAnimatedStyle = {
    transform: [{
      rotateY: animateValue.interpolate({
        inputRange: [0, 180],
        outputRange: ['0deg', '180deg'],
      })
    }],
    backfaceVisibility: 'hidden'
  };

  const backAnimatedStyle = {
    transform: [{
      rotateY: animateValue.interpolate({
        inputRange: [0, 180],
        outputRange: ['180deg', '360deg'],
      })
    }],
    backfaceVisibility: 'hidden',
    position: 'absolute',
    top: 0
  };

  return (
    <View>
      <View style={{position: 'relative', width: 60, height: 60}}>
        <Animated.View style={frontAnimatedStyle}>
          <View style={{backgroundColor: 'green', width: 60, height: 60}} />
        </Animated.View>
        <Animated.View style={backAnimatedStyle}>
          <View style={{backgroundColor: 'blue', width: 60, height: 60}} />
        </Animated.View>
      </View>
      <Button title="Flip" onPress={handleFlip} />
    </View>
  )
}

export default FlipCard;

兼容提示：安卓端部分版本对backfaceVisibility的支持有问题，如果出现翻转闪烁，可以给正反两面加一个和rotateY同步的opacity插值，旋转角度到90度的时候切换两面的透明度即可解决。

内容的提问来源于stack exchange，提问作者Daniel Döbereiner