arthur
93 lines
2.5 KiB
Markdown
93 lines
2.5 KiB
Markdown
# 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`
|
||
- [ ] 不同活动展示不同详情
|