正在ScrollView上添加useRef的类型react native

Question

想要创建一个类似这样的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类型，所以不确定这是定义的错误，还是我没有正确使用它。

Answer 1

经过一些研究，我找不到任何具有正确解决方案的官方文档或博客文章，但使用ScrollView声明ref本身对我有效。因此，您可以执行以下操作：

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

然后自动完成会处理剩下的，希望它能有所帮助！

Answer 2

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

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

import { ScrollView } from 'react-native';
export type ScrollViewRef = ScrollView & {
flashScrollIndicators: () => void;
};

然后使用此类型定义引用

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