React Native Reanimated：AnimateStyle与StyleSheet.create的TS类型适配问题

方案1：拆分静态与动态动画样式 #

将静态样式通过StyleSheet.create创建，动态动画样式直接传入Animated.View的style数组，TypeScript会自动识别Animated.AnimateStyle<ViewStyle>类型：

import Animated from 'react-native-reanimated';
import { StyleSheet } from 'react-native';

// ...
const scaleNode = useRef(new Animated.Value(1));

// 静态样式用StyleSheet.create处理
const staticStyles = useMemo(() => StyleSheet.create({
  container: {
    // 这里放宽高、背景色等静态样式
  }
}), []);

return (
  <Animated.View 
    style={[
      staticStyles.container, 
      { transform: [{ scale: scaleNode.current }] }, 
      containerStyle
    ]}
  >
    {/* 子组件内容 */}
  </Animated.View>
);

方案2：给StyleSheet.create指定动画样式类型 #

如果需要用StyleSheet.create封装动画样式，显式指定泛型参数为包含Animated.AnimateStyle<ViewStyle>的类型，让TypeScript识别该样式支持动画值：

import Animated from 'react-native-reanimated';
import { StyleSheet, ViewStyle } from 'react-native';

// ...
const scaleNode = useRef(new Animated.Value(1));

const style = useMemo(() => {
  return StyleSheet.create<{ animated: Animated.AnimateStyle<ViewStyle> }>({
    animated: { transform: [{ scale: scaleNode.current }] },
  });
}, []);

return (
  <Animated.View style={[style.animated, containerStyle]}>
    {/* 子组件内容 */}
  </Animated.View>
);

方案3：使用Reanimated推荐的useAnimatedStyle钩子（v2+） #

若使用Reanimated v2及以上版本，更推荐用useAnimatedStyle创建动态动画样式，它会自动处理类型，写法更符合函数式规范：

import Animated, { useAnimatedStyle } from 'react-native-reanimated';
import { StyleSheet } from 'react-native';

// ...
const scaleNode = useRef(new Animated.Value(1));

const animatedStyle = useAnimatedStyle(() => {
  return {
    transform: [{ scale: scaleNode.current.value }]
  };
}, []);

const staticStyles = StyleSheet.create({
  container: {
    // 静态样式内容
  }
});

return (
  <Animated.View style={[staticStyles.container, animatedStyle, containerStyle]}>
    {/* 子组件内容 */}
  </Animated.View>
);

错误原因说明 #

原代码报错是因为StyleSheet.create默认推断为普通ViewStyle类型，而ViewStyle中transform.scale要求是number，但你传入的是Animated.Value<1>，类型不兼容。直接将动画样式传给Animated.View时，TypeScript会自动把样式数组合并为Animated.AnimateStyle<ViewStyle>类型，该类型支持用Animated.Value作为样式属性值，因此不会报错。

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