Получение ссылок на визуализированные видео в FlatList

Question

У меня есть приложение, в котором я визуализирую видеокомпонент, используя expo-video-player через FlatList, так как этот список может увеличиваться в будущем, и я хочу, чтобы все было оптимизировано, насколько это возможно.

Чего я хочу добиться sh, так это того, что когда я нажимаю для воспроизведения одного видео в списке, все остальные будут приостанавливаться, если они воспроизводятся. Я использую все функциональные компоненты, и, как правило, если его нет в 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]}
     ...
  />
}