在React-Native FlatList中播放和暂停视频或仅播放一个可见视频

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

const videoData = [
  { id: 1, title: 'Video 1', url: 'https://example.com/video1.mp4' },
  { id: 2, title: 'Video 2', url: 'https://example.com/video2.mp4' },
  // 添加更多视频数据...
];

const [currentVideo, setCurrentVideo] = useState(null);
const videoRef = useRef(null);

const handleVideoToggle = (video) => {
  if (currentVideo === video) {
    // 当前视频已经在播放，暂停它
    videoRef.current.pause();
    setCurrentVideo(null);
  } else {
    // 播放新的视频
    setCurrentVideo(video);
  }
};

const renderItem = ({ item }) => (
  <View>
    <TouchableOpacity onPress={() => handleVideoToggle(item)}>
      <Text>{item.title}</Text>
    </TouchableOpacity>
    {currentVideo === item && (
      <Video
        ref={videoRef}
        source={{ uri: item.url }}
        paused={currentVideo !== item}
        // 其他视频配置项...
      />
    )}
  </View>
);

const App = () => (
  <FlatList
    data={videoData}
    renderItem={renderItem}
    keyExtractor={(item) => item.id.toString()}
  />
);