React Native Reanimated类型错误：返回样式不兼容DefaultStyle

错误信息 #

Argument of type '() => { transform: ({ rotateX: `${number}deg`; rotateY?: undefined; } | { rotateY: `${number}deg`; rotateX?: undefined; })[]; }' is not assignable to parameter of type '() => DefaultStyle'.

问题代码 #

export const FlipCard = ({
  isFlipped,
  cardStyle,
  direction = "y",
  duration = 500,
  RegularContent,
  FlippedContent,
}: FlipCardProps) => {
  const isDirectionX = direction === "x"

  const regularCardAnimatedStyle = useAnimatedStyle(() => {
    const spinValue = interpolate(Number(isFlipped.value), [0, 1], [0, 180])
    const rotateValue = withTiming(`${spinValue}deg`, { duration })

    return {
      transform: [isDirectionX ? { rotateX: rotateValue } : { rotateY: rotateValue }],
    }
  })

  const flippedCardAnimatedStyle = useAnimatedStyle(() => {
    const spinValue = interpolate(Number(isFlipped.value), [0, 1], [180, 360])
    const rotateValue = withTiming(`${spinValue}deg`, { duration })

    return {
      transform: [isDirectionX ? { rotateX: rotateValue } : { rotateY: rotateValue }],
    }
  })
}

上述代码来自Reanimated官方翻转卡片示例，在Snack中运行正常，但本地React Native 0.78.0 + Reanimated 3.17.1项目中出现类型错误，可能原因如下：

可能原因 #

• TypeScript版本差异：Snack默认使用的TypeScript版本与本地项目不一致，Reanimated 3.17.1的类型定义在不同TS版本下兼容性不同，本地TS版本过高或过低都可能导致transform的联合类型无法被识别为DefaultStyle的合法结构。
• 类型定义缓存或冲突：本地项目的依赖缓存、@types/react-native与Reanimated自身类型文件存在冲突，而Snack依赖为全新安装，不存在此类问题。
• TS严格模式差异：本地项目启用了更严格的TypeScript配置（如strict: true），对条件分支返回的联合类型校验更严格，导致transform数组中rotateX/rotateY的可选联合类型不被DefaultStyle接受。

解决方法 #

1. 显式指定transform类型：通过类型断言明确transform的合法类型，避免TS推断错误：

// 方法一：使用as const
return {
  transform: [isDirectionX ? { rotateX: rotateValue } : { rotateY: rotateValue }] as const,
}

// 方法二：导入Reanimated类型定义
import type { TransformStyle } from 'react-native-reanimated';

return {
  transform: [isDirectionX ? { rotateX: rotateValue } : { rotateY: rotateValue }] as TransformStyle['transform'],
}

2. 对齐TypeScript版本：将本地TS版本更新为与Snack一致的稳定版本（建议TS 5.x系列），确保和Reanimated 3.17.1的类型定义兼容。

3. 清理依赖缓存并重装：

# npm
rm -rf node_modules
rm package-lock.json
npm install

# yarn
yarn cache clean
yarn install

参考文档说明（官方翻转卡片示例） #

该示例通过useAnimatedStyle创建动画样式，利用interpolate将状态值映射为角度值，再通过withTiming实现平滑的过渡动画，最终通过isFlipped状态控制卡片在X/Y轴上的翻转效果。

内容的提问来源于stack exchange，提问作者Kai Cottle