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

Posted 2023-03-15

【中文标题】如何在 react-native 中处理列表视图内的视频视图播放

【英文标题】：How to handle video views playback inside list view in react-native

【发布时间】：2018-03-05 10:39:30

【问题描述】：

我在每一行都有一个包含视频 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 停止（无论我在上面传递什么。但我想正确处理单个视频的播放/暂停（列表项).我维护了一个暂停状态变量。

请推荐一些示例代码。

【问题讨论】：

你找到解决办法了吗？

【参考方案1】：

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

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

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

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

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

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

然后像下面这样检查状态

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

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