如何在React Native的FlatList中使用ActivityIndicator替代RefreshControl

实现思路 #

你当前用的RefreshControl是React Native官方封装的组件，自带下拉手势识别、拖拽反馈和内置刷新指示器，要替换为ActivityIndicator可以参考下面的实现方案，不需要引入额外依赖：

具体实现步骤

1. 移除FlatList原有的refreshControl属性
2. 用FlatList的ListHeaderComponent属性渲染ActivityIndicator，通过loading状态控制它的显隐
3. 监听FlatList的滚动事件判断下拉阈值，保留原有下拉触发刷新的交互逻辑

修正后的完整代码示例：

import { ActivityIndicator, FlatList, View } from 'react-native';

// 组件内部逻辑
const [loading, setLoading] = useState(false);
// 下拉触发刷新的阈值，单位为像素，可根据业务需求调整
const PULL_REFRESH_THRESHOLD = 80;

const loadData = async () => {
  if (loading) return;
  setLoading(true);
  // 你的原有数据请求逻辑
  await fetchDataApi();
  setLoading(false);
};

const handleScroll = (e) => {
  const offsetY = e.nativeEvent.contentOffset.y;
  // 列表滚动到顶部且下拉距离超过阈值时触发刷新
  if (offsetY < -PULL_REFRESH_THRESHOLD && !loading) {
    loadData();
  }
};

return (
  <View style={styles.container}>
    <FlatList
      data={data}
      renderItem={({ item }) => renderData(item)}
      keyExtractor={(item) => `${item.id}`}
      onScroll={handleScroll}
      scrollEventThrottle={16} // 滚动事件回调频率，16ms保证交互流畅
      ListHeaderComponent={
        loading ? (
          <ActivityIndicator 
            size="large" 
            color="#9Bd35A" 
            style={{ paddingVertical: 16 }} 
          />
        ) : null
      }
    />
    <FAB
      style={styles.fab}
      small={false}
      icon="plus"
      onPress={() => navigation.navigate("Create")}
    />
  </View>
)

注意事项

• 你原有代码里onRefresh={loadData()}的写法有问题，会在组件渲染时直接执行刷新逻辑，需要改成传入函数引用onRefresh={loadData}
• 如果需要实现ActivityIndicator跟随下拉手势移动的效果，可以结合React Native的Animated动画库，绑定滚动偏移量和指示器的位移、透明度属性即可
• 如果需要对齐原生RefreshControl的拖拽回弹效果，可以使用第三方自定义刷新库，直接把指示器替换为ActivityIndicator即可

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