arthur
109 lines
4.2 KiB
Markdown
109 lines
4.2 KiB
Markdown
# Day_5：让页面回应点击——学习打卡
|
||
|
||
> 今天只给昨天的项目增加一项能力：点击按钮，数字和提示文字会变化。
|
||
|
||
预计用时：40～60 分钟。
|
||
|
||
## 今天要理解什么
|
||
|
||
- `Pressable` 是可点击的区域，`onPress` 指定点击时运行的函数。
|
||
- `useState` 保存会变化的界面数据；调用更新函数后，React 会重新显示页面。
|
||
- 新功能要接在昨天的首页上，而不是另建一个 Expo 项目。
|
||
|
||
## 1. 从昨天的仓库继续
|
||
|
||
进入 Day_3 的 `app-rookie-你的名字` 仓库，也就是 Day_4 已经可以启动 Expo 的目录：
|
||
|
||
```bash
|
||
pwd
|
||
git status
|
||
git pull
|
||
npx expo start
|
||
```
|
||
|
||
先确认昨天的个人信息仍能显示。若 `git status` 有未提交修改，先弄清来源再继续，不要直接覆盖。
|
||
|
||
## 2. 写一个会变化的组件
|
||
|
||
先把下面三件事记住：普通变量改了以后，React 不一定会重新显示页面；`useState` 会同时提供“当前值”和“更新值的函数”；调用更新函数后，React 会重新渲染使用这个值的界面。
|
||
|
||
在 Day_4 的 `components/` 旁边新建 `CheckInCard.tsx`：
|
||
|
||
```tsx
|
||
import { useState } from 'react';
|
||
import { Pressable, StyleSheet, Text, View } from 'react-native';
|
||
|
||
export default function CheckInCard() {
|
||
const [count, setCount] = useState(0);
|
||
|
||
return (
|
||
<View style={styles.card}>
|
||
<Text style={styles.title}>学习打卡</Text>
|
||
<Text>今天完成了 {count} 次学习</Text>
|
||
<Text>{count === 0 ? '从一次尝试开始吧' : '继续保持！'}</Text>
|
||
|
||
<Pressable
|
||
style={styles.button}
|
||
onPress={() => setCount((current) => current + 1)}
|
||
>
|
||
<Text style={styles.buttonText}>完成一次</Text>
|
||
</Pressable>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
card: { marginTop: 16, padding: 20, borderRadius: 16, backgroundColor: '#ffffff' },
|
||
title: { marginBottom: 12, fontSize: 20, fontWeight: '700' },
|
||
button: { marginTop: 16, padding: 14, borderRadius: 10, backgroundColor: '#2563eb' },
|
||
buttonText: { color: '#ffffff', textAlign: 'center', fontWeight: '700' },
|
||
});
|
||
```
|
||
|
||
`count` 是当前值，`setCount` 负责更新。`current => current + 1` 表示“在上一次的值上加一”。把 `CheckInCard` 导入昨天的首页，放在 `ProfileCard` 下方；导入路径沿用 Day_4 的表，只把文件名改成 `CheckInCard`。
|
||
|
||
这里的方括号不是数组练习，而是一次取出两个值：第一个是当前次数 `count`，第二个是修改它的函数 `setCount`。不要直接写 `count = count + 1`；在 React 中应使用 `setCount(...)`。
|
||
|
||
## 今日任务
|
||
|
||
1. 点击“完成一次”，数字加 1，提示文字从“从一次尝试开始吧”变成“继续保持！”。
|
||
2. 自己增加“重置”按钮，点击后数字回到 0。
|
||
3. 次数达到 3 时，再显示一句你写的鼓励语。
|
||
4. 原有个人信息卡片不能消失；在小屏手机上也能看见按钮。
|
||
|
||
提示：重置使用 `setCount(0)`；条件显示可以参考 `count >= 3 && <Text>……</Text>`。今天的数据只在应用运行期间保留，重新打开后归零是正常的，还没有学习本地存储。
|
||
|
||
## 项目记录
|
||
|
||
在项目 README 的“学习记录”中，用两句话写清楚：今天增加了什么功能，以及 `count` 与普通变量有什么区别。提交前执行：
|
||
|
||
```bash
|
||
git status
|
||
git diff
|
||
```
|
||
|
||
逐个暂存今天改动的首页、`CheckInCard.tsx` 和 README，然后：
|
||
|
||
```bash
|
||
git commit -m "feat: add study check-in"
|
||
git push
|
||
git log --oneline -4
|
||
```
|
||
|
||
## 验收标准
|
||
|
||
- [ ] 在 Day_4 的同一个应用中完成，个人信息卡片仍可见
|
||
- [ ] 点击增加、重置、达到 3 次的提示都正确
|
||
- [ ] 能指出组件里哪一行定义 state、哪一行处理点击
|
||
- [ ] README 有当天学习记录，Git 历史保留 Day_4 的提交
|
||
|
||
提交：0 次和 3 次时的截图，以及包含 Day_4、Day_5 的 Git 历史截图。
|
||
|
||
## 遇到问题
|
||
|
||
**一打开页面就自动加一：**`onPress` 要接收函数，不要写成立即执行的函数调用。
|
||
|
||
**提示文字不变化：**检查页面显示的是否是 `count`，以及按钮是否调用了 `setCount`。
|
||
|
||
**页面被挡住：**优先让首页外层滚动，不要给卡片写固定高度。
|