如何在Expo（SDK>49，使用Expo Router）中实现React Native Track Player并解决相关错误

嘿，我完全理解你的困扰！在Expo Router取代传统根组件后，确实找不到原来那种直接在注册根组件后初始化Track Player的地方了，我之前也踩过这个坑，还好找到了解决办法，下面一步步来帮你搞定：

你遇到的cannot read property capability of null trackplayer错误，本质是Track Player还没完成初始化就被调用了——在Expo Router架构下，我们需要找对初始化的时机，而这个时机就是Expo Router的_app.tsx（或_app.jsx）文件，它是应用的根组件入口，所有页面都会经过这里。

步骤1：正确安装并配置依赖 #

首先确保你已经安装了React Native Track Player：

npm install react-native-track-player
# 或者用yarn
yarn add react-native-track-player

然后在你的app.json（或app.config.js）中，把Track Player添加到Expo插件数组里，确保Expo能正确处理它的原生配置：

{
  "expo": {
    // 其他配置...
    "plugins": [
      "react-native-track-player"
    ]
  }
}

步骤2：在_app.tsx中初始化Track Player #

打开app/_app.tsx，这是我们初始化播放器的最佳位置。用React的useEffect钩子在组件挂载后执行初始化操作，这样能确保播放器在任何页面渲染前准备好：

import { useEffect, useState } from 'react';
import { Stack } from 'expo-router';
import TrackPlayer from 'react-native-track-player';

export default function RootLayout() {
  // 可以用一个状态来标记播放器是否准备好
  const [playerInitialized, setPlayerInitialized] = useState(false);

  useEffect(() => {
    const setupPlayer = async () => {
      try {
        // 初始化播放器核心
        await TrackPlayer.setupPlayer();
        // 配置播放器的能力（比如播放、暂停、切歌等）
        await TrackPlayer.updateOptions({
          capabilities: [
            TrackPlayer.Capability.Play,
            TrackPlayer.Capability.Pause,
            TrackPlayer.Capability.SkipToNext,
            TrackPlayer.Capability.SkipToPrevious,
            TrackPlayer.Capability.Stop,
          ],
          // 可选：配置锁屏控制、通知栏样式等
          compactCapabilities: [
            TrackPlayer.Capability.Play,
            TrackPlayer.Capability.Pause,
          ],
        });
        setPlayerInitialized(true);
        console.log('Track Player初始化成功！');
      } catch (error) {
        console.error('Track Player初始化失败：', error);
      }
    };

    setupPlayer();

    // 组件卸载时销毁播放器，避免内存泄漏
    return () => {
      TrackPlayer.destroy();
    };
  }, []);

  return <Stack />;
}

步骤3：在页面中安全调用Track Player方法 #

现在在任何页面中，你都可以调用Track Player的方法了，但为了保险起见，最好先检查播放器是否已经初始化，比如在播放页面：

import { useEffect } from 'react';
import { View, Button } from 'react-native';
import TrackPlayer from 'react-native-track-player';

export default function PlayerScreen() {
  useEffect(() => {
    const loadAndPlayTrack = async () => {
      // 先确认播放器已经初始化
      const isReady = await TrackPlayer.isInitialized();
      if (!isReady) {
        console.log('播放器还未初始化，重新尝试...');
        await TrackPlayer.setupPlayer();
      }

      // 添加曲目到播放器
      await TrackPlayer.add({
        id: 'track-1',
        url: 'https://your-audio-url.mp3',
        title: '我的歌曲',
        artist: '歌手名字',
        artwork: 'https://your-album-art-url.jpg',
      });

      // 开始播放
      await TrackPlayer.play();
    };

    loadAndPlayTrack();

    // 页面卸载时暂停播放
    return () => {
      TrackPlayer.pause();
    };
  }, []);

  return (
    // 这里放你的播放器UI组件，比如播放按钮、进度条等
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="暂停" onPress={() => TrackPlayer.pause()} />
      <Button title="播放" onPress={() => TrackPlayer.play()} />
    </View>
  );
}

常见问题排查 #

如果还是遇到错误，可以试试这些方法：

• 清除Expo缓存：运行npx expo start --clear，然后重新启动项目
• 确认react-native-track-player的版本和你的Expo SDK版本兼容
• 检查是否在调用TrackPlayer的方法前，setupPlayer已经完成（可以用我们上面的playerInitialized状态来控制页面渲染逻辑）

这样应该就能解决你遇到的cannot read property capability of null错误啦！

备注：内容来源于stack exchange，提问作者user3118363