React Native自定义RefreshControl在安卓FlatList中不生效问题

核心原因 #

安卓端React Native的FlatList对refreshControl属性传入的组件重渲染频率非常敏感，你自定义的RefreshControl内部的useEffect会在组件挂载后立刻触发counter状态更新，导致自定义组件在短时间内连续重渲染，安卓端的RefreshControl布局计算逻辑存在兼容性问题，频繁重渲染会使FlatList布局计算异常，最终列表高度被计算为0，因此完全消失。

修复方法 #

方案1：移除不必要的状态更新（推荐） #

你原有逻辑中的counter和延时更新完全可以省略，直接根据refreshing状态控制标题即可，修改后自定义组件代码如下：

import { RefreshControl } from 'react-native';
import Colors from '你的颜色配置文件路径';

const MyRefreshControl = ({ onRefresh, refreshing }) => {
  return (
    <RefreshControl
      onRefresh={onRefresh}
      refreshing={refreshing}
      title={refreshing ? 'Refreshing' : 'Loading data'}
      tintColor={Colors.main}
      titleColor={Colors.main}
      // 安卓端新增以下两个属性固定刷新控件样式，避免布局抖动
      progressBackgroundColor="#ffffff"
      size={RefreshControl.SIZE.DEFAULT}
    />
  )
}

export default MyRefreshControl;

方案2：保留交互逻辑的修复方法 #

如果确实需要保留延时切换标题的交互，使用useRef标记初始化状态，避免不必要的重渲染：

import { useState, useEffect, useRef } from 'react';
import { RefreshControl } from 'react-native';
import Colors from '你的颜色配置文件路径';

const MyRefreshControl = ({ onRefresh, refreshing }) => {
  const [counter, setCounter] = useState(0)
  const initFlag = useRef(false)

  useEffect(() => {
    // 刷新状态重置时还原标记
    if (refreshing) {
      setCounter(0)
      initFlag.current = false
      return
    }
    // 仅触发一次状态更新，避免重复渲染
    if (!initFlag.current) {
      initFlag.current = true
      setTimeout(() => {
        setCounter(1)
      }, 500)
    }
  }, [refreshing])

  return (
    <RefreshControl
      onRefresh={onRefresh}
      refreshing={refreshing}
      title={counter > 0 ? 'Refreshing' : 'Loading data'}
      tintColor={Colors.main}
      titleColor={Colors.main}
      progressBackgroundColor="#ffffff"
      size={RefreshControl.SIZE.DEFAULT}
    />
  )
}

export default MyRefreshControl;

额外排查项 #

如果修改后仍然存在问题，确认FlatList的样式配置：

• 给FlatList的style添加flex: 1属性
• 确认FlatList的父容器有明确的宽高，不要使用自适应无边界的布局

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