React Native 获取FlatList中渲染视频的引用

xxhby3vn 于 2023-06-24 发布在 React

关注(0)|答案(1)|浏览(109)

我有一个应用程序，我正在通过FlatList使用expo-video-player渲染一个视频组件，因为这个列表在未来可能会增长，我希望尽可能地保持优化。
我想完成的是，当我点击播放列表中的一个视频时，如果其他视频正在播放，所有其他视频都将暂停。我使用所有功能组件，通常如果它不在FlatList中，可以引用以下视频：

const videoRef = useRef(null);

...

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

然后调用videoRef.current.pauseAsync()将其暂停在代码中的其他位置。
然而，现在它是在一个FlatList中，我很难理解如何链接每个视频的ref，并能够让ref回来调用pauseAsync()上的前一个视频正在播放。
任何方向/指导将不胜感激。

react-native

来源：https://stackoverflow.com/questions/62071918/getting-refs-to-rendered-videos-in-flatlist

1条答案

按热度按时间

y53ybaqx1#

你可能需要创建一个引用数组。
就像这样：

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

赞(0）回复(0）举报 2023-06-24

我来回答

React Native 获取FlatList中渲染视频的引用

1条答案

相关问题

热门标签

最新问答