如何实现TouchableOpacity按下后禁用一分钟的功能？

你的代码存在两个核心问题：

• 用普通let声明的disable不是React状态，修改它不会触发组件重新渲染，按钮的禁用状态自然不会更新
• onPress里把disable设为false的逻辑完全反转，点击后需要禁用按钮，应该设为true

以下是正确的实现方案：

基础实现 #

用React的useState管理状态，配合setTimeout实现一分钟后恢复按钮可用：

import { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';

// 组件内部
const [isDisabled, setIsDisabled] = useState(false);

<TouchableOpacity
     style={styles.btnSolid}
     onPress={() => {
        // 执行你的业务逻辑
        resetUserPswd(auth, Email, navigation);
        // 点击后立即禁用按钮
        setIsDisabled(true);
        // 60秒后重新启用按钮
        setTimeout(() => {
            setIsDisabled(false);
        }, 60000);
     }}
     disabled={isDisabled}
>
    <Text style={styles.btnTextSolid}>Send Email</Text>
</TouchableOpacity>

进阶优化（避免内存泄漏） #

如果组件可能在一分钟内被卸载（比如用户跳转页面），需要清理定时器防止内存泄漏，用useRef保存定时器ID，配合useEffect清理：

import { useState, useRef, useEffect } from 'react';
import { TouchableOpacity, Text } from 'react-native';

// 组件内部
const [isDisabled, setIsDisabled] = useState(false);
const timerRef = useRef(null);

// 组件卸载时清除定时器
useEffect(() => {
    return () => {
        if (timerRef.current) {
            clearTimeout(timerRef.current);
        }
    };
}, []);

<TouchableOpacity
     style={styles.btnSolid}
     onPress={() => {
        resetUserPswd(auth, Email, navigation);
        setIsDisabled(true);
        // 保存定时器ID
        timerRef.current = setTimeout(() => {
            setIsDisabled(false);
        }, 60000);
     }}
     disabled={isDisabled}
>
    <Text style={styles.btnTextSolid}>Send Email</Text>
</TouchableOpacity>

内容的提问来源于stack exchange，提问作者Keval Shah