能否结合react-native-track-player与react-native-video实现锁屏显示视频标题和缩略图？

云上老周

2026-7-25

解决react-native-video与react-native-track-player搭配时锁屏信息不显示的问题

核心原因

react-native-video和react-native-track-player会抢占系统媒体会话控制权，同时使用时，前者会覆盖后者的媒体元数据配置，导致锁屏界面无法加载标题和缩略图。

具体解决步骤

禁用react-native-video的媒体会话控制
在Video组件中添加disableFocus属性并设为true，阻止它抢占媒体会话：
```
<Video
  source={{ uri: '你的视频地址' }}
  disableFocus={true}
  // 其他原有配置项
/>
```

用react-native-track-player统一管理媒体元数据
播放视频前，通过track-player初始化播放器、配置元数据并添加播放队列：

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

// App启动时初始化播放器
await TrackPlayer.setupPlayer();
await TrackPlayer.updateOptions({
  capabilities: [
    TrackPlayer.Capability.Play,
    TrackPlayer.Capability.Pause,
  ],
});

// 设置视频元数据并加入队列
await TrackPlayer.add({
  id: 'video-id',
  url: '你的视频地址',
  title: '目标视频标题',
  artwork: '缩略图地址（本地路径或远程链接）',
});

// 启动播放
await TrackPlayer.play();

同步两者的播放状态
监听track-player的播放状态变化，同步控制react-native-video的播放/暂停：

// 监听播放状态
TrackPlayer.addEventListener('playback-state', async (state) => {
  if (state.state === TrackPlayer.STATE_PLAYING) {
    videoRef.current?.play();
  } else if (state.state === TrackPlayer.STATE_PAUSED) {
    videoRef.current?.pause();
  }
});