React Native编译报错：无法找到ListScreen文件，请求排查

我在Udemy平台学习React Native教程，当在App.js中导入ListScreen时出现编译错误，注释掉ListScreen的导入语句后错误消失。

编译错误信息 #

Failed to compile
Syntax Error

None of these files exist: 

*..\..\..\..\..\.src\screens\ListScreen(.native|ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|tsx|ios.js|native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|native.json|.json)

*..\..\..\..\..\.src\screens\ListScreen\index(.native|ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|tsx|ios.js|native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|native.json|.json)

相关代码 #

App.js #

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./src/screens/HomeScreen";
import ComponentsScreen from "./src/screens/ComponentsScreen";
import ListScreen from ".src/screens/ListScreen";

const navigator = createStackNavigator(
  {
    Home: HomeScreen,
    Components: ComponentsScreen,
  },
  {
    initialRouteName: "Components",
    defaultNavigationOptions: {
      title: "App",
    }
  }
);

export default createAppContainer(navigator);

HomeScreen.js #

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const HomeScreen = () => {
  return <Text style={styles.text}>ProjectWherewoof</Text>
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
  },
});

export default HomeScreen;

ComponentsScreen.js #

import { Text, StyleSheet, View } from "react-native";

const ComponentsScreen = () => {
    const greeting = <Text>Getting Started with React Native</Text>;
    const myname = 'Arturo';

  return (
    <View>
      <Text style={styles.greetingStyle}>{greeting}</Text>
      <Text style={styles.nameStyle}>My name is {myname} !!!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  greetingStyle: {
    fontSize: 45,
  },
 nameStyle: {
    fontSize: 20,
  }
});

export default ComponentsScreen;

ListScreen.js #

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const ListScreen = () => {
  return <Text>List Screen</Text>;
};

const styles = StyleSheet.create({});

export default ListScreen;

文件夹结构 #

项目根目录下包含：

• App.js
• src文件夹，src内有screens文件夹，screens文件夹下包含：
  • HomeScreen.js
  • ComponentsScreen.js
  • ListScreen.js

问题原因及解决方法 #

错误原因是ListScreen的导入路径写错了：
原导入语句：import ListScreen from ".src/screens/ListScreen";
这里的.src缺少了一个斜杠，正确的相对路径应该是./src/screens/ListScreen，因为App.js在根目录，需要用./指向当前目录下的src文件夹。

修改后的导入语句：

import ListScreen from "./src/screens/ListScreen";

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