React Native FlatList仅渲染首个子项问题求助

问题分析 #

控制台能打印出两个子分类数据，但界面只显示第一个，说明数据传递正常，问题出在布局约束上——FlatList作为滚动组件，需要明确的高度限制，或者子组件的样式导致占满了可用空间，挤压了其他子项的显示。

解决方案 #

1. 给FlatList添加高度约束 #

FlatList默认需要明确的高度才能正确渲染所有子项，给它添加flex:1样式，让它占据父容器的剩余空间：

{showFullSection && (
  <FlatList
    style={{ flex: 1 }} // 添加高度约束
    keyExtractor={item => item.id}
    data={itemData?.subcategory || []} // 增加默认空数组保证数据安全
    renderItem={({item}) => <WardrobeSubsection subcategory={item} />}
  />
)}

同时确保ItemHolders的父容器样式设置flex:1，提供足够的空间：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  // 其他样式...
});

2. 修正子组件的样式 #

如果WardrobeSubsection的container样式设置了flex:1，会导致单个子项占满FlatList高度，遮挡其他子项。修改为自适应内容的样式：

const styles = StyleSheet.create({
  container: {
    // 移除flex:1，替换为包裹内容的样式
    paddingVertical: 12,
    paddingHorizontal: 8,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  headingContainer: {
    marginBottom: 8,
  },
  title: {
    fontSize: 16,
    fontWeight: '500',
  },
});

3. 验证数据传递的完整性 #

虽然日志显示数据正常，仍可通过默认值避免itemData为null时的异常：

data={itemData?.subcategory || []}

测试验证 #

修改后重新运行项目，即可同时显示"Tank Tops"和"Sweaters"两个子分类及对应item ID。

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