React Native：点击底部Tab时按需刷新FlatList并显示刷新动画

1. 跟踪FlatList是否处于顶部 #

通过FlatList的ref和滚动事件，实时记录列表是否滚动到顶部：

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

const YourScreen = () => {
  const flatListRef = useRef(null);
  const [isAtTop, setIsAtTop] = useState(true); // 初始默认处于顶部

  // 监听滚动事件，判断是否在顶部
  const handleScroll = (event) => {
    const offsetY = event.nativeEvent.contentOffset.y;
    // 用<=1替代===0，避免滚动偏移误差导致的误判
    setIsAtTop(offsetY <= 1);
  };

  return (
    <FlatList
      ref={flatListRef}
      onScroll={handleScroll}
      scrollEventThrottle={16} // 保证滚动状态实时更新
      // 其他FlatList属性（data、renderItem等）
    />
  );
};

2. 监听底部标签点击，触发条件刷新 #

使用useNavigationEvent监听标签点击事件，仅在列表处于顶部时触发数据刷新：

import { useNavigationEvent } from '@react-navigation/native';

const YourScreen = () => {
  // 承接上面的flatListRef、isAtTop状态
  const [refreshing, setRefreshing] = useState(false);

  // 数据刷新逻辑
  const fetchData = async () => {
    setRefreshing(true);
    try {
      // 替换为你的实际数据请求逻辑
      // await api.getListData();
    } catch (err) {
      // 错误处理逻辑
    } finally {
      setRefreshing(false);
    }
  };

  // 监听tab点击事件
  useNavigationEvent((event) => {
    if (event.type === 'tabPress') {
      if (isAtTop) {
        fetchData();
      }
    }
  });

  // ...
};

3. 添加刷新动画（RefreshControl） #

给FlatList配置refreshControl属性，实现标准的刷新动画，同时复用refreshing状态：

import { RefreshControl } from 'react-native';

const YourScreen = () => {
  // 承接上面的状态与函数

  return (
    <FlatList
      ref={flatListRef}
      onScroll={handleScroll}
      scrollEventThrottle={16}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={fetchData} // 同时支持手动下拉刷新
          tintColor="#1677ff" // 自定义动画颜色
        />
      }
      // 其他FlatList属性
    />
  );
};

额外注意事项 #

• 若仍在使用useScrollToTop，无需移除：点击标签且列表不在顶部时，会自动滚动到顶部但不触发刷新；只有点击时已在顶部，才会触发刷新逻辑。
• scrollEventThrottle={16}确保滚动事件每16ms触发一次（接近60fps），保证状态更新的实时性。

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