React Native录音按钮：用户未操作时60秒后自动停止录音实现

核心思路是在启动录音时设置一个60秒定时器，到期后自动触发停止逻辑，同时要在用户主动停止时清除定时器，避免重复执行。以下是具体实现步骤：

1. 维护定时器引用 #

需要一个变量保存定时器ID，确保组件重渲染时不会丢失引用：

• 函数组件用useRef
• 类组件用实例属性（比如this.timer）

2. 修改录音控制函数 #

以React Native函数组件为例，调整启动和停止录音的逻辑：

import { useState, useRef } from 'react';
import { Button } from 'react-native';

// 组件内部状态与定时器引用
const [recording, setRecording] = useState(false);
const timerRef = useRef(null);

const startRecording = () => {
  setRecording(true);
  // 启动60秒定时器，到期自动执行停止录音
  timerRef.current = setTimeout(() => {
    stopRecording();
  }, 60000);
  
  // 这里添加你的实际录音启动代码（比如调用录音库的start方法）
};

const stopRecording = () => {
  setRecording(false);
  // 清除定时器，防止用户主动停止后定时器仍触发
  if (timerRef.current) {
    clearTimeout(timerRef.current);
    timerRef.current = null;
  }
  
  // 这里添加你的实际录音停止代码（比如调用录音库的stop方法）
};

3. 原按钮组件保持不变 #

按钮的切换逻辑无需修改，依然根据recording状态切换标题和点击事件：

<Button 
  titleStyle={{color: "white",fontSize: 14, fontWeight: 500}}
  title={recording ? 'Stop Recording' : 'Start Recording'}
  onPress={recording ? stopRecording : startRecording}
/>

关键注意点 #

• 一定要在stopRecording中清除定时器，否则用户主动停止录音后，60秒到了定时器仍会触发停止逻辑，可能导致错误
• 如果是类组件，把timerRef.current换成this.timer即可，逻辑完全一致

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