React Native Track Player能否与React Native Video搭配实现音乐通知及控制？求示例代码

1. React Native Track Player 能否与 React Native Video 搭配使用？ #

可以搭配使用。rn-track-player 主要负责系统媒体通知、全局播放控制（锁屏/控制中心）、音频焦点管理，React Native Video 则负责视频内容的渲染与播放逻辑。只需同步两者的播放状态（播放/暂停、进度），就能保证通知显示状态和实际视频播放状态一致，同时解决旧库进度条失效的问题。

2. 代码示例 #

第一步：安装依赖 #

# 使用yarn
yarn add react-native-track-player react-native-video
# 或使用npm
npm install react-native-track-player react-native-video --save

iOS 需额外执行 pod 安装：

cd ios && pod install && cd ..

第二步：初始化 rn-track-player #

在项目入口文件（如App.js）中初始化播放器服务：

import TrackPlayer from 'react-native-track-player';

TrackPlayer.setupPlayer().then(() => {
  TrackPlayer.updateOptions({
    stopWithApp: false,
    // 控制中心/锁屏支持的操作
    capabilities: [
      TrackPlayer.CAPABILITY_PLAY,
      TrackPlayer.CAPABILITY_PAUSE,
      TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
      TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
      TrackPlayer.CAPABILITY_SEEK_TO, // 支持进度条拖动
    ],
    // 精简通知栏支持的操作
    compactCapabilities: [
      TrackPlayer.CAPABILITY_PLAY,
      TrackPlayer.CAPABILITY_PAUSE,
      TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
      TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
    ],
  });
});

第三步：组件集成实现功能 #

import React, { useState, useEffect, useRef } from 'react';
import { View } from 'react-native';
import Video from 'react-native-video';
import TrackPlayer from 'react-native-track-player';

const VideoPlayer = ({ title, author, thumbnail, IsLive, IsOfflineMode }) => {
  const [isPlaying, setIsPlaying] = useState(false);
  const videoRef = useRef(null);
  
  // 监听系统播放控制事件
  useEffect(() => {
    const bindListeners = () => {
      // 系统通知触发播放
      TrackPlayer.addEventListener('play', () => {
        videoRef.current?.play();
        setIsPlaying(true);
      });
      // 系统通知触发暂停
      TrackPlayer.addEventListener('pause', () => {
        videoRef.current?.pause();
        setIsPlaying(false);
      });
      // 上一曲操作
      TrackPlayer.addEventListener('skipToPrevious', () => {
        newProcess('subt');
      });
      // 下一曲操作
      TrackPlayer.addEventListener('skipToNext', () => {
        newProcess('plus');
      });
      // 进度条拖动跳转
      TrackPlayer.addEventListener('seekTo', (event) => {
        videoRef.current?.seek(event.position);
      });
    };

    bindListeners();

    // 组件卸载时清理监听
    return () => {
      TrackPlayer.removeAllListeners();
    };
  }, []);

  // 更新通知栏播放信息
  const updateNotification = () => {
    if (IsOfflineMode) return;
    
    TrackPlayer.updateNowPlaying({
      title,
      artist: author,
      artwork: thumbnail, // 支持本地路径或远程URL
      isLiveStream: IsLive,
    });
  };

  // 同步视频播放状态到TrackPlayer
  const handlePlaybackChange = (state) => {
    const newState = state === 'playing';
    setIsPlaying(newState);
    
    newState ? TrackPlayer.play() : TrackPlayer.pause();
    updateNotification();
  };

  // 同步视频进度到TrackPlayer（解决进度条问题）
  const handleProgress = (progress) => {
    if (!IsLive) {
      TrackPlayer.updateProgress({
        position: progress.currentTime,
        duration: progress.seekableDuration,
      });
    }
  };

  // 复用原有的切换逻辑
  const newProcess = (type) => {
    // 这里写你的上/下一曲业务逻辑
    console.log(type);
  };

  return (
    <View>
      <Video
        ref={videoRef}
        source={{ uri: '你的视频资源地址' }} // 替换为实际视频URL
        onPlaybackStateChange={handlePlaybackChange}
        onProgress={handleProgress}
        paused={!isPlaying}
        style={{ width: '100%', height: 200 }}
      />
    </View>
  );
};

export default VideoPlayer;

关键注意事项 #

• 音频焦点管理：rn-track-player 会自动处理音频焦点，确保其他应用播放时暂停当前视频，恢复后继续播放。
• 直播流适配：若为直播（IsLive为true），无需同步进度，rn-track-player 会自动隐藏进度条。
• 权限配置：iOS 需在Info.plist中添加音频后台模式；Android 需在AndroidManifest.xml中添加FOREGROUND_SERVICE权限及音频相关权限。

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