React Native安卓模拟器运行报错：找不到Spacer组件文件，求帮助

错误日志 #

None of these files exist:
  * src\components\spacer\spacer.component(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
  * src\components\spacer\spacer.component\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
   5 | import { SvgXml } from "react-native-svg";
   6 |
>  7 | import Spacer from "../../../components/spacer/spacer.component";
     |                     ^
   8 | import star from "../../../../assets/star";
   9 | import open from "../../../../assets/open";
  10 |
    at ModuleResolver.resolveDependency (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:152:15)
    at DependencyGraph.resolveDependency (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\node-haste\DependencyGraph.js:264:43)
    at Object.resolve (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\lib\transformHelpers.js:170:21)
    at resolveDependencies (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\DeltaBundler\graphOperations.js:466:33)
    at processModule (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\DeltaBundler\graphOperations.js:232:31)
    at async traverseDependenciesForSingleFile (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\DeltaBundler\graphOperations.js:221:3)
    at async traverseDependencies (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\DeltaBundler\graphOperations.js:147:7)
    at async DeltaCalculator._getChangedDependencies (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:263:42)
    at async DeltaCalculator.getDelta (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:90:16)
    at async DeltaBundler.getDelta (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\DeltaBundler.js:74:12)
    at async IncrementalBundler.updateGraph (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\IncrementalBundler.js:245:19)
    at async Server._explodedSourceMapForURL (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\Server.js:1166:23)
    at async Promise.all (index 0)
    at async Server._symbolicate (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\Server.js:1088:26)
    at async Server._processRequest (C:\Users\rubyh\Documents\project\MealsToGo\node_modules\metro\src\Server.js:458:7)

相关代码 #

src/components/spacer/spacer.component.js #

import React from "react";
import styled from "styled-components/native";

const TopSmall = styled.View`
  margin-top: ${(props) => props.theme.space[1]};
`;

const TopMedium = styled.View`
  margin-top: ${(props) => props.theme.space[2]};
`;

const TopLarge = styled.View`
  margin-top: ${(props) => props.theme.space[3]};
`;

const LeftSmall = styled.View`
  margin-left: ${(props) => props.theme.space[1]};
`;

const LeftMedium = styled.View`
  margin-left: ${(props) => props.theme.space[2]};
`;

const LeftLarge = styled.View`
  margin-left: ${(props) => props.theme.space[3]};
`;

export const Spacer = ({ variant }) => {
  if (variant === "top.medium") {
    return <TopMedium />;
  }
  if (variant === "top.large") {
    return <TopLarge />;
  }
  if (variant === "left.small") {
    return <LeftSmall />;
  }
  if (variant === "left.medium") {
    return <LeftMedium />;
  }
  if (variant === "left.large") {
    return <LeftLarge />;
  }
  return <TopSmall />;
};

src/features/restaurants/components/restaurant-info-card-component.js #

import React from "react";
import styled from "styled-components/native";
import { Text, Image, View } from "react-native";
import { Card } from "react-native-paper";
import { SvgXml } from "react-native-svg";

import { Spacer } from "../../../components/spacer/spacer.component";
import star from "../../../../assets/star";
import open from "../../../../assets/open";

const RestaurantCard = styled(Card)`
  background-color: ${(props) => props.theme.colors.bg.primary};
`;

const RestaurantCardCover = styled(Card.Cover)`
  padding: ${(props) => props.theme.space[3]};
  background-color: ${(props) => props.theme.colors.bg.primary};
`;

const Address = styled(Text)`
  font-family: ${(props) => props.theme.fonts.body};
  font-size: ${(props) => props.theme.fontSizes.caption};
`;

const Title = styled(Text)`
  font-family: ${(props) => props.theme.fonts.heading};
  font-size: ${(props) => props.theme.fontSizes.body};
  color: ${(props) => props.theme.colors.ui.primary};
`;

const Info = styled(View)`
  padding: ${(props) => props.theme.space[3]};
`;

const Rating = styled(View)`
  flex-direction: row;
  padding-top: ${(props) => props.theme.space[2]};
  padding-bottom: ${(props) => props.theme.space[2]};
`;

const Section = styled(View)`
  flex-direction: row;
  align-items: center;
`;

const SectionEnd = styled(View)`
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
`;

export const RestaurantInfoCard = ({ restaurant = {} }) => {
  const {
    name = "Some Restaurant",
    icon = "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/lodging-71.png",
    photos = [
      "https://www.foodiesfeed.com/wp-content/uploads/2019/06/top-view-for-box-of-2-burgers-home-made-600x899.jpg",
    ],
    address = "100 some random street",
    isOpenNow = true,
    rating = 4,
    isClosedTemporarily = true,
  } = restaurant;

  const ratingArray = Array.from(new Array(Math.floor(rating)));

  return (
    <RestaurantCard elevation={5}>
      <RestaurantCardCover key={name} source={{ uri: photos[0] }} />
      <Info>
        <Title>{name}</Title>
        <Section>
          <Rating>
            {ratingArray.map(() => (
              <SvgXml xml={star} width={20} height={20} />
            ))}
          </Rating>
          <SectionEnd>
            {isClosedTemporarily && (
              <Text variant="label" style={{ color: "red" }}>
                CLOSED TEMPORARILY
              </Text>
            )}
            <Spacer variant="left.large" />
            {isOpenNow && <SvgXml xml={open} width={20} height={20} />}
            <Spacer variant="left.large" />
            <Image style={{ width: 15, height: 15 }} source={{ uri: icon }} />
          </SectionEnd>
        </Section>
        <Address>{address}</Address>
      </Info>
    </RestaurantCard>
  );
};

项目环境 #

• react: 18.1.0
• react-native: 0.70.5

项目目录结构 #

📦assets
 ┣ 📜adaptive-icon.png
 ┣ 📜favicon.png
 ┣ 📜icon.png
 ┣ 📜open.js
 ┣ 📜splash.png
 ┗ 📜star.js
 📦node_modules
 📦src
 ┣ 📂components
 ┃ ┗ 📂spacer
 ┃ ┃ ┗ 📜spacer.component.js
 ┣ 📂features
 ┃ ┗ 📂restaurants
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┗ 📜restaurant-info-card-component.js
 ┃ ┃ ┗ 📂screens
 ┃ ┃ ┃ ┗ 📜restaurant.screen.js
 ┣ 📂infrastructure
 ┃ ┗ 📂theme
 ┃ ┃ ┣ 📜colors.js
 ┃ ┃ ┣ 📜fonts.js
 ┃ ┃ ┣ 📜index.js
 ┃ ┃ ┣ 📜sizes.js
 ┃ ┃ ┗ 📜spacing.js
📜.eslintrc.js
📜.gitignore
📜App.js
📜app.json
📜babel.config.js
📜package-lock.json
📜package.json

解决方案 #

1. 修正导入语法（核心问题） #

错误日志中的导入语句使用了默认导入，但spacer.component.js中仅导出了命名组件：

// 错误的导入方式（日志中显示的代码）
import Spacer from "../../../components/spacer/spacer.component";

// 正确的导入方式（需确保实际代码使用此写法）
import { Spacer } from "../../../components/spacer/spacer.component";

注：你提供的餐厅组件代码中已使用正确的命名导入，但错误日志显示运行的是旧代码，需确认代码已保存并同步到模拟器。

2. 验证路径与文件名一致性 #

• 确认餐厅组件文件路径为src/features/restaurants/components/restaurant-info-card-component.js，导入路径../../../components/spacer/spacer.component是正确的（三级向上到src目录，再进入components）
• 检查文件名大小写：Windows系统大小写不敏感，但Metro缓存可能区分，确保代码中路径的大小写与实际文件完全一致
• 确认spacer.component.js无拼写错误，无多余空格或特殊字符

3. 清除Metro缓存 #

Metro缓存可能导致文件变更未被识别，执行以下命令重启服务：

npx react-native start --reset-cache

重启后重新运行Android模拟器：

npx react-native run-android

4. 检查导出与组件使用匹配 #

确保spacer.component.js中export const Spacer的组件名称正确，餐厅组件中使用的<Spacer />名称完全一致，无拼写错误。

额外排查 #

• 检查babel.config.js是否配置了正确的模块解析规则，无自定义路径别名导致解析错误
• 若存在metro.config.js，确认未排除src/components目录的解析

内容的提问来源于stack exchange，提问作者Truong Hao Nhien