当我使用expo视频播放器将另一个视频推到堆栈上时，如何暂停或停止视频

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-订阅导航生命周期的更新

您可以订阅四个活动：

• 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
}

VideoPlayerVideoPlayer文档没有公开与VideoVideo文档相同的ref函数，但您可以使用. _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/视频示例