如何在 Typescript 中将 ref prop 和 useRef 与 Lottie 文件一起使用？

Posted 2023-02-25

【中文标题】如何在 Typescript 中将 ref prop 和 useRef 与 Lottie 文件一起使用？

【英文标题】：How to use ref prop and useRef with Lottie files in Typescript?

【发布时间】：2021-05-20 22:00:17

【问题描述】：

编辑：我意识到这实际上正在工作，尽管有错误消息！所以我真的不需要实施帮助，但想知道如何摆脱错误。为什么即使代码正在运行，它也会给我一个错误，我应该改变什么来摆脱它（除非我应该忽略它，因为代码正在运行？）？当我正在学习 Typescript 以获得有关解释此类错误的解释时，这将非常有帮助。

我正在使用带有 React Native 的 Typescript，并且我希望只能播放到我的 lottie 文件的某个帧。这是我尝试过的：

const lottieRef = useRef<LottieView>();

useEffect(() => 
    if (lottieRef && lottieRef.current) 
      lottieRef.current.play(0, 120);
    
  );

  return (
    <LottieView
      ref=lottieRef
      source=SUCCESS.keepReading
      autoPlay
      loop=false
      style=styles.animationContainer
    />
  );

并且 ref 带有这条长错误消息的下划线：

No overload matches this call.
  Overload 1 of 2, '(props: AnimatedLottieViewProps | Readonly<AnimatedLottieViewProps>): AnimatedLottieView', gave the following error.
    Type 'MutableRefObject<AnimatedLottieView | undefined>' is not assignable to type 'LegacyRef<AnimatedLottieView> | undefined'.
      Type 'MutableRefObject<AnimatedLottieView | undefined>' is not assignable to type 'RefObject<AnimatedLottieView>'.
        Types of property 'current' are incompatible.
          Type 'AnimatedLottieView | undefined' is not assignable to type 'AnimatedLottieView | null'.
            Type 'undefined' is not assignable to type 'AnimatedLottieView | null'.
  Overload 2 of 2, '(props: AnimatedLottieViewProps, context: any): AnimatedLottieView', gave the following error.
    Type 'MutableRefObject<AnimatedLottieView | undefined>' is not assignable to type 'LegacyRef<AnimatedLottieView> | undefined'.ts(2769)
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<AnimatedLottieView> & Readonly<AnimatedLottieViewProps> & Readonly<...>'
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<AnimatedLottieView> & Readonly<AnimatedLottieViewProps> & Readonly<...>'

我是 typescript 和 lottie 文件的新手，所以如果这是一个明显的问题，我很抱歉！提前非常感谢！

【参考方案1】：

不得不改成

const lottieRef = useRef<LottieView>(null);

这就解决了！

【参考方案2】：

为什么即使代码正在运行，它也会给我一个错误

你有编译错误，它与你正确的运行时间无关（你的运行时间是 javascript 代码）。

例如：

const foo = (str: string) => console.log(str);
// compile error, but run time (JS) is correct
foo(6);

我应该改变什么来摆脱它

提供正确的类型，在useRef<LottieView>，LottieView 不是引用类型，它是组件名称。

错误本身也提到了正确的类型是什么：

'AnimatedLottieView | null'
useRef<AnimatedLottieView>(null)

除非我应该忽略它，因为代码正在运行

你可能想回顾一下为什么你需要一个 TypeScript 开始，如果你发现它没用并且打字速度减慢你的速度而不是专注于影响，你可能不需要它（尤其是如果你是初学者） .

【讨论】：

顺便说一句，您和其他数十人在整个互联网上提出的解决方案并不能为我解决“错误”...

【参考方案3】：

试一试：

const lottieRef = useRef<LottieView | null>(null);

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review