第 8 课：FlatList渲染长列表

• 日期：2026-09-09
• 课程序号：第 8 课
• 知识点：FlatList 与 keyExtractor

用途

高效渲染可能变长的课程列表，而不是一次创建全部行。

核心概念

FlatList 接收数据和行渲染函数；keyExtractor 为每项提供稳定标识。

最小代码或操作示例

const topics = [{ id: '1', name: '布局' }, { id: '2', name: '输入' }];
return <FlatList
  data={topics}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>;

3～5 分钟练习

增加第三项并在名称前显示它的 id。

参考答案

加入唯一 id 的对象，并将行改为 <Text>{item.id}. {item.name}</Text>。

与上一课的联系

上一课按条件显示单条提示；本课根据数组按需渲染多条记录。