React Native应用添加视频失败：已安装react-native-video并执行link操作

嘿，我看你在使用react-native-video加载本地视频时遇到了问题，我之前开发RN应用时也踩过类似的坑，给你几个实用的排查和解决步骤：

1. 修正本地视频的导入方式 #

你当前用import导入本地视频文件的方式可能无法被React Native的打包工具正确识别，建议换成require的方式来引入资源：

修改后的代码：

import React, {Component} from 'react'; 
import {View, Text, StyleSheet} from 'react-native'; 
import {Video} from 'react-native-video'; 

// 用require替代import导入本地视频
const LightVideo = require("./big_buck_bunny.mp4");

export default class App extends Component { 
  render() { 
    return ( 
      <View style={{flex: 1}}> {/* 给父View添加flex:1确保占满屏幕 */}
        <Text>React Native Video</Text> 
        <Video 
          source={LightVideo} 
          resizeMode="cover" 
          style={StyleSheet.absoluteFill} 
          // 添加onError回调可以查看具体错误信息，方便排查
          onError={(error) => console.log('视频加载错误:', error)}
        /> 
      </View> 
    ); 
  } 
}

2. 检查视频文件的位置与命名 #

• 确保big_buck_bunny.mp4确实和你的App组件文件在同一个目录下
• 注意文件名的大小写：iOS系统对文件名大小写敏感，如果文件名实际是Big_Buck_Bunny.mp4，但你写的是小写，就会加载失败

3. 配置Metro打包工具（针对RN 0.60+版本） #

如果你的React Native版本较新，Metro默认可能不会处理mp4格式的资源，需要在项目根目录的metro.config.js中添加mp4扩展名：

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), {
  resolver: {
    assetExts: [...getDefaultConfig(__dirname).resolver.assetExts, 'mp4'],
  },
});

4. 手动检查自动链接是否生效 #

虽然你用了react-native link，但有时候自动链接可能不彻底：

iOS端 #

• 打开Xcode项目，进入Build Phases -> Copy Bundle Resources，确认你的视频文件已经被添加到列表中，如果没有，手动将视频文件拖入该列表

Android端 #

• 检查android/app/src/main/assets文件夹，确保视频文件已放入其中；或者如果是用require引入的，确保Metro能正确识别到该资源

完成以上步骤后，记得重启RN服务（执行npm start --reset-cache清除缓存），应该就能正常加载本地视频了。

内容的提问来源于stack exchange，提问作者Muhammad Asad Chattha