Day_5：让页面回应点击——学习打卡

今天只给昨天的项目增加一项能力：点击按钮，数字和提示文字会变化。

预计用时：40～60 分钟。

今天要理解什么

Pressable 是可点击的区域，onPress 指定点击时运行的函数。
useState 保存会变化的界面数据；调用更新函数后，React 会重新显示页面。
新功能要接在昨天的首页上，而不是另建一个 Expo 项目。

1. 从昨天的仓库继续

进入 Day_3 的 app-rookie-你的名字 仓库，也就是 Day_4 已经可以启动 Expo 的目录：

pwd
git status
git pull
npx expo start

先确认昨天的个人信息仍能显示。若 git status 有未提交修改，先弄清来源再继续，不要直接覆盖。

2. 写一个会变化的组件

先把下面三件事记住：普通变量改了以后，React 不一定会重新显示页面；useState 会同时提供“当前值”和“更新值的函数”；调用更新函数后，React 会重新渲染使用这个值的界面。

在 Day_4 的 components/ 旁边新建 CheckInCard.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，提示文字从“从一次尝试开始吧”变成“继续保持！”。
自己增加“重置”按钮，点击后数字回到 0。
次数达到 3 时，再显示一句你写的鼓励语。
原有个人信息卡片不能消失；在小屏手机上也能看见按钮。

提示：重置使用 setCount(0)；条件显示可以参考 count >= 3 && <Text>……</Text>。今天的数据只在应用运行期间保留，重新打开后归零是正常的，还没有学习本地存储。

项目记录

在项目 README 的“学习记录”中，用两句话写清楚：今天增加了什么功能，以及 count 与普通变量有什么区别。提交前执行：

git status
git diff

逐个暂存今天改动的首页、CheckInCard.tsx 和 README，然后：

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。

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

README.md Unescape Escape