React Native集成react-native-video播放视频白屏且应用无响应如何解决

第一步：修复现有代码错误 #

• 样式属性命名错误：react-native 所有样式属性均为驼峰命名，你当前写的zindex属于无效属性，需修改为zIndex，否则会导致视频层级异常被其他元素遮挡
• 缺少自动播放配置：react-native-video 默认paused属性值为true，未显式设置为false时视频默认不会启动播放，对应版本存在播放状态逻辑死锁问题，会直接阻塞主线程触发ANR。修正后代码如下：

<Video 
  source={require("./happy.mp4")}
  style={styles.video}
  repeat
  resizeMode="cover"
  muted
  rate={1.0}
  paused={false} // 新增该行开启自动播放
/>

修正后的样式代码：

const styles = StyleSheet.create({
  video: {
    position: 'absolute',
    zIndex: 0, // 修正为驼峰命名
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
  }
})

同时确认Video组件的父容器设置了flex: 1占满全屏，否则绝对定位的视频会因为父容器宽高为0无法正常渲染。

第二步：补全原生端配置 #

仅执行yarn add不会完成react-native-video的全量配置，需额外完成原生端适配：

• iOS端：进入ios目录执行pod install安装原生依赖，真机调试时需要在Xcode项目设置中开启「Background Modes」权限，勾选「Audio, AirPlay, and Picture in Picture」
• Android端：在android/app/src/main/AndroidManifest.xml的manifest标签下添加权限配置，同时确认项目minSdkVersion ≥ 16：

<uses-permission android:name="android.permission.INTERNET" />

配置完成后执行npx react-native link react-native-video，再重新编译项目运行。

第三步：排查视频资源问题 #

• 确认happy.mp4的相对路径和当前组件文件的路径匹配，路径错误导致的资源加载失败会触发加载死锁引发ANR
• 确认视频编码为标准H.264格式，其他编码格式原生播放器不支持，会出现无限加载的问题，可替换为小体积的标准H.264测试视频验证问题

第四步：修复版本兼容问题 #

你当前使用的react-native@0.64.2和react-native-video@5.1.1存在已知的安卓端主线程阻塞兼容bug，可先降级到5.0.2版本验证：

yarn remove react-native-video
yarn add react-native-video@5.0.2
# 重新安装iOS原生依赖
cd ios && pod install && cd ..
# 清空缓存重新编译
npx react-native start --reset-cache

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