Day_6：把重复内容变成数据——校园活动列表

昨天学会了让一个组件变化；今天学习如何用一份数据生成多个相似的界面。

预计用时：50～70 分钟。

今天要理解什么

数组保存多条活动，对象描述一条活动。
FlatList 根据数据渲染列表，不需要复制粘贴多份卡片 JSX。
每条数据要有稳定且唯一的 id。
数据、组件和首页各有职责，项目会更容易修改。

1. 先确认旧功能

在 Day_4、Day_5 一直使用的仓库根目录运行：

git status
git pull
npx expo start

确认个人信息和打卡按钮仍可用。今天不新建项目，也不安装导航库。

2. 把活动写成数据

在与 app/ 同级的位置新建 data/activities.ts；如果使用 App.tsx，就在仓库根目录建 data/。如果项目是 src/app/，则建 src/data/。

export type Activity = {
  id: string;
  title: string;
  time: string;
  location: string;
};

export const activities: Activity[] = [
  { id: 'club', title: '社团开放日', time: '周三 16:00', location: '活动中心' },
  { id: 'code', title: 'APP 开发分享会', time: '周五 19:00', location: '教学楼 201' },
  { id: 'run', title: '校园夜跑', time: '周六 19:30', location: '操场' },
];

id 不显示给用户，但用来区分活动。新增活动时只增加一条数据，不需要再复制一整块界面。

3. 在首页渲染列表

ScrollView 适合少量、手写的内容；FlatList 适合“由一份数据生成许多相似项目”的列表。今天会用 FlatList 替换昨天首页最外层的 ScrollView。renderItem 负责画一条活动，keyExtractor 告诉 React 每条活动的唯一身份，ListHeaderComponent 则把个人卡片和打卡卡片放到列表顶部。

从 react-native 导入 FlatList、Text、View 和 StyleSheet，再从 data/activities.ts 导入数据。相对路径规则与 Day_4 的 components/ 相同，只需将 components 改为 data。

参考核心写法：

<FlatList
  data={activities}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <View style={styles.activityCard}>
      <Text style={styles.activityTitle}>{item.title}</Text>
      <Text>{item.time} · {item.location}</Text>
    </View>
  )}
  ListHeaderComponent={
    <View>
      <Text style={styles.pageTitle}>CampusHelper</Text>
      <ProfileCard name="你的姓名" major="你的专业" goal="你的目标" />
      <CheckInCard />
      <Text style={styles.sectionTitle}>校园活动</Text>
    </View>
  }
  contentContainerStyle={styles.content}
/>

在 StyleSheet.create 中为 activityCard、activityTitle、pageTitle、sectionTitle 和 content 写样式。content 可以先写 { padding: 20, paddingBottom: 40 }。把首页原来的外层 ScrollView 换成 FlatList，不要把 FlatList 放进 ScrollView；ListHeaderComponent 负责放置昨天已有的内容。

本日先只把“活动内容”抽到 data/activities.ts；活动卡片暂时写在 renderItem 中是有意的，等熟悉列表后再单独拆成组件。

今日任务

至少展示 4 条活动，其中 1 条由你自己设计。
每条活动显示名称、时间、地点；id 不重复。
只改 activities.ts 中的一条活动名称，观察界面是否跟着变化。
个人信息和打卡功能仍然存在，列表能在小屏手机上滚动。

请用自己的话回答：如果下周要增加第五条活动，应改哪个文件？为什么不需要复制一块 JSX？

项目记录与提交

在 README 中增加“当前功能”列表，并写下今天的答案。提交前检查：

git status
git diff

逐个暂存首页、data/activities.ts 和 README，再提交：

git commit -m "feat: show campus activities"
git push

验收标准

仍在同一个 Git 仓库开发，旧功能可用
使用 FlatList，且 keyExtractor 返回唯一 id
至少 4 条活动，新增活动只需修改数据文件
没有把 FlatList 嵌套在同方向滚动的 ScrollView 中
README 说明了当前功能，Git 历史有 Day_6 提交

提交：完整列表截图和 git log --oneline -5 截图。

遇到问题

**列表提示缺少 key：**检查每条活动是否有不同的 id，以及 keyExtractor 是否使用了它。

**活动只显示一部分：**确认外层不是固定高度的 View，并尝试向下滚动。

**组件导入失败：**检查 components/、data/ 与 app/ 是否按 Day_4 的规则放在同级。

4.6 KiB Raw Blame History Unescape Escape