React Native运行Android端报错：无法解析EldenRing模块

问题现象 #

执行npm start、npm run android启动React Native应用时抛出模块解析错误，无法从/src/navigation/StackNavigator.js中找到../listVideos/Accion/EldenRing组件，错误提示遍历所有支持后缀的同名文件、对应index入口文件均未匹配到资源。

涉及的EldenRing组件代码如下：

import * as React from 'react';
import Video from 'react-native-video';

const EldenRing = () => {
  return (
    <Video
      source={(require = '../../../videos/EldenRing.mp4')}
      // eslint-disable-next-line react-native/no-inline-styles
      style={{width: '100%', height: 300}}
      controls={true}
      resizeMode={'cover'}
    />
  );
};

export default EldenRing;

涉及的StackNavigator路由配置代码如下：

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Home from '../pantallas/Home';
import ImageAccion from '../listImagenes/ImageAccion';
import EldenRing from '../listVideos/Accion/EldenRing';
import EvilDead from '../listVideos/Accion/EvilDead';
import FarCry from '../listVideos/Accion/FarCry';
import GodOfWar from '../listVideos/Accion/GodOfWar';
import Horizon from '../listVideos/Accion/Horizon';
import ImageEstrategia from '../listImagenes/ImageEstrategia';
import Age from '../listVideos/Estrategia/Age';
import Atom from '../listVideos/Estrategia/Atom';
import Black from '../listVideos/Estrategia/Black';
import Caesar from '../listVideos/Estrategia/Caesar';
import Civilization from '../listVideos/Estrategia/Civilization';
import ImageArcade from '../listImagenes/ImageArcade';
import Donkey from '../listVideos/Arcade/Donkey';
import Metal from '../listVideos/Arcade/Metal';
import Out from '../listVideos/Arcade/Out';
import Space from '../listVideos/Arcade/Space';
import Tetris from '../listVideos/Arcade/Tetris';

const Stack = createNativeStackNavigator();
const StackNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="Juegos">
      <Stack.Screen
        name="Juegos"
        component={Home}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="ImAccion"
        component={ImageAccion}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="EldenRing"
        component={EldenRing}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="EvilDead"
        component={EvilDead}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="FarCry"
        component={FarCry}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="GodOfWar"
        component={GodOfWar}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Horizon"
        component={Horizon}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="ImEstrategia"
        component={ImageEstrategia}
        options={{headerShown: false}}
      />
      <Stack.Screen name="Age" component={Age} options={{headerShown: false}} />
      <Stack.Screen
        name="Atom"
        component={Atom}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Black"
        component={Black}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Caesar"
        component={Caesar}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Civilization"
        component={Civilization}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="ImArcade"
        component={ImageArcade}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Donkey"
        component={Donkey}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Metal"
        component={Metal}
        options={{headerShown: false}}
      />
      <Stack.Screen name="Out" component={Out} options={{headerShown: false}} />
      <Stack.Screen
        name="Space"
        component={Space}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Tetris"
        component={Tetris}
        options={{headerShown: false}}
      />
    </Stack.Navigator>
  );
};

export default StackNavigator;

完整错误信息：

Error: Unable to resolve module ../listVideos/Accion/EldenRing from /src/navigation/StackNavigator.js: 
None of these files exist:
- src/listVideos/Accion/EldenRing(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
- src/listVideos/Accion/EldenRing/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

问题根因 #

1. 模块导入路径/文件名不匹配：React Native的Metro打包器严格区分文件路径和文件名大小写，要么是listVideos/Accion目录下的EldenRing组件文件名和导入名大小写不一致，要么是组件实际存放路径和导入时写的相对路径不匹配，另外Metro缓存残留也会导致路径正确时仍报找不到模块。
2. 视频组件source属性语法错误：现有代码写的source={(require = '../../../videos/EldenRing.mp4')}是错误的变量赋值语法，就算模块解析成功，视频也无法正常加载。

修复步骤 #

• 校验文件路径与文件名
  进入项目目录确认/src/listVideos/Accion/路径下确实存在EldenRing组件文件，文件名和导入语句中的EldenRing完全大小写一致，不要出现命名为eldenRing.js、Eldenring.js这类大小写不匹配的情况。如果listVideos文件夹不是直接存放在/src/根目录下，对应修正StackNavigator中的导入相对路径即可。
• 修正Video组件的source写法
  将EldenRing组件中Video标签的source属性改为正确的资源引入语法：

<Video
  source={require('../../../videos/EldenRing.mp4')}
  // eslint-disable-next-line react-native/no-inline-styles
  style={{width: '100%', height: 300}}
  controls={true}
  resizeMode={'cover'}
/>

• 清除缓存重启服务
  关闭当前正在运行的Metro服务，执行以下命令清除缓存后重新启动：

npx react-native start --reset-cache

新开终端窗口执行npm run android重新编译运行安卓应用即可。

• 额外校验：确认EldenRing.mp4文件确实存放在../../../videos/对应的路径下，文件名大小写完全匹配，避免后续出现视频资源加载失败的问题。

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