相对导入React-Native应用程序的平台特定的ios / android打字稿文件

Question

我有一个基于React-Native平台具有2个不同设计的组件：MyComponent.ios.tsx和MyComponent.android.tsx。

虽然将组件导入MyView.tsx时会抱怨。

MyView.tsx（5,38）：错误TS2307：找不到模块“ ./MyComponent”。

我试图将tsconfig文件路径修改为以下内容：

"paths": {
  "*": ["*", "*.ios", "*.android"]
},

虽然我仍然有同样的问题。

你们当中有人知道如何解决此问题吗？

谢谢

Answer 1

基本上，这种方法由于一个原因不起作用，一旦您的 ts 文件被转译，编译器将不再存在相对路径来添加“.ios”或“.android”并停止抱怨，因此输出将不起作用阅读纯 JS 时反应原生方面。

我通过在同一个文件夹中创建一个打字（MyComponent.d.ts）文件来让它工作，例如：

// This file exists for two purposes:
// 1. Ensure that both ios and android files present identical types to importers.
// 2. Allow consumers to import the module as if typescript understood react-native suffixes.
import DefaultIos from './MyComponent.ios';
import * as ios from './MyComponent.ios';
import DefaultAndroid from './MyComponent.android';
import * as android from './MyComponent.android';

declare var _test: typeof ios;
declare var _test: typeof android;

declare var _testDefault: typeof DefaultIos;
declare var _testDefault: typeof DefaultAndroid;

export * from './MyComponent.ios';

Answer 2

自 TypeScript 4.7 以来，现在有一个新选项可以处理本机反应，也可以处理 Web

{
    "compilerOptions": {
        "moduleSuffixes": [".android", ".ios", ""]
    }
}

您可以在这里阅读更多相关信息： https: //www.typescriptlang.org/tsconfig#moduleSuffixes