如何在RecyclerListView中使用useAnimatedRef实现同步滚动？

useAnimatedRef返回的是Reanimated专为动画线程设计的引用对象，它的current并非原始的RecyclerListView组件实例，而是经过Reanimated包装的动画节点。直接调用scrollTo会因找不到该方法而报错。

方案1：直接使用普通useRef触发滚动 #

如果只是需要同步执行scrollTo操作，无需在动画线程中处理，直接用React原生的useRef获取组件实例即可：

import { useRef } from 'react';

const recyclerRef = useRef(null);

// 触发滚动的逻辑（比如在某个事件或 useEffect 中执行）
if (recyclerRef.current) {
  recyclerRef.current.scrollTo({ x: 0, y: 200 });
}

<RecyclerListView
  ref={recyclerRef}
  rowRenderer={rowRenderer}
  dataProvider={dataProvider}
  layoutProvider={layoutProvider}
/>

方案2：动画上下文内触发滚动（结合runOnJS） #

如果需要在Reanimated的动画上下文（比如手势处理器、滚动处理器）中触发scrollTo，需要同时使用普通useRef和runOnJS（将JS逻辑从动画线程转回JS线程执行）：

import { useRef } from 'react';
import { useAnimatedRef, runOnJS, useAnimatedGestureHandler } from 'react-native-reanimated';

const recyclerRef = useRef(null);
const animatedRecyclerRef = useAnimatedRef();

// 定义滚动方法
const scrollToTarget = () => {
  if (recyclerRef.current) {
    recyclerRef.current.scrollTo({ x: 0, y: 200 });
  }
};

// 示例：在手势结束时触发滚动
const gestureHandler = useAnimatedGestureHandler({
  onEnd: () => {
    runOnJS(scrollToTarget)();
  },
});

<RecyclerListView
  ref={(ref) => {
    recyclerRef.current = ref;
    animatedRecyclerRef.current = ref; // 关联动画ref，用于获取实时滚动状态
  }}
  rowRenderer={rowRenderer}
  dataProvider={dataProvider}
  layoutProvider={layoutProvider}
/>

useAnimatedRef的核心用途是在动画线程中访问滚动视图的实时滚动参数（比如contentOffset），而非调用组件的实例方法。RecyclerListView的scrollTo本身是同步方法，直接用普通useRef即可满足需求。

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