这些文件都不存在:路径

Question

当我尝试在android模拟器上运行react native应用程序时，我得到了这个错误:

None of these files exist:
* srccomponentsspacerspacer.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)
* srccomponentsspacerspacer.componentindex(.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:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcnode-hasteDependencyGraphModuleResolution.js:152:15)
at DependencyGraph.resolveDependency (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcnode-hasteDependencyGraph.js:264:43)
at Object.resolve (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrclibtransformHelpers.js:170:21)
at resolveDependencies (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcDeltaBundlergraphOperations.js:466:33)
at processModule (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcDeltaBundlergraphOperations.js:232:31)
at async traverseDependenciesForSingleFile (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcDeltaBundlergraphOperations.js:221:3)
at async traverseDependencies (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcDeltaBundlergraphOperations.js:147:7)
at async DeltaCalculator._getChangedDependencies (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcDeltaBundlerDeltaCalculator.js:263:42)
at async DeltaCalculator.getDelta (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcDeltaBundlerDeltaCalculator.js:90:16)
at async DeltaBundler.getDelta (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcDeltaBundler.js:74:12)
at async IncrementalBundler.updateGraph (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcIncrementalBundler.js:245:19)
at async Server._explodedSourceMapForURL (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcServer.js:1166:23)
at async Promise.all (index 0)
at async Server._symbolicate (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcServer.js:1088:26)
at async Server._processRequest (C:UsersrubyhDocumentsprojectMealsToGonode_modulesmetrosrcServer.js:458:7)

src/组件/隔离/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 />;
};

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>
);
};

反应:18.1.0react-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

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

Answer 1

正如评论中建议的那样，我将在具有如此深的文件树的项目中使用babel-plugin-module-resolver。

要做到这一点，您可以使用以下步骤，如文档中所述:

npm install --save-dev babel-plugin-module-resolver

在.babelrc中使用自定义的根或别名指定插件。下面是一个例子:

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

.babelrc.js在.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";