如何等待RecyclerListView完成测量后再调用scrollTo？

出现scrollTo was called before RecyclerListView was measured, please wait for the mount to finish错误，是因为调用scrollTo时组件虽已挂载（ref存在），但还没完成布局测量。单纯判断ref存在没用，得等组件完成测量后再执行滚动，下面是两种靠谱的解决方法：

方法一：利用onLayout回调+状态监听 #

通过onLayout事件判断组件是否完成测量，再结合状态触发滚动，适合需要动态监听索引变化的场景：

import { useState, useRef, useEffect } from 'react';
import RecyclerListView from 'recyclerlistview';

const YourComponent = ({ targetIndex }) => {
  const [isMeasured, setIsMeasured] = useState(false);
  const recyclerRef = useRef(null);

  // 组件完成布局测量时触发
  const handleLayout = () => {
    setIsMeasured(true);
  };

  // 测量完成且目标索引变化时执行滚动
  useEffect(() => {
    if (isMeasured && recyclerRef.current) {
      recyclerRef.current.scrollToIndex(targetIndex, true);
    }
  }, [isMeasured, targetIndex]);

  return (
    <RecyclerListView
      ref={recyclerRef}
      onLayout={handleLayout}
      // 配置你的数据源、布局管理器等其他props
    />
  );
};

方法二：直接在onLayout中执行滚动 #

如果不需要动态监听索引变化，可直接在onLayout回调里调用scrollTo：

import { useRef } from 'react';
import RecyclerListView from 'recyclerlistview';

const YourComponent = ({ targetIndex }) => {
  const recyclerRef = useRef(null);

  const handleLayout = () => {
    if (recyclerRef.current) {
      recyclerRef.current.scrollToIndex(targetIndex, true);
    }
  };

  return (
    <RecyclerListView
      ref={recyclerRef}
      onLayout={handleLayout}
      // 其他props配置
    />
  );
};

为什么原来的方法没用？ #

recyclerRef?.current只能判断组件实例是否挂载，但挂载完成不代表组件已经完成布局测量。onLayout事件会在组件的布局（包括尺寸计算）完成后触发，此时调用scrollTo才不会报错。

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