无法跳到下一个曲目 - React-Native-Track-Player

Posted 2023-03-14

【中文标题】无法跳到下一个曲目 - React-Native-Track-Player

【英文标题】：Unable to skip to the next track - React-Native-Track-Player

【发布时间】：2020-12-15 15:05:33

【问题描述】：

我目前正在为我正在开发的一个应用程序创建一个播客播放器功能。但是，我遇到了这个错误，即将数组的 currentIndex 更新为下一个。这是我创建的用于测试播客播放器的数组

const [ episodes, setEpisodes ] = useState([
       
        id: 1,
        date: 'Today',
        title: 'Episode 10: Postcast 1',
        description: 'This is the podcast description',
        duration: '25 mins',
        image: require('../../../assets/images/podcast_image.jpg'),
        audio_url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
    ,
    
        id: 2,
        date: '10/11/2020',
        title: 'Episode 11: Postcast 2',
        description: 'This is the podcast description',
        duration: '25 mins',
        image: require('../../../assets/images/podcast_image.jpg'),
        audio_url: 'https://audio-previews.elements.envatousercontent.com/files/103682271/preview.mp3',
    ,
    
        id: 3,
        date: '10/11/2020',
        title: 'Episode 12: Postcast 3',
        description: 'This is the podcast description',
        duration: '25 mins',
        image: require('../../../assets/images/podcast_image.jpg'),
        audio_url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-16.mp3',
    
]);

然后我将 currentIndex 传递到下一个屏幕，以便它呈现正确的播客以及剧集和播客对象。

  <TouchableOpacity onPress=() => navigation.navigate("PodcastPlayer", 
      currentIndex: index,
      podcast: podcast,
      episodes: episodes,
  )>     

  var  currentIndex  = route.params;

这就是我在 TrackPlayer 中使用它的方式

const trackPlayerInit = async () => 
    await TrackPlayer.setupPlayer();
    TrackPlayer.updateOptions(
        stopWithApp: true,
        notificationCapabilities: [
            TrackPlayer.CAPABILITY_PLAY,
            TrackPlayer.CAPABILITY_PAUSE,
            TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
            TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
            TrackPlayer.CAPABILITY_STOP
        ],
        capabilities: [
            TrackPlayer.CAPABILITY_PLAY,
            TrackPlayer.CAPABILITY_PAUSE,
            TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
            TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
            TrackPlayer.CAPABILITY_STOP
        ],
        compactCapabilities: [
            TrackPlayer.CAPABILITY_PLAY,
            TrackPlayer.CAPABILITY_PAUSE
        ]
    );
    // After the track player has been set up, we can add to our playlist
    await TrackPlayer.add(
        id: episodes[currentIndex].id,
        url: episodes[currentIndex].audio_url,
        type: 'default',
        title: episodes[currentIndex].title,
        album: 'My Album',
        artist: 'Track Artist',
        artwork: 'https://picsum.photos/100'
    );
    return true;
;

当我跳过曲目时，它会在控制台中记录下一个曲目，但它不会在实际屏幕上更新，所以我不确定，我试图将 currentIndex 放入新状态并通过它更新它，以便在单击下一个按钮后重新呈现屏幕。但我没有运气。

这是我点击下一个曲目图标时调用的函数

  <TouchableOpacity style=styles.control onPress=() => handleNextTrack()>
       <Ionicons name='ios-skip-forward' size=30 color=Colours.type.dark_blue />
  </TouchableOpacity>

  handleNextTrack = async() => 

    currentIndex + 1;

    console.log(currentIndex);

    // setNextEpisode(currentIndex);
    
    // get the id of the current track
    let trackId = await TrackPlayer.getCurrentTrack();      
    
    TrackPlayer.skip(trackId);    

    console.log(trackId);

任何帮助将不胜感激！

【参考方案1】：

在你的 handleNextTrack 函数中试试这个：

currentIndex = currentIndex + 1; // instead of just currentIndex + 1;