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

import React, { useRef } from 'react';
import { FlatList, View, Text } from 'react-native';
import Video from 'react-native-video';

const data = [
  { id: 1, url: 'https://example.com/video1.mp4' },
  { id: 2, url: 'https://example.com/video2.mp4' },
  { id: 3, url: 'https://example.com/video3.mp4' },
  // ...
];

const renderItem = ({ item }) => {
  const videoRef = useRef(null);

  return (
    <View>
      <Video ref={videoRef} source={{ uri: item.url }} />
      {/* Other video item components */}
    </View>
  );
};

const onViewableItemsChanged = ({ viewableItems }) => {
  viewableItems.forEach((item) => {
    // Access the video reference and perform actions
    if (item.isViewable && item.item.id === 1) {
      item.item.videoRef.current.play();
    } else {
      item.item.videoRef.current.pause();
    }
  });
};

const VideoList = () => {
  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      onViewableItemsChanged={onViewableItemsChanged}
      viewabilityConfig={{ viewAreaCoveragePercentThreshold: 50 }}
    />
  );
};

export default VideoList;