我怎样才能暂停或停止视频时，我把另一个视频到世博会使用的视频播放器堆栈？

Question

当我使用this.props.navigation.push到导航堆栈，我的视频继续在后台播放。有没有一种方法，我可以暂停或停止视频，因为我离开吗？

<VideoPlayer
    videoProps={{
        shouldPlay: true,
        resizeMode: Video.RESIZE_MODE_CONTAIN,
        isMuted: false,
        source: {
            uri: this.props.navigation.state.params.video,
        },
    }}
    isPortrait
    playFromPositionMillis={0}
    showFullscreenButton
    switchToLandscape={() => 
        ScreenOrientation.allowAsync(ScreenOrientation.Orientation.LANDSCAPE)
    }
    switchToPortrait={() => 
        ScreenOrientation.allowAsync(ScreenOrientation.Orientation.PORTRAIT)
    }
/>

让我知道是否需要任何进一步的细节澄清。

Answer 1

当您使用react-navigation您可以在导航的生命周期事件使用侦听器。 https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

有您可以订阅四个事件：

• willFocus - 屏幕将重点
• didFocus - 屏幕聚焦（如果有一个过渡，在过渡完成）
• willBlur - 屏幕会聚焦
• didBlur - 屏幕聚焦（如果有一个过渡，在过渡完成）

只要你想，你可以订阅，因为其中许多。下面是使用willBlur的一个例子。你可以很容易复制此为所有您需要的。

componentDidMount () {
  // add listener 
  this.willBlurSubscription = this.props.navigation.addListener('willBlur', this.willBlurAction);
}

componentWillUmount () {
  // remove listener
  this.willBlurSubscription.remove();
}

willBlurAction = (payload) => {
  // do things here when the screen blurs
}

VideoPlayer VideoPlayer docs不公开是ref Video做同样的Video docs功能，但您可以通过使用. _playbackInstance得到他们。所以，你可以做这样的事情：

<VideoPlayer 
 ref={ref => {this.videoplayer = ref}}
 // other props
/>

然后，你可以做这样的事情在你的didBlurAction功能

didBlurAction = (payload) => {
  if (this.videoplayer) {
    this.videoplayer._playbackInstance.pauseAsync();
  }
}

我创建了一个小吃展示它的工作。在零食，你可以使用Video或VideoPlayer之间切换。当你浏览到下一个屏幕的视频也将暂停。还有两个按钮让您pause或play视频。 https://snack.expo.io/@andypandy/video-example