React Native 这些文件都不存在：该路径

fnatzsnv  于 2023-01-27  发布在  React
关注(0)|答案(1)|浏览(148)

当我尝试在Android模拟器上运行React原生应用程序时，出现以下错误：

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)

源代码/组件/垫片/垫片.组件.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 />;
};

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：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

请帮助我，我已经尝试谷歌几乎一个星期的这个错误已经，但没有任何改变，请帮助

react-native

1条答案

按热度按时间
rlcwz9us

rlcwz9us1#

正如评论中所建议的，我会在文件树如此之深的项目中使用babel-plugin-module-resolver。
要执行此操作，可以使用docs中所述的以下步骤：
npm install --save-dev babel-plugin-module-resolver
在你的.babelrc文件中指定插件的根目录或者别名。下面是一个例子：

{
      "plugins": [
        ["module-resolver", {
          "root": ["./src"],
          "alias": {
            "test": "./test",
            "underscore": "lodash"
          }
        }]
      ]
    }

.babelrc.jsversion在. babelrc.js文件中使用自定义根目录或别名指定插件。

const plugins = [
  [
    require.resolve('babel-plugin-module-resolver'),
    {
      root: ["."],
      alias: {
        "src": "./src"
      }
    }
  ]
];

现在您可以使用以下命令：

import star from "root/assets/star";

在这个上面

import star from "../../../../assets/star";
赞(0）分享  回复(0）举报  2023-01-27
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com