在 FlatList 中获取渲染视频的引用

Question

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

我想实现的是，当我点击播放列表中的一个视频时，其他所有正在播放的视频都会暂停。我正在使用所有功能组件，如果它不在 FlatList 中，通常可以引用具有以下内容的视频：

const videoRef = useRef(null);

...

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

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

但是，现在它在 FlatList 中，我无法理解如何 link 每个视频的 ref 并能够取回 ref 以调用 pauseAsync() 上一个视频正在播放。

任何 direction/guidance 将不胜感激。

Answer 1

如何创建引用数组。

我会使用代码 link 这个：

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 中获取渲染视频的引用

Getting refs to rendered videos in FlatList

react-native

expo

react-native-flatlist