# Day_6：列表与导航——从一个页面到一个小应用

> 今天第一次制作“列表页 → 详情页”。

预计用时：45～60 分钟。

## 今日目标

- 使用数组保存列表数据
- 用 `FlatList` 高效渲染列表
- 使用 Expo Router 的 `Link` 或 `router.push` 跳转
- 在详情页读取路由参数

## 1. 准备活动数据

在首页定义数据：

```tsx
const activities = [
  { id: '1', title: 'APP 部新人培训', time: '周五 19:00', place: '信息学院' },
  { id: '2', title: '程序设计比赛', time: '周六 14:00', place: '教学楼' },
  { id: '3', title: '社团招新宣讲', time: '周日 18:30', place: '大学生活动中心' },
];
```

每一项都是对象，`id` 用来识别活动，其他字段是要显示的信息。

## 2. 使用 FlatList

`FlatList` 是 React Native 推荐的长列表组件。最小写法如下：

```tsx
import { FlatList, Text, View } from 'react-native';

<FlatList
  data={activities}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <View>
      <Text>{item.title}</Text>
      <Text>{item.time} · {item.place}</Text>
    </View>
  )}
/>
```

## 3. 创建详情页

Expo Router 模板中，为活动详情新建 `app/activity/[id].tsx`。`[id]` 表示 URL 中可变的参数，例如 `/activity/2`。

首页可用 `router.push` 前往详情：

```tsx
import { router } from 'expo-router';

router.push({ pathname: '/activity/[id]', params: { id: item.id } });
```

详情页通过 `useLocalSearchParams` 读取参数：

```tsx
import { useLocalSearchParams } from 'expo-router';

const { id } = useLocalSearchParams<{ id: string }>();
```

根据 `id` 从活动数组中查找对应数据，再展示标题、时间、地点与介绍。页面返回按钮由 Expo Router 的 Stack 默认提供；若没有，请检查根布局是否使用了 `Stack`。

## 今日任务：校园活动列表

完成首页活动列表和活动详情页：

```text
首页
 ├─ APP 部新人培训
 ├─ 程序设计比赛
 └─ 社团招新宣讲
          ↓
       活动详情
```

详情页至少显示活动名称、时间、地点、活动介绍。点击不同活动，必须显示不同内容。

## 验收标准

- [ ] 首页至少显示 3 条活动
- [ ] 使用 `FlatList`
- [ ] 每个列表项都有稳定的 `id`
- [ ] 点击列表项能跳到详情页
- [ ] 使用 `router.push`（或 `Link`）传递 `id`
- [ ] 详情页用 `useLocalSearchParams` 读取 `id`
- [ ] 不同活动展示不同详情