iOS端React Native Track Player Native Module缺失问题

核心问题分析 #

报错new NativeEventEmitter() requires a non-null argument是因为RNTP的原生模块未正确链接，导致NativeModules.TrackPlayerModule为undefined，同时你的播放服务代码存在语法和逻辑错误，也会影响模块初始化。

具体修复步骤 #

1. 修复播放服务的代码错误 #

你的playback-service.js存在两处关键错误：

• 导出方式错误：不需要嵌套返回async函数，直接导出服务执行函数
• updateOptions参数格式错误：应该传入对象而非数组

修正后的代码：

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

module.exports = async function () {
  // 注册远程控制事件
  TrackPlayer.addEventListener('remote-play', () => TrackPlayer.play());
  TrackPlayer.addEventListener('remote-pause', () => TrackPlayer.pause());
  TrackPlayer.addEventListener('remote-next', () => TrackPlayer.skipToNext());
  TrackPlayer.addEventListener('remote-previous', () => TrackPlayer.skipToPrevious());
  TrackPlayer.addEventListener('playback-buffering', (event) => {
    console.log('Buffering...', event.isBuffering);
  });

  // 更新播放器配置（注意是对象格式）
  await TrackPlayer.updateOptions({
    capabilities: [
      Capability.Play,
      Capability.Pause,
      Capability.SkipToNext,
      Capability.SkipToPrevious,
      Capability.JumpForward,
      Capability.JumpBackward,
      Capability.SeekTo
    ]
  });

  TrackPlayer.setPlayWhenReady(true);
};

2. 修正播放器初始化逻辑 #

确保注册服务和初始化的异步顺序正确，使用async/await处理：

useEffect(() => {
  const initPlayer = async () => {
    // 先注册播放服务
    TrackPlayer.registerPlaybackService(() => require('./playback-service.js'));
    // 再初始化播放器
    await TrackPlayer.setupPlayer();
  };

  initPlayer();
}, []);

3. 确保原生模块正确链接 #

iOS端

• 删除ios/Pods目录和ios/Podfile.lock文件
• 执行cd ios && pod install --repo-update
• 重启Xcode和Metro服务

Android端

• 检查android/settings.gradle是否包含以下配置：

  include ':react-native-track-player'
  project(':react-native-track-player').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-track-player/android')
  

• 检查android/app/build.gradle的dependencies中是否有：

  implementation project(':react-native-track-player')
  

• 执行cd android && ./gradlew clean，然后重启Metro服务

4. 清理项目缓存 #

执行以下命令清理RN缓存，避免旧缓存干扰：

npx react-native clean

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