init
This commit is contained in:
+100
@@ -0,0 +1,100 @@
|
||||
# Day_7:综合小测——CampusHelper
|
||||
|
||||
> 把前六天学到的东西真正组合成一个 React Native 应用。
|
||||
|
||||
预计用时:60~90 分钟。
|
||||
|
||||
今天可以查阅前面的 README、官方文档、报错信息或 AI;但请确保你知道提交的代码大致在做什么。
|
||||
|
||||
## 最终任务
|
||||
|
||||
完成 CampusHelper,至少包含:
|
||||
|
||||
```text
|
||||
首页
|
||||
├─ 个人信息卡片
|
||||
├─ 学习打卡计数器
|
||||
└─ 校园活动列表
|
||||
↓
|
||||
活动详情
|
||||
└─ 报名状态切换
|
||||
```
|
||||
|
||||
## 功能要求
|
||||
|
||||
### 1. 个人信息卡片
|
||||
|
||||
首页显示姓名、专业、APP 部新人身份和学习方向。
|
||||
|
||||
### 2. 学习打卡
|
||||
|
||||
显示当前次数,提供 `+1`、`-1`、重置按钮;次数不能小于 0。
|
||||
|
||||
### 3. 活动列表
|
||||
|
||||
至少三条活动,每条展示名称、时间和地点。请使用 `FlatList`。
|
||||
|
||||
### 4. 活动详情
|
||||
|
||||
点击活动进入详情页,展示标题、时间、地点和介绍。不同活动必须显示不同内容。
|
||||
|
||||
### 5. 报名按钮
|
||||
|
||||
详情页增加可切换状态的按钮:
|
||||
|
||||
```text
|
||||
[ 报名活动 ] ↔ [ 已报名 ]
|
||||
```
|
||||
|
||||
参考实现:
|
||||
|
||||
```tsx
|
||||
const [joined, setJoined] = useState(false);
|
||||
|
||||
<Pressable onPress={() => setJoined((current) => !current)}>
|
||||
<Text>{joined ? '已报名' : '报名活动'}</Text>
|
||||
</Pressable>
|
||||
```
|
||||
|
||||
## 最低验收标准
|
||||
|
||||
- [ ] 项目能通过 `npx expo start` 正常运行
|
||||
- [ ] 至少有首页和活动详情页两个页面
|
||||
- [ ] 使用 `View`、`Text`、`StyleSheet`
|
||||
- [ ] 使用 `useState`
|
||||
- [ ] 使用 `Pressable` 和 `onPress`
|
||||
- [ ] 使用 `FlatList`
|
||||
- [ ] 使用 Expo Router 页面跳转并传递参数
|
||||
- [ ] 有一个能改变状态的报名按钮
|
||||
- [ ] 页面有基本样式且没有明显红色报错
|
||||
|
||||
## Git 要求
|
||||
|
||||
完成项目后,在项目目录执行:
|
||||
|
||||
```bash
|
||||
git status
|
||||
git add .
|
||||
git commit -m "feat: finish CampusHelper React Native app"
|
||||
git push
|
||||
git log --oneline
|
||||
```
|
||||
|
||||
## 项目 README
|
||||
|
||||
为你的项目添加 `README.md`,写明:项目名称、已完成功能、你学到的 React Native 知识点,以及启动方式:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npx expo start
|
||||
```
|
||||
|
||||
## 提交内容
|
||||
|
||||
在 Day_7 工单提交首页截图、活动详情截图、Git 提交记录截图,以及一句你在这七天中收获最大或最难理解的知识点。
|
||||
|
||||
## Bonus
|
||||
|
||||
- 用 `AsyncStorage` 持久化报名状态;
|
||||
- 设计自己的色彩、卡片和按钮风格;
|
||||
- 增加 Todo、课程表、失物招领等一个新页面。
|
||||
Reference in New Issue
Block a user