当用户滚动到viewpager（@react-native community/viewpager）中的另一页时，如何暂停播放视频（使用react-native视频播放）？

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

---

当用户滚动到下一页时，我想暂停视频，我如何才能做到这一点？

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

{
这是我的国家({
activePage:nativeEvent.position
})
}
}>

编辑： 如果不需要视频自动启动，可以在状态中添加

isPlaying

属性，并在需要时将其设置为

true

{
这是我的国家({
activePage:nativeEvent.position，
isPlaying:错误
})
}
}>

映射数据时，您可以将ViewPage索引与VideoItem索引一起检查

例如：

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

}

---

对不起，我的英语不好。

这样做的一个副作用是，当页面可见时，视频会自动开始播放。

  static getDerivedStateFromProps(props, state) {
let { paused } = state;

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