React Native基础倒计时函数实现求助：点击播放启动倒计时

嘿，我来帮你搞定这个点击播放按钮启动的基础倒计时功能！结合你给出的代码片段，我把完整的实现逻辑整理好了，你可以直接参考复用：

完整代码示例 #

import React, { useState, useEffect } from 'react';
import { Grid, Row, Col, Image, Text, View, TouchableOpacity, StyleSheet } from 'react-native';

const CountdownComponent = () => {
  // 倒计时状态：剩余秒数，初始设为60秒，你可以按需调整
  const [remainingSeconds, setRemainingSeconds] = useState(60);
  // 标记倒计时是否正在运行
  const [isCounting, setIsCounting] = useState(false);
  // 定时器引用，用于后续清理避免内存泄漏
  let timerRef = null;

  // 核心倒计时逻辑：每秒更新剩余时间
  useEffect(() => {
    if (isCounting && remainingSeconds > 0) {
      timerRef = setInterval(() => {
        setRemainingSeconds(prev => prev - 1);
      }, 1000);
    } else if (remainingSeconds === 0) {
      // 倒计时结束后的操作，比如重置状态或触发其他业务逻辑
      setIsCounting(false);
    }

    // 组件卸载或状态变更时清理定时器
    return () => clearInterval(timerRef);
  }, [isCounting, remainingSeconds]);

  // 点击播放按钮触发的启动方法
  const startCountdown = () => {
    // 避免重复触发，若需要每次点击都重置倒计时，可添加 setRemainingSeconds(60)
    if (!isCounting) {
      setIsCounting(true);
    }
  };

  return (
    <Grid>
      <Row>
        <Col style={styles.col_exercise}>
          <Image 
            source={require('../../assets/images/done.png')} 
            resizeMode="contain" 
            style={styles.icon_videoexercise} 
          />
          <Text style={styles.titlecol_exercise}>Done</Text>
        </Col>
        <Col style={styles.col_exercise}>
          {/* 倒计时显示容器 */}
          <View style={{borderWidth: 2, borderColor: '#ccc', borderRadius: 8, padding: 10}}>
            <Text style={{fontSize: 20, fontWeight: 'bold'}}>
              {/* 格式化时间为 分:秒 格式，补零保证显示规范 */}
              {Math.floor(remainingSeconds / 60).toString().padStart(2, '0')}:
              {(remainingSeconds % 60).toString().padStart(2, '0')}
            </Text>
          </View>
          {/* 播放控制按钮 */}
          <TouchableOpacity 
            style={styles.playButton}
            onPress={startCountdown}
            disabled={isCounting} // 倒计时中禁用按钮，可选
          >
            <Text style={styles.playButtonText}>
              {isCounting ? '倒计时中' : '开始'}
            </Text>
          </TouchableOpacity>
        </Col>
      </Row>
    </Grid>
  );
};

const styles = StyleSheet.create({
  col_exercise: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 10,
  },
  icon_videoexercise: {
    width: 50,
    height: 50,
    marginBottom: 5,
  },
  titlecol_exercise: {
    fontSize: 16,
  },
  playButton: {
    marginTop: 15,
    backgroundColor: '#2196F3',
    paddingHorizontal: 20,
    paddingVertical: 10,
    borderRadius: 5,
  },
  playButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '500',
  },
});

export default CountdownComponent;

关键细节说明 #

• 状态管理：用useState维护剩余时间和倒计时运行状态，确保UI能实时响应状态变化。
• 定时器控制：通过useEffect监听状态变化来启动/停止定时器，同时在组件卸载时清理定时器，避免内存泄漏。
• 交互优化：按钮根据倒计时状态显示不同文本，还可选择禁用按钮防止重复触发，提升用户体验。
• 时间格式化：用padStart(2, '0')把单个数字的分/秒补成两位，让显示更规范美观。

你可以根据需求调整初始倒计时时长、按钮样式，或者在倒计时结束后添加提示音、页面跳转等自定义逻辑～

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