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

Question

在我的应用程序中，我使用 ViewPager (@react-native-community/viewpager) 来显示多个页面。其中一些页面包含我使用 react-native-video 显示的视频。如果我在一页上开始播放视频，然后滚动到下一页，视频将继续在后台播放。尽管音频不可见，但用户可以听到视频的音频。
我想在用户滚动到下一页时暂停视频，我该如何实现？

Answer 1

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

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