Reactjs React Native with TypeScript错误无法解析模块

我刚刚用React Native Typescript模板创建了一个新项目。但我发现，当我导入一个新组件时，它会抛出以下错误。我的新组件位于

src/screens/HomeScreen.tsx中

error: Error: Unable to resolve module `src/screens/HomeScreen` from `App.tsx`: src/screens/HomeScreen could not be found within the project.

如果我在App.tsx中内联使用相同的组件，那么它就可以正常工作。但从另一个文件导入会导致此问题。我试图删除并重新创建该问题，但仍在发生

有人能帮我解决这个问题吗。提前谢谢

App.tsx

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import HomeScreen from 'src/screens/HomeScreen';

const App = () => {
  return (
      <HomeScreen/>
  );
};

export default App;

从“React”导入React；
进口{
安全区域视图，
样式表，
滚动视图，
看法
文本，
状态栏，
}从“反应本机”；
从“src/屏幕/主屏幕”导入主屏幕；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

HomeScreen.tsx

import React from 'react'
import {Text} from 'react-native'

const HomeScreen = (): any => {
    return (
        <>
            <Text>test </Text>   
        </>
    )
}

export default HomeScreen

从“React”导入React
从“react native”导入{Text}
常量主屏幕=（）：任意=>{
返回(
试验
)
}
导出默认主屏幕

文件夹结构

问题在于
主屏幕的绝对路径导入。您只需将其更改为

从“./src/screens/HomeScreen”导入主屏幕；

它应该会起作用。您可以找到更多信息。
尝试添加扩展名
主屏幕。tsx
也可以检查此选项，您可能会喜欢它：