React Native中同组件的两个Video引用如何比较以避免同时播放？

一、直接比较组件实例引用 #

每个React组件实例都是独立的对象，你可以通过实例本身或自定义标识来区分不同的视频组件实例：

1. 类组件中直接比较实例引用

class VideoPlayer extends React.Component {
  componentDidMount() {
    // 全局存储所有活跃的播放器实例
    global.activePlayers = global.activePlayers || new Set();
    global.activePlayers.add(this);
  }

  componentWillUnmount() {
    global.activePlayers.delete(this);
  }

  play() {
    // 播放前暂停其他所有不同实例
    global.activePlayers.forEach(player => {
      if (player !== this) { // 直接通过对象引用区分实例
        player.pause();
      }
    });
    this.videoRef.play();
  }

  pause() {
    this.videoRef.pause();
  }

  render() {
    return <Video ref={ref => this.videoRef = ref} {...this.props} />;
  }
}

这里player !== this就是在比较两个组件实例的引用地址，因为视频A和视频B是两个独立的实例，引用地址完全不同，以此就能精准区分。

2. 函数组件中通过自定义ID区分
   如果用Hooks开发，给每个组件实例传递唯一ID（比如路由参数、页面标识）来替代直接比较引用：

function VideoPlayer({ playerId }) {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  useEffect(() => {
    return () => {
      if (isPlaying) videoRef.current?.pause();
    };
  }, [isPlaying]);

  const handlePlay = () => {
    // 遍历所有注册的播放器，暂停ID不同的实例
    getAllActivePlayers().forEach(({ id, ref }) => {
      if (id !== playerId) ref.current?.pause();
    });
    videoRef.current?.play();
    setIsPlaying(true);
  };

  return <Video ref={videoRef} onPlay={handlePlay} {...this.props} />;
}

// 页面中使用时
// 视频A页面
<VideoPlayer playerId="page-video-a" />
// 视频B页面
<VideoPlayer playerId="page-video-b" />

这种方式用字符串ID替代实例引用比较，更适配函数组件的无实例特性，同样能区分开两个视频组件。

二、用全局状态管控播放状态 #

更优雅的方案是通过全局状态（Context、Redux等）记录当前活跃的播放实例ID，从根源避免多实例同时播放：

// 创建播放状态Context
const PlayerContext = createContext();

function PlayerProvider({ children }) {
  const [currentPlayingId, setCurrentPlayingId] = useState(null);

  const triggerPlay = (playerId) => {
    if (currentPlayingId && currentPlayingId !== playerId) {
      // 通知旧实例暂停
      window.dispatchEvent(new CustomEvent('pause-player', { detail: currentPlayingId }));
    }
    setCurrentPlayingId(playerId);
  };

  return (
    <PlayerContext.Provider value={{ triggerPlay }}>
      {children}
    </PlayerContext.Provider>
  );
}

// 视频组件中使用
function VideoPlayer({ playerId }) {
  const videoRef = useRef(null);
  const { triggerPlay } = useContext(PlayerContext);

  useEffect(() => {
    const handlePause = (e) => {
      if (e.detail === playerId) videoRef.current?.pause();
    };
    window.addEventListener('pause-player', handlePause);
    return () => window.removeEventListener('pause-player', handlePause);
  }, [playerId]);

  const handlePlay = () => {
    triggerPlay(playerId);
    videoRef.current?.play();
  };

  return <Video ref={videoRef} onPlay={handlePlay} {...this.props} />;
}

这种方案不需要直接比较组件引用，通过全局状态的ID标识来管控，新视频播放时自动触发旧视频暂停，逻辑更清晰。

三、利用导航生命周期自动暂停 #

因为两个视频在不同导航页面，你可以监听页面焦点变化，当视频A所在页面失去焦点时自动暂停：

import { useFocusEffect } from '@react-navigation/native';

function VideoPlayer() {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  useFocusEffect(
    React.useCallback(() => {
      // 页面离开时自动暂停
      return () => {
        if (isPlaying) {
          videoRef.current?.pause();
          setIsPlaying(false);
        }
      };
    }, [isPlaying])
  );

  return (
    <Video 
      ref={videoRef} 
      onPlay={() => setIsPlaying(true)} 
      onPause={() => setIsPlaying(false)} 
      {...this.props} 
    />
  );
}

这种方式完全不需要比较组件引用，借助导航的生命周期特性，用户切换页面时自动处理播放状态，适配播客场景的后台播放需求（如果需要保留后台播放，可调整为仅在页面完全切换而非后台时暂停）。

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