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

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

预计用时：50～70 分钟。

## 今天要理解什么

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

## 1. 先确认旧功能

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

```bash
git status
git pull
npx expo start
```

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

## 2. 把活动写成数据

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

```ts
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`。

参考核心写法：

```tsx
<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` 中是有意的，等熟悉列表后再单独拆成组件。

## 今日任务

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

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

## 项目记录与提交

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

```bash
git status
git diff
```

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

```bash
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 的规则放在同级。