Question

我有一个应用程序，其中我将通过FlatList使用expo-video-player来呈现视频组件，因为该列表将来可能会增长，并且我想使事情保持最佳状态。

我想要完成的是，当我单击播放列表中的一个视频时，如果其他视频正在播放，则所有其他视频都会暂停播放。我正在使用所有功能组件，通常，如果不在FlatList中，则可以引用以下视频：

const videoRef = useRef(null);

...

<Video 
   ref={videoRef}
   ...
/>

然后调用videoRef.current.pauseAsync()将其暂停在我的代码中的其他位置。

但是，现在它已经在FlatList中，我很难理解如何为每个视频链接引用，并且无法获取引用以调用正在播放的先前视频的pauseAsync()。

任何方向/指导都将受到赞赏。

Answer 1

如何创建引用数组。

我会使用代码链接：

const videoRefs = [];

const videos = ['url.com/xyz.mp4', 'url.com/abc.mp4'];

videos.forEach((video, index) => {
  videoRefs.push(useRef(null));
});

...

renderItem = ({item, index}) => {
  <Video 
     ref={videoRefs[index]}
     ...
  />
}

在FlatList中获取渲染视频的参考

1 个答案: