this.setState仅首次调用生效：视频播放器Next按钮二次点击无法暂停问题

问题根源 #

返回视频页面后重新播放时，你是通过播放器自带控件触发的播放，但这个操作只会直接控制播放器实例，没有同步更新state.isPaused的值。此时isPaused仍为true，再次点击Next按钮执行setState({isPaused: true})时，因状态未发生变化，组件不会重新渲染，视频的paused属性也就不会更新，导致视频无法暂停。

解决方案 #

提供两种可行方案，按需选择：

方案1：同步播放状态到state

给Video组件添加onPlay和onPause回调，将播放器实际状态同步到组件state：

<Video
  onEnd={this.onEnd}
  controls={true}
  onLoad={this.onLoad}
  onLoadStart={this.onLoadStart}
  onProgress={this.onProgress}
  // 添加状态同步回调
  onPlay={() => this.setState({ isPaused: false })}
  onPause={() => this.setState({ isPaused: true })}
  ref={videoPlayer => (this.videoPlayer = videoPlayer)}
  resizeMode={this.screenType}
  onFullScreen={this.isFullScreen}
  source={require('../Images/Video.mp4')}
  style={{height:'56%', width:'100%', marginTop: 50 }}
  volume={10}
  paused={this.state.isPaused}
/>

用户通过控件播放/暂停时，isPaused会同步更新，再次点击Next按钮时，setState能正确触发组件渲染，视频会暂停。

方案2：直接调用播放器实例暂停（更可靠）

跳过state，直接通过ref获取播放器实例并调用pause()方法，避免状态不同步问题：

onPress={() => {
  // 直接操作播放器实例暂停
  if (this.videoPlayer) {
    this.videoPlayer.pause();
  }
  this.props.navigation.navigate('nextScreen');
}}

这种方式不依赖state，直接控制原生播放器，状态同步更直接，适合简单场景。

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