当用户滚动到 viewpager (@react-native-community/viewpager) 中的另一个页面时,如何暂停播放视频(使用 react-native-video 播放)?

How do I pause a playing video (played with react-native-video) when user scrolls to another page in a viewpager (@react-native-community/viewpager)?

在我的应用程序中,我使用 ViewPager (@react-native-community/viewpager) 来显示多个页面。其中一些页面包含我使用 react-native-video 显示的视频。如果我在一页上开始播放视频,然后滚动到下一页,视频会一直在后台播放。虽然音频不可见,但用户可以听到视频的音频。

我想在用户滚动到下一页时暂停视频,我该如何实现?

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

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

编辑: 如果不需要视频自启动,可以在state中添加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>

映射数据的时候可以查看ViewPage的index和VideoItem的index。

示例:

<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 中,您可以在滚动 viewpager 时使用它来暂停视频。

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

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

}

对不起我的英语。