React Native报错：路径正确却提示None of these files exist

问题重现 #

导入Test组件时触发如下错误：

None of these files exist:
  * src\pages\Test(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * src\pages\Test\index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
   7 |
   8 | import React from 'react';
>  9 | import Test from './src/pages/Test';
     |                   ^
  10 |
  11 | function App() {
  12 |   return (

Test组件代码：

import react from 'react';
import {View, Text} from 'react-native';
    
export default function Test() {
  return (
    <View>
      <Text>Test</Text>
    </View>
  );
}

解决方法 #

1. 修正导入路径 #

• 若当前导入文件（如App.js）在项目根目录，且Test组件文件名为Test.js（而非Test文件夹下的index.js），需明确指定文件名：

  import Test from './src/pages/Test/Test';
  

• 若当前导入文件在src文件夹内部，路径需去掉前缀./src/，改为./pages/Test或./pages/Test/Test（根据实际文件名调整）

2. 核对组件文件命名 #

• 若想通过./src/pages/Test直接导入，需将组件文件命名为index.js并放在Test文件夹下
• 确保组件文件扩展名属于React Native支持的类型（.js/.jsx/.ts/.tsx等），错误信息已列出所有兼容扩展名

3. 修复组件内的大小写错误 #

组件内导入React时首字母需大写，否则会导致后续渲染异常：

import React from 'react'; // 修正为大写开头
import {View, Text} from 'react-native';
    
export default function Test() {
  return (
    <View>
      <Text>Test</Text>
    </View>
  );
}

4. 清除缓存重启服务 #

缓存可能导致路径识别异常，执行以下命令重置：

# 清除Metro缓存
npx react-native start --reset-cache
# 重新运行项目
npx react-native run-android # 安卓环境
# 或
npx react-native run-ios # iOS环境

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