React Native中FlatList/Swiper-FlatList无法播放视频求助

核心问题分析 #

单个视频能正常播放，但列表中无法播放，大概率是列表组件复用导致的视频实例管理混乱，或是视频资源加载/播放逻辑未适配列表滚动场景。

具体解决方案 #

1. 严格管理视频实例与播放状态 #

利用FlatList的onViewableItemsChanged回调，只让当前可见的视频播放，不可见的暂停并释放资源，同时用useRef保存每个视频的实例：

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

const VideoReels = ({ videos }) => {
  const videoRefs = useRef({});
  const [viewableItem, setViewableItem] = useState(null);
  const viewabilityConfig = useRef({
    itemVisiblePercentThreshold: 70, // 视频可见度超70%时触发播放
  });

  const handleViewableItemsChanged = ({ viewableItems }) => {
    if (viewableItems.length > 0) {
      const currentItem = viewableItems[0];
      // 暂停上一个播放的视频
      if (viewableItem && videoRefs.current[viewableItem.key]) {
        videoRefs.current[viewableItem.key].pause();
      }
      // 播放当前可见视频
      if (videoRefs.current[currentItem.key]) {
        videoRefs.current[currentItem.key].play();
      }
      setViewableItem(currentItem);
    } else {
      // 无可见视频时暂停所有实例
      Object.values(videoRefs.current).forEach(video => video?.pause());
      setViewableItem(null);
    }
  };

  const renderItem = ({ item, index }) => {
    const key = `video-${index}`;
    return (
      <View style={{ flex: 1 }}>
        <Video
          ref={ref => videoRefs.current[key] = ref}
          source={{ uri: item.uri }}
          style={{ flex: 1 }}
          resizeMode="cover"
          muted={false}
          onError={(error) => console.log('视频错误:', error)}
          onLoad={() => console.log('视频加载完成:', key)}
        />
      </View>
    );
  };

  return (
    <FlatList
      data={videos}
      renderItem={renderItem}
      keyExtractor={(item, index) => `video-${index}`}
      onViewableItemsChanged={handleViewableItemsChanged}
      viewabilityConfig={viewabilityConfig.current}
      pagingEnabled // 实现Reels式整页滚动
      showsVerticalScrollIndicator={false}
      windowSize={3} // 仅渲染当前+前后各1个视频，优化性能
    />
  );
};

export default VideoReels;

2. 排查视频资源路径与权限问题 #

• 本地视频：确保URI格式正确，Android需申请文件读取权限，iOS要在Info.plist添加NSPhotoLibraryUsageDescription；可借助react-native-fs获取标准路径：

  import RNFS from 'react-native-fs';
  // 示例：Documents目录下的视频路径
  const localVideoUri = `file://${RNFS.DocumentDirectoryPath}/test.mp4`;
  

• 网络视频：检查网络权限配置（Android的ACCESS_NETWORK_STATE，iOS的NSAppTransportSecurity允许HTTP资源），同时确认视频URI无防盗链限制。

3. 性能优化适配Reels流畅度 #

• 懒加载与预加载：通过windowSize控制渲染范围，结合onViewableItemsChanged提前预加载下一个视频资源。
• 卸载时释放资源：在视频组件卸载时暂停播放并清除实例，避免内存泄漏：

  useEffect(() => {
    return () => {
      if (videoRefs.current[key]) {
        videoRefs.current[key].pause();
        delete videoRefs.current[key];
      }
    };
  }, [key]);
  

• 简化UI动画：关闭Swiper-FlatList的过度滚动效果，减少UI线程压力。

4. 调试与错误排查 #

• 给Video组件添加onError回调，打印错误信息定位问题类型（加载失败/播放失败）。
• 单独测试视频资源的可用性，排除资源本身的问题。
• 检查列表布局，确保视频组件占满父容器，避免因尺寸问题无法触发播放逻辑。

内容的提问来源于stack exchange，提问作者Muhammad Areeb