React Native 0.62中Animated组件ref属性类型错误求临时解决方案

这个问题是React Native 0.62版本中@types/react-native类型定义的bug导致的——官方在重构Animated组件类型时，遗漏了对ref属性的类型声明，所以TypeScript会判定Animated组件不支持ref。下面是几个可行的临时解决办法：

1. 使用类型断言绕过检查 #

最快捷的方式是通过类型断言告诉TypeScript这个ref是合法的：

// 函数组件中用useRef的情况
import { useRef } from 'react';
import { Animated, View } from 'react-native';

const MyComponent = () => {
  const animatedViewRef = useRef<View>(null);

  return (
    <Animated.View 
      ref={animatedViewRef as React.RefObject<Animated.View>}
    />
  );
};

// 或者直接在回调ref里断言
<Animated.View 
  ref={(ref) => {
    console.log('RefAnimated', ref);
  } as React.RefCallback<View>}
/>

2. 临时修改类型定义文件（推荐用patch-package持久化） #

你可以直接修改node_modules/@types/react-native/index.d.ts中的AnimatedProps接口，补上ref属性的类型：

// 找到AnimatedProps的定义，添加ref字段
interface AnimatedProps<P> extends P {
  // 保留原有所有属性...
  ref?: React.Ref<ExtractComponent<P>>;
}

如果你不想每次npm install后都重新修改，可以用patch-package工具生成一个补丁，以后安装依赖时会自动应用这个修改。

3. 降级@types/react-native版本 #

暂时把@types/react-native降级到0.61.x版本，这个版本的类型定义还没有引入导致问题的重构，能直接规避这个错误：

npm install @types/react-native@^0.61.0 --save-dev
# 或者用yarn
yarn add @types/react-native@^0.61.0 --dev

等React Native官方修复这个类型bug后，再升级回去就可以了。

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