react-native - 将 ref 附加到 Reanimated ScrollView 以访问 .scrollTo

Question

使用 react-native-reanimated v1。

我创建了一个重现此问题的小吃 - https://snack.expo.io/@noitidart/reanimated-scroll-view-ref

我已经从 ScrollView 创建了一个可恢复的组件，如下所示：

import { ScrollView } from 'react-native-gesture-handler';
import Reanimated from 'react-native-reanimated';

const ReanimatedScrollView = Reanimated.createAnimatedComponent(ScrollView);

当我渲染它时，我想获得它的参考，这样我就可以做到ref.current.scrollTo()。然而，裁判在没有它的情况下回来scrollTo了。这是我的代码：

const ref = useRef();

const scrollToFoo = () => {
   if (ref.current) {
       ref.current.scrollTo({ y: 100 });
   }
}

return (
<ReanimatedScrollView ref={ref} />
)

如果我使用常规的 ScrollView 执行此操作，则可以ref.current正确scrollTo使用它。

标签： react-nativereact-native-reanimated

Answer 1

您可以使用getNode()来访问组件：

ref.current.getNode().scrollTo({ y: 100 });