如何结合FlatList的scrollToIndex与RefreshControl，仅挂载时滚动而非刷新时

核心思路 #

问题根源在于你的useEffect依赖了data，下拉刷新更新data后会触发该钩子重新执行滚动逻辑。我们需要仅在组件首次挂载时执行滚动到指定ID的操作，同时在刷新完成后主动将列表滚动到顶部。

修改后的代码 #

import { useRef, useEffect, useCallback, useState } from 'react';
import { FlatList, RefreshControl } from 'react-native';

const Screen = ({ route }) => {
  const { id, reportId } = route.params;
  const flatListRef = useRef(null);
  // 标记是否已完成首次滚动
  const firstScrollDone = useRef(false);
  const [data, setData] = useState([]);
  const [refreshing, setRefreshing] = useState(false);

  // 仅在组件首次挂载时滚动到指定项
  useEffect(() => {
    if (!firstScrollDone.current && flatListRef.current && data.length > 0) {
      const targetIndex = data.findIndex(item => item._id === id);
      if (id && targetIndex !== -1) {
        flatListRef.current.scrollToIndex({
          animated: true,
          index: targetIndex,
          viewPosition: 0.5
        });
      }
      // 标记首次滚动完成，后续data更新不再触发此逻辑
      firstScrollDone.current = true;
    }
  }, [data, id]);

  // 下拉刷新逻辑
  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    // 替换为你的实际数据请求逻辑
    try {
      const refreshedData = await fetchTargetData(reportId);
      setData(refreshedData);
      // 刷新完成后滚动到页面顶部
      if (flatListRef.current) {
        flatListRef.current.scrollToOffset({ offset: 0, animated: true });
      }
    } catch (err) {
      console.error('刷新失败:', err);
    } finally {
      setRefreshing(false);
    }
  }, [reportId]);

  return (
    <FlatList
      ref={flatListRef}
      refreshControl={
        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
      }
      data={data}
      keyExtractor={item => item._id}
      renderItem={({ item }) => (
        // 替换为你的列表项渲染组件
        <YourListItemComponent item={item} />
      )}
    />
  );
};

export default Screen;

关键修改点 #

• 新增firstScrollDone标记：通过useRef记录首次滚动状态，避免data因刷新更新时重复触发滚动到指定项的逻辑。
• 规范flatListRef绑定：直接将flatListRef赋值给FlatList的ref属性，替代原有的回调赋值方式，逻辑更清晰。
• 刷新后主动滚动到顶部：在onRefresh的收尾逻辑中，调用scrollToOffset将列表滚动到顶部，满足刷新后停在顶部的需求。

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