# 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`。

**页面被挡住：**优先让首页外层滚动，不要给卡片写固定高度。