react-native - 无法跳到下一个曲目

问题描述

我目前正在为我正在开发的一个应用程序创建一个播客播放器功能。但是，我遇到了这个错误，即将数组的 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);
}

任何帮助将非常感激！

标签： react-nativereact-native-track-player

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

问题描述

解决方案

推荐阅读