使用expo-av开发React Native安卓视频列表应用卡顿求助
安卓端expo-av视频卡顿问题排查与优化
针对你提供的Video组件代码,以下几个点可能是导致安卓卡顿的核心原因,对应的优化方案如下:
1. 移除重复的播放状态配置
你同时通过顶层props(shouldPlay、isLooping、isMuted)和status对象设置了相同的播放状态参数,安卓端会触发重复的Native状态同步,额外增加性能开销。只保留其中一种配置方式即可,推荐用status对象统一管理:
<Video ref={videoRef} nativeID={mediaItem.id} // 替换为视频的唯一ID,避免用长URL作为标识 onError={e => console.log(e)} accessible={false} style={styles.media} onLoad={() => setVideoLoaded(true)} onLoadStart={() => setVideoLoaded(false)} useNativeControls={false} // 移除顶层重复的状态props,统一用status配置 status={{ shouldPlay: !pausedMemo, isLooping: !pausedMemo, isMuted: isMuted, // 移除无必要的音频变调配置 // pitchCorrectionQuality: PitchCorrectionQuality.High, // shouldCorrectPitch: true, progressUpdateIntervalMillis: 300, // 调大进度更新间隔 seekMillisToleranceAfter: 1000, seekMillisToleranceBefore: 1000, }} volume={1} pointerEvents="none" posterSource={{ uri: mediaItem.thumbnail_url, // 移除source内的尺寸指定,改用样式控制 // height: itemHeight, // width: SIZES.screenWidth, }} usePoster posterStyle={styles.posterStyle} onPlaybackStatusUpdate={onProgress} // 移除重复的progressUpdateIntervalMillis配置 // progressUpdateIntervalMillis={100} resizeMode={ResizeMode.COVER} source={{ uri: videoUrl, }} />
2. 调大进度更新间隔
你设置了progressUpdateIntervalMillis: 100(每100ms同步一次播放进度),这会导致JS与Native层频繁通信,安卓端CPU占用会显著升高。普通短视频播放场景,将间隔调到300-500ms完全能满足需求,可大幅降低性能消耗。
3. 关闭不必要的音频变调功能
PitchCorrectionQuality.High和shouldCorrectPitch: true是用于变速播放时的音频优化,若你没有做变速播放的需求,直接关闭这两个配置——高音质变调处理会占用额外CPU资源,安卓端的性能影响比iOS更明显。
4. 优化海报图与NativeID配置
nativeID用完整视频URL作为标识可能存在异常,建议替换为视频的唯一ID(比如mediaItem.id),避免长字符串或特殊字符导致Native层处理问题。- 海报图的尺寸建议通过
posterStyle控制,而非在posterSource内指定,减少安卓端加载海报时的布局重绘次数。
5. 列表级别的内存优化(关键)
TikTok式视频列表需重点关注内存管理,安卓端对内存敏感度更高:
- 借助FlatList的
onViewableItemsChanged监听可见视频,仅播放当前可见的视频,暂停或卸载不可见的视频。 - 对不可见视频调用
videoRef.current?.pauseAsync(),甚至videoRef.current?.unloadAsync()释放资源,避免多视频同时占用内存与CPU。 - 给FlatList设置
maxToRenderPerBatch和windowSize参数,控制一次性渲染的视频数量,降低初始加载压力。
内容的提问来源于stack exchange,提问作者Rihab
相关产品推荐
相关产品推荐

