如何自定义React Native Track Player通知栏与锁屏播放器

阿华AIGC实验室

2026-4-28

如何在react-native-track-player中自定义通知区域与锁屏播放器？

当然可以实现你的需求！react-native-track-player提供了灵活的配置项来定制通知区域和锁屏播放器，不过Android和iOS的实现细节略有差异，下面结合你的代码一步步说明修改方式：

一、基础跨平台自定义

你可以直接在updateOptions方法中添加通知相关的核心配置，比如修改通知背景色、自定义控制按钮图标等。修改后的代码如下：

const setUpTrackPlayer = async () => {
  try {
    await TrackPlayer.setupPlayer();
    await TrackPlayer.add(audioClipsArray);
    await TrackPlayer.updateOptions({
      stopWithApp: true,
      capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
        Capability.Stop,
      ],
      compactCapabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
      ],
      notificationCapabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
      ],
      // 新增：核心自定义配置项
      notificationColor: '#2c3e50', // 设置通知的背景/强调色（替换成你需要的十六进制颜色）
      icon: 'ic_custom_notif', // 通知栏小图标（需提前在Android的drawable目录添加资源）
      playIcon: 'ic_custom_play', // 自定义播放按钮图标
      pauseIcon: 'ic_custom_pause', // 自定义暂停按钮图标
      skipNextIcon: 'ic_custom_next', // 自定义下一曲按钮图标
      skipPreviousIcon: 'ic_custom_prev', // 自定义上一曲按钮图标
    });
  } catch (e) {
    console.log(e);
  }
};

二、Android平台：深度自定义通知布局

如果需要更复杂的自定义（比如完全重构通知的UI结构、自定义背景样式），Android支持通过原生XML布局实现：

在android/app/src/main/res/layout目录下创建自定义通知布局文件（比如custom_player_notification.xml），在其中定义你想要的背景、控件位置、文字样式等；
在updateOptions中添加以下配置启用自定义布局：

await TrackPlayer.updateOptions({
  // ... 原有配置
  notificationChannelId: 'your_music_channel_id', // 先创建专属通知渠道（Android 8.0+ 必需）
  customNotification: true, // 开启自定义通知布局模式
});

最后需要在Android原生代码中继承NotificationFactory类，加载你创建的自定义布局并绑定播放状态逻辑，具体可以参考库的Android自定义通知文档完成这一步。

三、iOS平台：自定义锁屏与控制中心

iOS的锁屏播放器依赖系统的Now Playing Center，你可以通过设置曲目元数据和权限来定制显示效果：

在添加曲目或更新播放状态时，设置更详细的元数据来优化锁屏显示：

await TrackPlayer.updateMetadataForTrack(trackIndex, {
  title: '你的歌曲标题',
  artist: '歌手名称',
  artwork: require('./assets/album-cover.jpg'), // 锁屏显示的封面图，会影响视觉主题
  // 可添加更多元数据如专辑名、歌词等
});

iOS的通知背景色通常跟随系统主题，但你可以通过调整封面图的色调来匹配你的应用风格；另外可以在updateOptions中通过nowPlayingInfoCapabilities控制锁屏显示的按钮选项。
别忘了在iOS项目的Info.plist中开启Background Modes里的Audio, AirPlay, and Picture in Picture权限，否则锁屏控制会失效。

四、额外注意事项

Android的通知图标必须是透明背景的矢量图，放在对应分辨率的drawable目录下；
如果需要极致自定义，Android还可以通过TrackPlayer.addEventListener监听播放状态，配合原生通知组件实现完全独立的自定义通知；
iOS的锁屏控制按钮样式受系统限制，无法完全自定义图标，但可以控制显示哪些按钮。

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