feat: 前三日技术扫盲审查
This commit is contained in:
@@ -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`
|
||||
- [ ] 不同活动展示不同详情
|
||||
Reference in New Issue
Block a user