React Native无按压释放事件（类JS mouseup），长按录音按钮实现遇阻

嘿，我懂你想要的效果——按下按钮立刻开始录音，松开就停止对吧？其实你要找的“按压释放触发”事件，React Native的Touchable组件里是有的，只是名字不是onPressRelease，而是**onPressOut**，搭配onPressIn就能完美实现你的需求！

核心思路 #

React Native的Touchable系列组件（包括TouchableHighlight、TouchableOpacity）都提供了两个关键事件：

• onPressIn：用户手指按下组件的瞬间触发，刚好用来启动录音
• onPressOut：用户手指离开组件的瞬间触发，用来停止录音

基础实现代码 #

直接替换你原来的代码就行：

class RecordButton extends React.Component {
  // 启动录音
  recordStart = () => {
    console.log("开始录音");
    // 在这里添加你的录音启动逻辑，比如调用录音API
  };

  // 停止录音
  recordStop = () => {
    console.log("停止录音");
    // 在这里添加你的录音停止逻辑，比如保存录音文件
  };

  render() {
    return (
      <TouchableHighlight 
        onPressIn={this.recordStart} 
        onPressOut={this.recordStop}
      >
        <Image source={recordIcon} />
      </TouchableHighlight>
    );
  }
}

优化：避免短按误触 #

如果担心用户不小心轻点按钮就触发录音，可以加个定时器做延迟判断——只有长按超过一定时长（比如150ms）才启动录音，短按直接取消：

class RecordButton extends React.Component {
  pressTimer = null;
  isRecording = false;

  recordStart = () => {
    // 延迟150ms启动录音，过滤短按操作
    this.pressTimer = setTimeout(() => {
      this.isRecording = true;
      console.log("开始录音");
      // 执行录音启动逻辑
    }, 150);
  };

  recordStop = () => {
    // 先清除定时器，避免短按误触发
    clearTimeout(this.pressTimer);
    // 只有已经开始录音的情况下，才执行停止逻辑
    if (this.isRecording) {
      this.isRecording = false;
      console.log("停止录音");
      // 执行录音停止逻辑
    }
  };

  render() {
    return (
      <TouchableHighlight 
        onPressIn={this.recordStart} 
        onPressOut={this.recordStop}
      >
        <Image source={recordIcon} />
      </TouchableHighlight>
    );
  }
}

这样就能完美实现你想要的“长按录音”效果啦，onPressIn和onPressOut就是你要找的按压/释放事件哦～

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