React Native Expo-AV多音频播放与VirtualizedList性能问题求助

一、解决音频重复播放问题 #

1. 全局音频实例强管控 #

用全局变量（或Context/Redux状态）唯一存储当前活跃音频实例，每次播放前强制清理旧实例，从根源避免多实例共存：

// 全局音频实例管理（可放在工具文件或全局Context中）
let activeAudioInstance = null;

const playAudio = async (audioUrl) => {
  // 先停止并销毁旧实例
  if (activeAudioInstance) {
    await activeAudioInstance.stopAsync();
    await activeAudioInstance.unloadAsync();
    activeAudioInstance = null;
  }
  // 创建新实例并播放
  const newInstance = new Audio.Sound();
  await newInstance.loadAsync({ uri: audioUrl });
  await newInstance.playAsync();
  activeAudioInstance = newInstance;
};

结合FlatList可见性监听，仅对完全可见的帖子触发音频播放：

const viewabilityConfig = {
  itemVisiblePercentThreshold: 90, // 帖子可见度达90%才视为活跃
};

const onViewableItemsChanged = ({ viewableItems }) => {
  // 类TikTok单列滚动，只取第一个可见帖子
  const currentActiveItem = viewableItems[0];
  if (currentActiveItem) {
    playAudio(currentActiveItem.item.audioUrl);
  } else {
    // 无可见帖子时强制停止所有音频
    if (activeAudioInstance) {
      activeAudioInstance.stopAsync().then(() => activeAudioInstance.unloadAsync());
      activeAudioInstance = null;
    }
  }
};

// FlatList中配置
<FlatList
  ...
  viewabilityConfig={viewabilityConfig}
  onViewableItemsChanged={onViewableItemsChanged}
/>

2. PagerView切换时的即时音频截断 #

给PagerView绑定onPageSelected事件，切换页面时立即停止当前音频，再加载新页面音频：

const handlePageChange = async (event) => {
  const selectedIndex = event.nativeEvent.position;
  const currentAudioUrl = posts[flatListActiveIndex].images[selectedIndex].audioUrl;
  
  // 强制清理旧音频
  if (activeAudioInstance) {
    await activeAudioInstance.stopAsync();
    await activeAudioInstance.unloadAsync();
    activeAudioInstance = null;
  }
  // 播放新音频
  await playAudio(currentAudioUrl);
};

<PagerView
  ...
  onPageSelected={handlePageChange}
/>

3. 阻断组件重渲染触发的重复播放 #

用React.memo包裹帖子Item组件，避免无关重渲染触发多次播放：

const PostItem = React.memo(({ item, onPageChange }) => {
  // 帖子内容渲染逻辑
  return (
    <PagerView onPageSelected={onPageChange}>
      {/* 图片与音频关联逻辑 */}
    </PagerView>
  );
});

二、解决VirtualizedList性能警告 #

1. 精细化配置FlatList渲染参数 #

除initialNumToRender外，补充以下参数平衡流畅度与性能：

<FlatList
  ...
  initialNumToRender={3} // 初始渲染3个，刚好覆盖屏幕
  maxToRenderPerBatch={2} // 每次批量渲染2个，降低单次渲染压力
  windowSize={5} // 视窗上下各预渲染2个，避免滚动空白
  removeClippedSubviews={true} // Android端自动移除不可见子视图
  persistentScrollbar={false} // 关闭持久滚动条，减少绘制开销
/>

2. 彻底减少Item组件重渲染 #

• 所有传递给Item的回调用useCallback包裹，避免每次父组件渲染生成新函数：

const handlePageChange = useCallback(async (event) => {
  // 切换逻辑
}, [activeAudioInstance]);

• 数据源更新用不可变方式（如扩展运算符、immer库），避免引用变化触发不必要重渲染。

3. 懒加载非核心资源 #

• 用FastImage替代原生Image，支持图片缓存与渐进式加载：

import FastImage from 'react-native-fast-image';

<FastImage
  source={{ uri: imageUrl }}
  style={{ width: '100%', height: '100%' }}
  resizeMode={FastImage.resizeMode.cover}
/>

• 音频仅在帖子进入可见区域时加载，而非初始化时预加载全部资源。

4. 替换FlatList为FlashList #

用Shopify的@shopify/flash-list替代官方FlatList，它针对大列表做了深度性能优化：

npm install @shopify/flash-list

import { FlashList } from '@shopify/flash-list';

<FlashList
  data={posts}
  renderItem={renderItem}
  estimatedItemSize={SCREEN_HEIGHT} // 必须设置预估高度，否则性能大打折扣
/>

5. 提前格式化数据源 #

避免在Item组件中做复杂数据处理，提前在父组件或数据层完成图片、音频URL的格式化，Item直接取用即可。

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