在react-native中自动播放元素焦点上的视频

npm install react-native-video

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

const VideoList = ({ videos }) => {
  const flatListRef = useRef(null);

  const onViewableItemsChanged = useRef(({ viewableItems }) => {
    if (viewableItems.length > 0) {
      const { item } = viewableItems[0];
      // 自动播放位于焦点的视频
      item.play();
    }
  });

  const viewabilityConfig = useRef({ viewAreaCoveragePercentThreshold: 50 });

  return (
    <FlatList
      ref={flatListRef}
      data={videos}
      renderItem={({ item }) => (
        <View style={{ height: 200 }}>
          <Video
            source={{ uri: item.url }}
            style={{ flex: 1 }}
            resizeMode="cover"
            paused={!item.playing}
            onEnd={() => item.pause()}
          />
        </View>
      )}
      keyExtractor={(item, index) => index.toString()}
      onViewableItemsChanged={onViewableItemsChanged.current}
      viewabilityConfig={viewabilityConfig.current}
    />
  );
};

export default VideoList;

const videos = [
  { url: 'video_url_1', playing: false },
  { url: 'video_url_2', playing: false },
  // 更多视频...
];