react-native-track-player重复初始化报错：如何确保setupPlayer仅执行一次

方案一：全局初始化播放器（推荐） #

把播放器的初始化逻辑放到App根组件中，确保整个应用生命周期内只执行一次setupPlayer，模态框组件仅负责曲目加载和播放控制。

根组件示例代码：

import TrackPlayer from 'react-native-track-player';
import { Capability } from 'react-native-track-player';
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const initGlobalPlayer = async () => {
      try {
        await TrackPlayer.setupPlayer();
        await TrackPlayer.updateOptions({
          capabilities: [
            Capability.Play,
            Capability.Pause,
            Capability.SkipToNext,
            Capability.SkipToPrevious
          ],
        });
      } catch (error) {
        console.log('播放器初始化失败:', error);
      }
    };
    initGlobalPlayer();
  }, []);

  // 渲染导航容器等内容
  return (
    // 你的App结构
  );
}

export default App;

模态框组件代码修改：

useEffect(() => {
  const loadAndPlayTracks = async () => {
    // 直接操作曲目，无需再次初始化播放器
    await TrackPlayer.add(podcasts);
    await gettrackdata();
    await TrackPlayer.play();
  };
  loadAndPlayTracks();

  // 可选：离开模态框时暂停播放，按需清理曲目
  return () => {
    TrackPlayer.pause();
    // 如果需要每次打开模态框加载新曲目，可移除现有曲目
    // TrackPlayer.removeUpcoming();
  };
}, []);

方案二：在模态框内标记初始化状态 #

通过useRef维护一个初始化标记，确保setupPlayer只执行一次，后续打开模态框时跳过初始化步骤，直接处理曲目。

修改后的模态框组件代码：

import { useEffect, useRef } from 'react';
import TrackPlayer from 'react-native-track-player';
import { Capability } from 'react-native-track-player';

// ... 其他组件代码

const isPlayerInitialized = useRef(false);

useEffect(() => {
  setupPlayer();
}, []);

const setupPlayer = async() => {
  // 已初始化则直接处理曲目
  if (isPlayerInitialized.current) {
    await TrackPlayer.add(podcasts);
    await gettrackdata();
    await TrackPlayer.play();
    return;
  }

  try {
    await TrackPlayer.setupPlayer();
    await TrackPlayer.updateOptions({
      capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious
      ],
    });

    // 标记为已初始化
    isPlayerInitialized.current = true;

    await TrackPlayer.add(podcasts);
    await gettrackdata();
    await TrackPlayer.play();
  } catch (error) {
    console.log(error);
  }
};

// ... 其他组件代码

问题原因说明 #

react-navigation的模态框每次打开都会重新挂载组件，你原来的代码中useEffect空数组回调会在每次组件挂载时执行setupPlayer，而react-native-track-player的setupPlayer方法在整个应用生命周期内只能调用一次，重复调用就会抛出"The player has already been initialized via setupPlayer"错误。

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