React Native中如何为FlatList自定义刷新指示器？

可以完全禁用原生加载器，替换为自定义加载组件，核心思路是把原生指示器移出可视区域，再配合下拉刷新状态添加自定义组件。

具体实现步骤 #

1. 隐藏原生加载指示器 #

通过设置RefreshControl的progressViewOffset为足够大的负数，将原生指示器推到屏幕外：

<RefreshControl
  refreshing={isRefreshing}
  onRefresh={handleRefresh}
  progressViewOffset={-100} // 把原生指示器移出可视区域
/>

2. 添加自定义加载组件 #

在FlatList/ScrollView的头部插入自定义加载组件，根据refreshing状态控制显示：

<FlatList
  data={listData}
  renderItem={({item}) => <ListItem data={item} />}
  refreshControl={
    <RefreshControl
      refreshing={isRefreshing}
      onRefresh={startRefresh}
      progressViewOffset={-100}
    />
  }
  ListHeaderComponent={() => (
    isRefreshing ? (
      <View style={{padding: 20, alignItems: 'center'}}>
        {/* 这里替换成你的自定义加载组件，比如Lottie动画、自定义图标 */}
        <ActivityIndicator size="large" color="#2196F3" />
        <Text style={{marginTop: 8, fontSize: 14}}>加载中...</Text>
      </View>
    ) : null
  )}
/>

3. 优化下拉跟随效果（可选） #

如果需要让自定义组件跟随下拉动作移动，可以监听滚动偏移量，动态调整组件位置：

const [scrollOffset, setScrollOffset] = useState(0);

<ScrollView
  onScroll={(e) => setScrollOffset(e.nativeEvent.contentOffset.y)}
  scrollEventThrottle={16}
  refreshControl={
    <RefreshControl
      refreshing={isRefreshing}
      onRefresh={startRefresh}
      progressViewOffset={-100}
    />
  }
>
  {/* 下拉过程中显示的提示组件 */}
  {scrollOffset < 0 && !isRefreshing && (
    <View style={{
      position: 'absolute',
      top: scrollOffset,
      left: 0,
      right: 0,
      alignItems: 'center'
    }}>
      <Text>松开即可刷新</Text>
    </View>
  )}
  {/* 页面内容 */}
  {listData.map(item => <ContentItem key={item.id} data={item} />)}
</ScrollView>

注意事项 #

• progressViewOffset的数值可以根据自定义组件高度调整，确保原生指示器完全不可见。
• 自定义组件样式无限制，可自由替换为动画、图标等任意元素。
• 需正确维护refreshing状态，保证下拉刷新逻辑和原生行为一致。

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