React Native如何实现组件单例？双视频播放器同步问题求助

首先要明确：React中不存在所谓的“单例组件”这种符合设计原则的用法。你当前遇到的问题核心在于，你创建了一个VideoPlayer组件实例并渲染了两次，但每个React组件实例都拥有独立的内部状态（state），所以点击其中一个播放器时，只会修改它自己的paused状态，另一个实例完全感知不到，自然无法同步。

正确的解决思路：状态提升 #

React的核心数据流原则是状态向下传递，事件向上冒泡。要让两个组件同步状态，最简单且符合React设计的方式是把共享状态提升到它们的共同父组件中，由父组件统一管理状态，再传递给子组件。

步骤1：改造VideoPlayer组件，移除内部状态

将播放状态的控制权交给父组件，子组件只负责接收状态和触发状态变更的回调：

interface Props { 
  episode: Episode;
  paused: boolean;
  onTogglePause: () => void;
}

export class VideoPlayer extends React.Component<Props> {
  render() {
    const { episode, paused, onTogglePause } = this.props;
    
    return (
      <TouchableWithoutFeedback onPress={onTogglePause}>
        <Video source={{ uri: episode.videoUrl }} paused={paused} />
      </TouchableWithoutFeedback>
    );
  }
}

步骤2：在父组件ScreenComponent中管理共享状态

把paused状态移到父组件中，同时定义状态变更的方法，传递给两个子播放器：

// 先给父组件添加状态类型
interface ScreenState {
  paused: boolean;
}

export class ScreenComponent extends React.Component<Props, ScreenState> {
  constructor(props: Props) {
    super(props);
    this.state = { paused: true };
  }

  // 定义状态切换方法，用箭头函数避免绑定this的问题
  togglePause = () => {
    this.setState(prevState => ({ paused: !prevState.paused }));
  }

  render() {
    return (
      <View>
        <VideoPlayer 
          episode={this.props.firstEpisode} 
          paused={this.state.paused} 
          onTogglePause={this.togglePause} 
        />
        <VideoPlayer 
          episode={this.props.firstEpisode} 
          paused={this.state.paused} 
          onTogglePause={this.togglePause} 
        />
      </View>
    );
  }
}

效果说明 #

现在两个VideoPlayer组件共享父组件的paused状态，点击任何一个播放器都会触发父组件的togglePause方法，更新父组件的状态后，两个子组件都会接收到最新的paused属性，从而同步执行播放/暂停操作。

如果后续你的需求变得更复杂（比如需要管理多个剧集的播放状态），可以考虑使用React的Context API或者状态管理库（如Redux），但当前场景下，状态提升到父组件已经完全能解决问题。

内容的提问来源于stack exchange，提问作者Jaroslaw K.