React Native中切换至下一页面时如何停止音频播放器？

方案1：利用组件卸载时的清理逻辑 #

当切换到下一页时，当前播放音频的组件会被卸载，你可以在useEffect中添加清理函数，在组件卸载时自动停止音频：

const [shallPlay, setPlay] = useState(true);

useEffect(() => {
  let isMounted = true; // 避免卸载后执行无效操作

  if (shallPlay) {
    try {
      SoundPlayer.playSoundFile("om_namo_venkateshaya", ".mp3");
    } catch (e) {
      console.log(`cannot play the sound file`, e);
    }
  } else {
    SoundPlayer.stop();
  }

  // 组件卸载时执行的清理逻辑
  return () => {
    SoundPlayer.stop();
    isMounted = false;
  };
}, [shallPlay]);

<TouchableOpacity
  onPress={() => {
    setPlay(!shallPlay);
  }}
>
  {/* 你的按钮内容 */}
</TouchableOpacity>

方案2：监听页面焦点变化（针对React Navigation场景） #

如果你的页面用React Navigation管理，即使组件未被卸载（比如栈导航中页面被压入栈底），也可以通过监听页面blur事件（页面失去焦点）来停止音频：

先导入导航相关hooks：

import { useFocusEffect } from '@react-navigation/native';

再添加焦点监听逻辑：

const [shallPlay, setPlay] = useState(true);

useEffect(() => {
  if (shallPlay) {
    try {
      SoundPlayer.playSoundFile("om_namo_venkateshaya", ".mp3");
    } catch (e) {
      console.log(`cannot play the sound file`, e);
    }
  } else {
    SoundPlayer.stop();
  }
}, [shallPlay]);

// 监听页面失去焦点事件
useFocusEffect(
  React.useCallback(() => {
    return () => {
      // 页面失去焦点时停止音频
      SoundPlayer.stop();
      // 可选：将播放状态重置为false
      setPlay(false);
    };
  }, [])
);

<TouchableOpacity
  onPress={() => {
    setPlay(!shallPlay);
  }}
>
  {/* 你的按钮内容 */}
</TouchableOpacity>

注意事项 #

• 确认你使用的SoundPlayer库支持stop()方法（从你的代码来看是支持的）
• 如果音频播放是全局场景（多页面共用播放器），建议将音频逻辑封装到全局状态管理（如Context、Redux）中，统一控制播放状态

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