react-native-video播放异常：安卓真机空白、模拟器卡顿无法播放

针对你遇到的安卓真机空白、模拟器卡顿的问题，按以下步骤排查解决：

1. 验证视频编码兼容性 #

安卓对本地MP4视频有严格编码要求，必须是H.264（AVC）视频编码 + AAC音频编码，否则会出现无法播放或显示异常。

• 用FFmpeg转码符合标准的视频：

  ffmpeg -i video1.mp4 -c:v libx264 -c:a aac -strict -2 output.mp4
  

• 替换原视频后重新打包测试。

2. 调整Video组件属性 #

• 添加useTextureView={true}：安卓部分设备对SurfaceView支持不佳，改用TextureView可解决渲染空白问题；同时新增错误回调捕获潜在问题：

  <Video
    source={require('../../../storage/videos/video1.mp4')}
    resizeMode="cover"
    repeat={true}
    paused={false}
    useTextureView={true}
    style={{height: 400, width: 400}}
    onError={(err) => console.log('视频错误:', err)}
  />
  

• 先移除position: 'absolute'测试，绝对定位可能导致真机渲染层级异常，确认播放正常后再调整布局。

3. 修复Metro资源打包配置 #

RN0.70的Metro默认可能未识别MP4格式，需手动添加到资源扩展名列表：

• 在项目根目录的metro.config.js中修改：

  const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
  
  const config = {};
  module.exports = mergeConfig(getDefaultConfig(__dirname), {
    resolver: {
      assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'mp4'],
    },
  });
  

• 修改后重启Metro服务，重新打包项目。

4. 检查资源路径与打包方式 #

• 简化资源路径：将视频文件移到与Video.js同目录，用require('./video1.mp4')测试，排除层级路径导致的打包问题。
• 若仍有问题，尝试将视频放入安卓原生资源目录android/app/src/main/res/raw（注意文件名不能有大写和特殊字符），然后用以下方式引用：

  <Video source={{uri: 'video1'}} ... />
  

5. 版本适配与依赖检查 #

• react-native-video 5.2.1与RN0.70存在部分兼容性问题，可尝试升级到最新稳定版（如6.x），升级后按官方文档重新配置安卓和iOS依赖。
• 确认安卓项目的compileSdkVersion为33（RN0.70要求的版本），检查android/build.gradle中的配置：

  buildscript {
    ext {
      compileSdkVersion = 33
      // 其他配置...
    }
  }
  

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