第 5 课：useState与点击计数

日期：2026-09-04
课程序号：第 5 课
知识点：组件状态与更新函数

用途

让 Pressable 点击次数显示在页面上。

核心概念

useState 在组件顶层声明；onPress 用更新函数推进计数。该值只是本页练习交互，不是服务端记录。

最小代码或操作示例

jsx

import { useState } from "react";
import { Pressable, Text, View } from "react-native";
export default function App() {
  const [count, setCount] = useState(0);
  return <View style={{ padding: 24, marginTop: 40 }}>
    <Text>练习 {count} 次</Text>
    <Pressable accessibilityRole="button"
      onPress={() => setCount(c => c + 1)} style={{ padding: 16 }}>
      <Text>增加一次</Text>
    </Pressable>
  </View>;
}

3～5 分钟练习

增加第二个 Pressable，点击将次数恢复为 0。

参考答案

重置按钮使用 onPress={() => setCount(0)}；先点三次增加，应显示 3，重置后为 0。

与上一课的联系

上一课的 Pressable 只弹提示，本课将点击转为可渲染的本地状态。