feat: 前三日技术扫盲审查

This commit is contained in:
arthur
2026-09-18 12:16:12 +08:00
parent 3284e63e89
commit 9b7ab80fc1
8 changed files with 35 additions and 418 deletions
-92
View File
@@ -1,92 +0,0 @@
# 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`
- [ ] 不同活动展示不同详情