React Native Track Player单首歌曲播放实现问题求助

要实现单首歌曲播放、切换时终止旧歌曲的功能，核心是每次点击歌曲时重置播放队列，仅加载当前选中的曲目，而非追加到原有队列中。以下是具体修改方案：

1. 重构歌曲点击事件处理逻辑 #

原来的多首播放逻辑可能是直接调用add方法追加歌曲，现在改为重置队列后仅添加当前选中曲目：

import TrackPlayer from 'react-native-track-player';

// 歌曲列表项点击事件
const handleSongPress = async (selectedSong) => {
  // 清空原有播放队列并停止当前播放
  await TrackPlayer.reset();
  
  // 添加当前选中的单首歌曲到队列
  await TrackPlayer.add({
    id: selectedSong.id,
    url: selectedSong.audioUrl,
    title: selectedSong.title,
    artist: selectedSong.artist,
    // 按需添加其他歌曲元数据（如封面、时长等）
  });
  
  // 立即播放当前选中的歌曲
  await TrackPlayer.play();
};

2. 确保Track Player初始化配置正确 #

在应用入口完成基础初始化，保证播放状态可控：

// 在App.js或项目入口文件中执行初始化
const setupTrackPlayer = async () => {
  try {
    await TrackPlayer.setupPlayer();
    await TrackPlayer.updateOptions({
      stopWithApp: true,
      // 按需配置其他播放控制选项
    });
  } catch (error) {
    console.error('Track Player 初始化失败:', error);
  }
};

// 组件挂载时触发初始化，卸载时清理资源
useEffect(() => {
  setupTrackPlayer();
  return () => {
    TrackPlayer.destroy();
  };
}, []);

3. 可选：返回列表时暂停播放 #

如果需要从播放页返回列表时暂停当前歌曲，可在播放页的清理函数中添加暂停逻辑：

useEffect(() => {
  return () => {
    TrackPlayer.pause();
  };
}, []);

关键说明 #

• TrackPlayer.reset()是实现需求的核心：它会清空当前播放队列并终止正在播放的歌曲，确保切换曲目时旧歌曲不会继续播放。
• 避免使用TrackPlayer.add()直接追加歌曲，每次点击都重置队列后添加单首，保证播放队列始终只有当前选中的曲目。

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