如何判断FlatList已完成数据加载并可正常展示内容？

完全可以实现，核心是利用FlatList自带的渲染完成回调来控制isLoading状态，同时配合列表优化参数可同步解决切换卡顿问题。

核心逻辑 #

• 初始状态isLoading设为true，切换分类时也先将isLoading重置为true
• 用FlatList的onContentSizeChange回调监听内容渲染完成事件，该回调会在列表内容全部渲染、尺寸计算完成后触发，刚好对应“数据可正常展示”的时间点，此时再把isLoading设为false
• 搭配列表性能优化参数，可直接缓解切换分类时的卡顿问题

代码示例 #

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

const DynamicCategoryList = () => {
  const [selectedCategory, setSelectedCategory] = useState('default');
  const [isLoading, setIsLoading] = useState(true);
  const [listData, setListData] = useState([]);

  // 分类切换逻辑
  const switchCategory = (newCategory) => {
    setIsLoading(true);
    setSelectedCategory(newCategory);
    // 替换为你的实际数据获取/筛选逻辑
    const filteredData = fetchDataByCategory(newCategory);
    setListData(filteredData);
  };

  // 列表内容渲染完成回调
  const onListRenderFinish = () => {
    // 加极短延迟避免极端场景下的闪动，也可直接去掉
    setTimeout(() => setIsLoading(false), 30);
  };

  return (
    <View style={{flex: 1}}>
      {/* 你的分类切换tab组件 */}
      <CategoryTabs activeKey={selectedCategory} onChange={switchCategory} />

      {isLoading ? (
        <ActivityIndicator style={{flex: 1}} size="large" />
      ) : (
        <FlatList
          data={listData}
          renderItem={({item}) => <ListItem data={item} />}
          keyExtractor={item => item.id}
          onContentSizeChange={onListRenderFinish}
          {/* 以下为可选性能优化参数，可大幅降低卡顿 */}
          initialNumToRender={12}
          maxToRenderPerBatch={10}
          windowSize={5}
          removeClippedSubviews={true}
          {/* 如果列表项高度固定，加上getItemLayout性能提升更明显 */}
          getItemLayout={(data, index) => (
            {length: 80, offset: 80 * index, index}
          )}
        />
      )}
    </View>
  );
};

注意事项 #

• 如果列表数据是异步请求获取的，不要在请求返回后直接改isLoading，必须等onContentSizeChange触发再修改，避免出现空白屏
• 列表项组件建议用React.memo包裹，renderItem函数内不要写复杂计算逻辑，避免不必要的重渲染加重卡顿

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