React Native中TouchableOpacity实现语音播放/停止切换功能问题

要实现点击按钮在“播放语音”和“停止语音”之间循环切换，核心是通过状态管理跟踪当前播放状态，再根据状态触发对应操作，同时同步播放结束后的状态，避免状态和实际播放情况不一致。

完整解决方案代码 #

import { useState } from 'react';
import { View, TouchableOpacity, Image } from 'react-native';
import { Divider } from '@react-native-material/core'; // 按你的实际组件库调整
import * as Speech from 'expo-speech';

export default function SpeechComponent() {
  // 状态跟踪当前是否正在播放语音
  const [isSpeaking, setIsSpeaking] = useState(false);

  const handleSpeechToggle = () => {
    if (isSpeaking) {
      // 当前正在播放，点击触发停止操作
      Speech.stop();
      setIsSpeaking(false);
    } else {
      // 当前未播放，点击触发朗读操作
      Speech.speak('你需要朗读的文本内容', {
        // 播放结束后自动重置状态
        onDone: () => setIsSpeaking(false),
        // 播放出错时也同步重置状态
        onError: () => setIsSpeaking(false),
      });
      setIsSpeaking(true);
    }
  };

  return (
    <View>
      <TouchableOpacity onPress={handleSpeechToggle}>
        <Divider style={styles.modalDivider} />
        {/* 可选：根据播放状态切换图标，提升用户直观体验 */}
        <Image
          style={styles.speaker}
          source={
            isSpeaking
              ? require('../../assets/pause-speaker.png') // 暂停状态图标
              : require('../../assets/speaker.png') // 播放状态图标
          }
        />
      </TouchableOpacity>
    </View>
  );
}

// 你的样式定义
const styles = {
  modalDivider: {
    // 自定义分割线样式
  },
  speaker: {
    width: 40,
    height: 40,
    // 其他图标样式
  },
};

关键逻辑说明 #

• 状态跟踪：用useState创建isSpeaking变量，记录当前播放状态，初始值设为false（未播放）。
• 点击事件处理：handleSpeechToggle函数根据isSpeaking的值，判断执行播放或停止操作，并同步更新状态。
• 状态同步：在Speech.speak的配置中添加onDone和onError回调，确保语音播放完成或出错时，自动将isSpeaking重置为false，避免状态和实际播放情况脱节。
• UI反馈（可选）：根据isSpeaking切换按钮图标，让用户一眼就能分辨当前是“可播放”还是“可停止”状态。

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