Question

我遇到了严重的问题，但是我不知道该如何解决。

假设我必须准备一个视图，在该视图中放置两个双胞胎电影播放器。我准备了简单的组件：

interface Props {
    episode: Episode;
}
interface State {
    paused: boolean;
}
export class VideoPlayer extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      paused: true,
    };
  }

  render() {
    return (
      <TouchableWithoutFeedback
        onPress={() => {
          this.setState({paused: !this.state.paused});
        }}
      >
        <Video
          source={{ uri: episode.videoUrl }}
          paused={paused} />
      </TouchableWithoutFeedback>)
  }
}

好的，现在在ScreenComponent的渲染功能中，我试图添加两个Twin VideoPlayer组件，但是具有相同的引用，如下所示：

render() {
  const videoPlayer = (<VideoPlayer episode={this.props.firstEpisode} />)
  <View>
   {videoPlayer}
   {videoPlayer}
  </View>
}

有效。在我的屏幕上，我可以看到两个视频播放器正在播放同一集，但是我有问题！我希望他们在单击其中之一时同时播放。现在，尽管它们指向相同的引用，但它们都可以独立操作

有什么方法可以在react native中创建类似 Singleton组件的东西吗？我应该如何处理？

Answer 1

嗯，您可以尝试让VideoPlayer接受来自父级的状态变量来确定它是否在“播放”吗？因此，当您按下任一视频播放器时，它会向父级触发回调，从而将状态更改为true / false，并将其同时传递回两个子级？

所以从本质上讲，你有这个：

render() {
  const videoPlayer = (<VideoPlayer episode={this.props.firstEpisode} isPlaying={this.state.isVideoPlaying} />)
  <View>
   {videoPlayer}
   {videoPlayer}
  </View>
}

VideoPlayer将不再具有其自身的状态，而只是道具。

反应本机。 React组件的单个实例

1 个答案: