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

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

预计用时：45～60 分钟。

今日目标

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

1. 准备活动数据

在首页定义数据：

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 推荐的长列表组件。最小写法如下：

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 前往详情：

import { router } from 'expo-router';

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

详情页通过 useLocalSearchParams 读取参数：

import { useLocalSearchParams } from 'expo-router';

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

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

今日任务：校园活动列表

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

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

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

验收标准

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

README.md Unescape Escape