React Native导入组件报错：无法解析../components路径求助

针对你遇到的“iOS Bundling failed Unable to resolve [文件路径] from [请求文件路径]”错误，结合你的代码和文件夹结构，按以下步骤排查：

1. 校验路径层级是否正确 #

从你的导入代码import { CustomButton } from "../components";来看，假设当前文件位于app目录下（比如app/index.js），../components会指向与app同级的components文件夹。如果你的components文件夹实际在app内部，或者当前文件在app的子目录（比如app/screens/），层级路径就会出错。

• 可以在当前文件所在目录的终端执行ls ../components，验证路径是否存在对应文件。

2. 检查文件导出与导入的匹配性 #

• 如果CustomButton是components文件夹下的独立文件（比如components/CustomButton.js）：
  • 若文件用默认导出（export default CustomButton），导入时不需要大括号：import CustomButton from "../components/CustomButton";
  • 若用命名导出（export const CustomButton = ...），则需要确保导入路径指向具体文件：import { CustomButton } from "../components/CustomButton";
• 如果是通过components/index.js统一导出，必须确保index.js里正确声明了导出：

  // components/index.js
  export { CustomButton } from './CustomButton';
  

3. 注意文件名/文件夹名的大小写 #

iOS文件系统对大小写敏感，比如Components和components、custombutton.js和CustomButton.js会被识别为不同路径，务必保证导入路径的大小写和实际文件完全一致。

4. 尝试更彻底的缓存清理与依赖重装 #

除了npm start -- --reset-cache，还可以试试：

• 用Expo命令重置缓存：expo r -c
• 删除依赖后重装：

  rm -rf node_modules package-lock.json
  npm install
  

5. 检查Metro配置（若有自定义） #

如果项目中修改过metro.config.js，确保配置没有排除components文件夹，且resolver的sourceExts包含了你使用的文件扩展名（比如.jsx、.tsx）。

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