React Native FlatList仅渲染少量条目问题求助

在React Native 0.72.4中使用FlatList渲染1500条数据时，仅显示前5条，无法向下滚动查看剩余内容；但当发生状态变更等交互操作后，列表会更新并正常显示所有数据。期望FlatList能直接正常展示全部数据。

代码实现 #

renderItem 函数 #

const renderItem = (item, index) => {
  return (
    <TouchableOpacity>
      <View
        style={{
          borderWidth: 0.2,
          padding: 50,
          backgroundColor: index % 2 === 0 ? '#22c1c3' : '#5985f1',
        }}>
        <Text style={{fontSize: 20, fontWeight: '700'}}>{item.name} </Text>
        <View style={{marginTop: 10}}>
          <Text style={{fontSize: 14, fontWeight: '500'}}>Age:{item.age} </Text>
          <Text style={{fontSize: 14, fontWeight: '500'}}>
            Balance Amount:{item.balanceAmount}{' '}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  );
};

FooterComponent 组件 #

const FooterComponent = () => {
  return (
    <View style={{height: 20,  width: '100%'}} />
  );
};

主渲染逻辑 #

return (
      <View style={{marginTop: 25}}>
        <FlatList
          data={DATA}
          renderItem={({item, index}) => renderItem(item, index)}
          maxToRenderPerBatch={10}
          initialNumToRender={10}
          windowSize={10}
          keyExtractor={(item, index) => index}
          updateCellsBatchingPeriod={10}
          removeClippedSubviews
          ListFooterComponent={FooterComponent}
        />
      </View>
  );

DATA 结构示例 #

[
    {
      "id": "64f1c1df583fb14b25315553",
      "index": 0,
      "active": false,
      "balanceAmount": "$2,591.81",
      "age": 22,
      "name": "Fletcher Batcher"
    }
]

• 修复父容器高度约束：FlatList的父View未设置高度限制，导致FlatList无法获取足够的滚动空间。给父View添加flex:1，让它占满可用空间：

  <View style={{flex: 1, marginTop: 25}}>
    <FlatList ... />
  </View>
  

• 移除removeClippedSubviews属性：该属性在Item高度固定但渲染异常的场景下可能引发问题，暂时移除后观察是否恢复正常。
• 优化keyExtractor：避免使用index作为唯一key，改用数据中自带的唯一id，提升列表渲染稳定性：

  keyExtractor={(item) => item.id}
  

• 检查滚动容器嵌套：确保FlatList没有被ScrollView等可滚动组件嵌套，避免滚动冲突。

内容的提问来源于stack exchange，提问作者Gokul.R