如何在 react-native 中处理列表视图内的视频视图播放

Question

我在每一行都有一个包含视频 URL 的项目列表。我已将 React-Native-Video 组件用于视频视图。

<TouchableOpacity
         style={styles.fullScreen}
         onPress={() => this.setState({ paused: !this.state.paused })}
 >
   <Video source={{ uri: rowData.podcastUrl }}   // URL
        ref={(ref) => {
 // Store reference
        this.player = ref
         ......
         ......                           
     }}  
   paused={true}                                   
  </TouchableOpacity>

上面的代码在 renderMyList() 函数中，每行的渲染都会调用它。

当我加载我的用户界面时，所有视频要么处于播放模式，要么基于“暂停”状态 false 或 true 停止（无论我在上面传递什么。但我想正确处理单个视频的播放/暂停（列表项).我维护了一个暂停状态变量。

请推荐一些示例代码。

Answer 1

如果您打算在任何特定时刻只播放一个视频，您可以执行以下操作

onPress={() => { this.setState({ playing: 'someUniqueIdForThisVideo'}) }}

并检查该视频是否正在播放

paused={this.state.playing !== 'videoIdOrSomething'}

如果您想播放多个视频，可以执行以下操作

onPress={() => { this.setState({ ['someUniqueIdForThisVideo']: true}) }}

然后像下面这样检查状态

paused={this.state['someUniqueIdForThisVideo'] !== true}

这只是给你一个粗略的想法。如果它已经在播放，您需要实现某种逻辑将状态设置为 false。