React Native中FlatList项内播放视频致UI卡顿甚至崩溃求助

问题原因 #

1. 首次渲染FlatList时，可见区域内的所有react-native-video组件会默认自动初始化并播放，每个视频都会占用CPU、内存和网络带宽，多视频并发会瞬间耗尽设备资源，直接引发卡顿甚至崩溃。
2. FlatList的按需渲染机制仅控制组件是否渲染，但未对视频的播放状态做统一管控，导致可见视频无差别启动播放逻辑。

解决方案 #

核心思路：同一时间仅允许一个视频播放，其余视频暂停/延迟加载，同时优化FlatList渲染性能。

1. 全局管控视频播放状态 #

在组件中维护当前播放的视频ID，让每个视频组件根据自身ID与全局播放ID匹配度决定是否播放：

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

const MediaList = ({ mediaFiles }) => {
  const [playingVideoId, setPlayingVideoId] = useState(null);

  // 切换播放视频，自动暂停之前的视频
  const handleVideoPlay = useCallback((videoId) => {
    setPlayingVideoId(prevId => prevId === videoId ? null : videoId);
  }, []);

  const renderItem = ({ item }) => {
    if (item.type === 'image') {
      return (
        <Image
          source={{ uri: item.url }}
          style={{ width: '100%', height: 250, marginVertical: 8 }}
          resizeMode="cover"
        />
      );
    } else if (item.type === 'video') {
      return (
        <View style={{ width: '100%', height: 250, marginVertical: 8 }}>
          <Video
            source={{ uri: item.url }}
            style={{ flex: 1 }}
            resizeMode="cover"
            paused={playingVideoId !== item.id}
            onPlay={() => handleVideoPlay(item.id)}
            playInBackground={false}
            playWhenInactive={false}
          />
        </View>
      );
    }
    return null;
  };

  return (
    <FlatList
      data={mediaFiles}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      initialNumToRender={3}
      maxToRenderPerBatch={2}
      windowSize={5}
    />
  );
};

export default MediaList;

2. 优化FlatList渲染效率 #

• initialNumToRender：限制首次渲染的列表项数量，避免一次性加载过多媒体组件；
• maxToRenderPerBatch：控制每次批量渲染的条目数，降低单次渲染的资源消耗；
• windowSize：调整可见区域外预加载的数量，平衡流畅度与资源占用；
• 用React.memo包裹列表项组件，避免不必要的重渲染：

const ImageItem = React.memo(({ item }) => (
  <Image
    source={{ uri: item.url }}
    style={{ width: '100%', height: 250, marginVertical: 8 }}
    resizeMode="cover"
  />
));

const VideoItem = React.memo(({ item, playingVideoId, handleVideoPlay }) => (
  <View style={{ width: '100%', height: 250, marginVertical: 8 }}>
    <Video
      source={{ uri: item.url }}
      style={{ flex: 1 }}
      resizeMode="cover"
      paused={playingVideoId !== item.id}
      onPlay={() => handleVideoPlay(item.id)}
    />
  </View>
));

3. 结合可见性控制视频加载 #

利用FlatList的onViewableItemsChanged事件，仅对进入可见区域的视频进行播放控制，进一步减少无效资源占用：

const MediaList = ({ mediaFiles }) => {
  const [playingVideoId, setPlayingVideoId] = useState(null);
  const [visibleItemIds, setVisibleItemIds] = useState([]);

  const handleViewableItemsChanged = useCallback(({ viewableItems }) => {
    setVisibleItemIds(viewableItems.map(item => item.item.id));
  }, []);

  const handleVideoPlay = useCallback((videoId) => {
    // 仅允许可见区域内的视频播放
    if (visibleItemIds.includes(videoId)) {
      setPlayingVideoId(prevId => prevId === videoId ? null : videoId);
    }
  }, [visibleItemIds]);

  return (
    <FlatList
      data={mediaFiles}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      onViewableItemsChanged={handleViewableItemsChanged}
      viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
      // 其他优化属性...
    />
  );
};

4. 资源清理 #

组件卸载时清空播放状态，确保视频释放资源：

useEffect(() => {
  return () => {
    setPlayingVideoId(null);
  };
}, []);

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