当用户滚动到查看页(@react-原生社区/视图页)中的另一个页面时，如何暂停播放的视频(使用 react-native

Question

在我的应用程序中，我正在使用ViewPager(@react-native-community/viewpager(来显示多个页面。其中一些页面包含我使用反应原生视频显示的视频。如果我在一个页面上开始一个视频，然后滚动到下一页，视频就会继续在后台播放。用户可以听到视频的音频，尽管音频不可见。

我想在用户滚动到下一页时暂停视频，我该如何完成？

Answer 1

您可以将当前页面值存储在状态中，并为页面设置一些索引，如下例所示。之后，只需检查您的页面是否是当前页面：

<ViewPager
initialPage={0}
onPageScroll={({ nativeEvent }) => {
this.setState({
activePage: nativeEvent.position
})
}
}>
<View key="1">
<Video source={{ uri: '' }}
paused={this.state.activePage !== 0} />
</View>
<View key="2">
<Video source={{ uri: '' }}
paused={this.state.activePage !== 1} />
</View>
</ViewPager>

编辑：如果您不需要视频自动启动，则可以在状态中添加isPlaying属性，并在需要时将其设置为true。

<ViewPager
initialPage={0}
onPageScroll={({ nativeEvent }) => {
this.setState({
activePage: nativeEvent.position,
isPlaying: false
})
}
}>
<View key="1">
<Video source={{ uri: '' }}
paused={!this.state.isPlaying || this.state.activePage !== 0} />
</View>
<View key="2">
<Video source={{ uri: '' }}
paused={!this.state.isPlaying || this.state.activePage !== 1} />
</View>
</ViewPager>

Answer 2

映射数据时，可以检查视图页的索引和视频项的索引。

例：

<ViewPager
onPageSelected={this.onPageSelected}
initialPage={currentVisibleIndex}
style={{ width: '100%', height: '100%', justifyContent: 'center' }}
key={data.length}
// onPageScroll={this.onPageScroll}
scrollEnabled={data && data.length > 1}
// onPageScrollStateChanged={this.onPageScrollStateChanged}
>
{data.map((item, i) => {
if (isVideo(item)) {
return (
<VideoItem
uri={item}
key={i.toString()}
currentVisibleIndex={currentVisibleIndex}
currentIndex={i}
/>
);
}
return (
<ImageItem
uri={item}
defaultSource={Images.defaultImageAlbum}
key={i.toString()}
/>
);
})}
</ViewPager>

在VideoItem中.js您可以使用它在滚动查看页面时暂停视频。

static getDerivedStateFromProps(props, state) {
let { paused } = state;
if (props.currentVisibleIndex !== props.currentIndex) {
paused = true;
}
return {
paused,
currentVisibleIndex: props.currentVisibleIndex
};

}

对不起我的英语。