11

我有一个新的带有 TypeScript 的 React Native 0.61.1 项目。它曾经完美地显示新项目的欢迎屏幕。我添加了一个类，尝试导入它（它甚至自动完成），但它说找不到该组件。

这是我的tsconfig.json（所有代码都在我的src文件夹中，位于我的项目根目录中）：

{
    "compilerOptions": {
      // Target latest version of ECMAScript.
      "target": "esnext",
      // Search under node_modules for non-relative imports.
      "moduleResolution": "node",
      // Process & infer types from .js files.
      "allowJs": true,
      // Don't emit; allow Babel to transform files.
      "noEmit": true,
      // Enable strictest settings like strictNullChecks & noImplicitAny.
      "strict": true,
      // Disallow features that require cross-file information for emit.
      "isolatedModules": true,
      // Import non-ES modules as default imports.
      "esModuleInterop": true,
      "baseUrl": "src",
      "jsx": "react-native"
    }
  }

注意baseUrl那里。在我添加它之前它也不起作用。

这是我的项目结构：

在此处输入图像描述

我的OnboardingScreen.tsx（我在截屏Onboarding.tsx 后重命名它，所以这不是问题）包含一个带有渲染方法的简单组件类，默认导出。

这是我的App.tsx：

import React from 'react';
import {
  StatusBar,
} from 'react-native';
import OnboardingScreen from 'views/screens/OnboardingScreen';

const App: () => React.ReactNode = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <OnboardingScreen/>
    </>
  );
};


export default App;

当我键入Onbo...时，它甚至会自行完成导入。但是当我运行应用程序时，我得到了臭名昭著的错误：

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

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*

在你问之前：是的，每次尝试后我都会执行上述所有操作，甚至重新启动 Vscode。

我还尝试添加以下内容tsconfig.json：

 "paths": {
    "views/*":["src/views/*"]
 }

虽然也没有任何改变。我究竟做错了什么？（我在 TypeScript 3.6.2 上）

更新：显然，paths完全被忽略了，但是如果我将一个package.json文件放入我想通过导入（例如components文件夹）引用的每个根文件夹中，它就会被拾取。例如，我将以下内容package.json放入components：

{
    "name": "components"
}

然后我的代码可以引用它。虽然，我仍然不知道为什么它不能与tsconfig path.

4

1 回答 1

8

解决此错误的一种方法是：

添加包含内容的 package.json 文件：{"name": "@services"}在views文件夹中。

进口必须是import OnboardingScreen from '@views/screens/OnboardingScreen';

React-native 和 TypeScript 使用单独的方法来查找具有绝对路径的文件。这种方式为我解决了这个错误:)

于 2020-04-28T23:41:47.423 回答