React Native：FlatList首次加载时refreshing为true却不显示刷新指示器

先梳理下你遇到的问题核心：首次加载时FlatList的刷新指示器不显示，但手动触发却正常。我从你的代码里找到了几个关键问题，逐个解决应该就能搞定：

1. FlatList的refreshing属性语法错误 #

看你FlatList的代码片段，这里明显少写了属性名：

<FlatList 
  data={this.state. productList} 
  renderItem={(item) => <CustomList navigation={this.props.navigation} data={item} />} 
  keyExtractor={(item, index) => index} 
  ={this.state.refreshing}  // ❌ 这里漏掉了`refreshing`属性名！
  onRefresh={() => this._handleRefresh()}
  // ...其他属性
/>

必须改成refreshing={this.state.refreshing}，这是初始状态不生效的直接原因之一。

2. 初始productList为null的问题 #

FlatList的data如果是null或undefined，会直接渲染ListEmptyComponent，可能跳过刷新指示器的渲染逻辑。建议把初始值改成空数组：

this.state = {
  productList: [],  // ✅ 替换null为[]
  refreshing: true,
}

3. 生命周期方法的问题 #

componentWillMount已经被React Native废弃了，而且你现在的这个方法是空的——初始加载时没有执行数据获取逻辑，refreshing一直为true但没有后续状态更新，也会影响FlatList的渲染。换成componentDidMount来做初始数据请求：

async componentDidMount() {
  // 这里放你的初始数据获取逻辑
  await this.fetchProductData();
}

async fetchProductData() {
  try {
    // 替换成你的实际API请求
    // const res = await fetch('your-api-url');
    // const data = await res.json();
    const data = []; // 模拟返回数据
    this.setState({
      productList: data,
      refreshing: false
    });
  } catch (err) {
    console.error('数据请求失败:', err);
    this.setState({ refreshing: false });
  }
}

async _handleRefresh() { 
  this.setState({ refreshing: true });
  await this.fetchProductData(); // 刷新时重新获取数据
}; 

4. TabView场景挂载的坑 #

因为你的ProductList是在react-native-tab-view的场景里渲染的，未激活的场景（比如第二个tab）初始可能不会完全挂载。可以在ProductList里监听focused属性变化，切换到当前tab时触发刷新：

componentDidUpdate(prevProps) {
  // 当tab切换到当前场景时，触发刷新
  if (this.props.focused && !prevProps.focused) {
    this._handleRefresh();
  }
}

修正后的ProductList完整代码示例 #

class ProductList extends Component { 
  constructor(props){ 
    super(props); 
    this.state = { 
      productList: [],
      refreshing: true,
      searchText: '' // 补上你用到但没初始化的状态
    } 
  } 

  async componentDidMount() {
    await this.fetchProductData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.focused && !prevProps.focused) {
      this._handleRefresh();
    }
  }

  async fetchProductData() {
    try {
      // 替换为你的实际数据请求逻辑
      const data = [];
      this.setState({
        productList: data,
        refreshing: false
      });
    } catch (err) {
      console.error('数据请求失败:', err);
      this.setState({ refreshing: false });
    }
  }

  async _handleRefresh() { 
    this.setState({ refreshing: true });
    await this.fetchProductData();
  }; 

  render() { 
    return ( 
      <View style={{ flex: 1, backgroundColor:'#EFEFF4' }}> 
        <View style={{ flexDirection:'row',backgroundColor:'#fff',borderBottomWidth:0.5,borderBottomColor:'#cbd2d9' }}> 
          <Text style={{ padding:10, fontFamily:'open-sans-regular' }}>{this.state.searchText}</Text> 
          <TouchableOpacity style={{ marginLeft:'auto',padding:10 }} onPress={() => this._handleRefresh()}> 
            <Text style={{ color:'#6391c0', fontFamily:'open-sans-regular' }}>Search</Text> 
          </TouchableOpacity> 
        </View> 
        <FlatList 
          data={this.state.productList} 
          renderItem={(item) => <CustomList navigation={this.props.navigation} data={item} />} 
          keyExtractor={(item, index) => index.toString()} // 转为字符串避免警告
          refreshing={this.state.refreshing}
          onRefresh={() => this._handleRefresh()}
          ListEmptyComponent={() => (
            <View style={{ flex:1, justifyContent:'center', alignItems:'center' }}> 
              <Text style={{ marginTop: 150 }}>No records found, try search again!</Text> 
            </View> 
          )} 
        /> 
      </View> 
    ); 
  } 
} 

export default ProductList;

额外小建议 #

• 点击Search按钮时，不要只设置refreshing: true，直接调用_handleRefresh()才能真正触发数据刷新（上面代码已经改了）。
• keyExtractor返回字符串类型，避免React Native的警告。

按照这些步骤修正后，首次加载的刷新指示器应该就能正常显示了。

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