如何自定义 React native track player 通知栏

Question

我正在使用 react-native-track-player 创建一个音乐应用程序。可以自定义通知区域、锁屏播放器吗？

我需要做的是更改背景颜色并为通知区域和锁屏播放选项添加自定义主题。有人可以告诉我怎么做吗？

以下是我用来启用曲目播放器选项的代码。我如何修改它来完成上述任务？或者是否有任何其他方法来执行自定义。非常感谢。

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,
      ],
    });
  } catch (e) {
    console.log(e);
  }
};

Answer 1

你不能从 javascript 至少现在开始，因为这个模块没有提供任何方法来定制它。为此，您需要更改本机文件以便对其进行自定义。您还可以查看 https://github.com/invertase/notifee 看看是否可以将其与轨道播放器一起使用。

Answer 2

可以进行一些自定义。

您可以更改通知中的背景颜色和图标，如下所述：http://react-native-track-player.js.org/documentation/#player-functions

您还可以为每首曲目指定插图，它可以很好地用作通知背景图片。

以上所有也会影响锁屏通知。示例用法：

const audioClipsArray = [{
    title: "Title",
    artist: "Artist",
    url: "./path/to/track.mp3",
    artwork: "./path/to/artwork.jpg"
}];

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,
      ],
      // Obviously, color property would not work if artwork is specified. It can be used as a fallback.
      color: 99410543
    });
  } catch (e) {
    console.log(e);
  }
};

如何自定义 React native track player 通知栏

How to customize React native track player notification bar

react-native

react-native-track-player