第 10 课：FlatList项目分隔

• 日期：2026-09-11
• 课程序号：第 10 课
• 知识点：ItemSeparatorComponent

用途

在课程项之间统一加入可复用间隔。

核心概念

分隔组件出现在相邻项目之间，不会额外包裹每个项目。

最小代码或操作示例

<FlatList
  data={lessons}
  renderItem={({ item }) => <Text>{item.title}</Text>}
  ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
/>

3～5 分钟练习

把空白改成 1 像素灰线。

参考答案

设置 height: 1 与浅灰 backgroundColor。

与上一课的联系

上一课处理空列表；本课完善有数据时的项间结构。