在 ScrollView react-native 上添加 useRef 类型答案

【问题标题】：Adding type for useRef on ScrollView react-native在 ScrollView react-native 上添加 useRef 类型
【发布时间】：2021-02-08 11:07:12
【问题描述】：

希望像这样创建对 ScrollView 组件的引用：const ref = useRef<ScrollView>(null);（或类似的东西）基本上我需要像这样访问 flashScrollIndicators 方法：

<ScrollView
  ref={ref}
  onContentSizeChange={() => ref?.current?.flashScrollIndicators()}>
  {children}
</ScrollView>

代码在我的应用程序中有效，但是 ScrollView 的打字稿定义似乎不包括 flashScrollIndicators？我正在查看 Property 'flashScrollIndicators' does not exist on type 'ScrollView'.ts(2339) 可以看到 SectionList 和 Flatlist 的类型，因此不确定这是定义的错误还是我没有正确使用它。

【问题讨论】：

标签： typescript react-native

【解决方案1】：

经过一番研究，我找不到任何具有正确解决方案的官方文档或博客文章，但使用 ScrollView 本身声明 ref 对我有用。所以你可以这样做：

const scrollViewRef = React.useRef<ScrollView>(null);

然后自动完成会处理剩下的事情，希望对您有所帮助！

【讨论】：

感谢您的回复，不幸的是，我已经尝试过了（如果您重新阅读问题，您会看到我在第一行提到过），ScrollView 的输入似乎没有包含 flashScrollIndicators 函数，现在我只是 @ts-ignore'ing 调用，因为我知道它有效
太棒了。为我工作。
这以前不起作用，但我现在接受了，因为自提交此答案以来，ScrollView 的官方声明文件已经更新，所以现在可以了 :)

【解决方案2】：

由于 flashscrollindicators 确实存在于文档中的 ScrollView 上（并且在应用程序中工作）https://reactnative.dev/docs/scrollview#flashscrollindicators 我认为这是类型定义中的错误。

我认为最干净的解决方案是使用交集定义自己的 ScrollViewRef。

import { ScrollView } from 'react-native';

export type ScrollViewRef = ScrollView & {
    flashScrollIndicators: () => void;
};

然后使用这个类型来定义 ref

const scrollViewRef = React.useRef<ScrollViewRef | null>(null);

【讨论】：