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

Posted 2023-02-19

【中文标题】在 FlatList 中获取渲染视频的参考

【英文标题】：Getting refs to rendered videos in FlatList

【发布时间】：2020-09-16 04:39:50

【问题描述】：

我有一个应用程序，我通过 FlatList 使用 expo-video-player 渲染视频组件，因为这个列表将来可能会增长，我希望尽可能优化。

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

const videoRef = useRef(null);

...

<Video 
   ref=videoRef
   ...
/>

然后调用 videoRef.current.pauseAsync() 在我的代码中的其他地方暂停它。

但是，现在它位于 FlatList 中，我无法理解如何链接每个视频的 ref 以及如何让 ref 重新调用上一个正在播放的视频的 pauseAsync()。

任何方向/指导将不胜感激。

【参考方案1】：

如何需要创建一个 Refs 数组。

我会使用这个代码链接：

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]
     ...
  />

【讨论】：

不得不为我的用例稍微修改一些代码，但这让我走上了完全正确的轨道。谢谢！

干得好，斯凯尼！