特定于平台的导入组件与typescript本身做出反应

Question

我正在使用反应原生与打字稿.我有一个具有以下结构的组件

component
    - component.ios.tsx
    - component.android.tsx

现在我想导入组件.所以,我这样做:

import component from '../component/component';

但它说:

[ts] Cannot find module ../component/component

位置是正确的.我需要在tslint文件中添加一些内容以使其理解.

我也尝试过这样做:

let component = require('../component/component');

这没有给出打字稿错误.但它给出了运行时错误.

element type is invalid expected a string or a class/function but got undefined

有人遇到过这个问题吗？谢谢.

Answer 1

这样做有点烦人的一种方法是创建一个具有相同名称的声明文件。

component
- component.d.ts   <---
- component.android.tsx
- component.ios.tsx

然后

component
- component.d.ts   <---
- component.android.tsx
- component.ios.tsx

更新： 另一种方法是省略其中一个的扩展名，然后打字稿将选择默认的扩展名。

• 组件.tsx
• 组件.android.tsx

Android 会选择特定的 android 文件，而 iOS 将默认为普通文件。

Answer 2

在 tsconfig.json 文件中添加以下行

"moduleSuffixes": [".ios", ".android", ".native", ""],

Answer 3

在最新版本的 React 中，您可以使用Suspense和懒惰来避免过度打字等，例如，如果我想要一个具有 iOS 和 Android 特定代码的Touchable组件，我的结构将如下所示：

- Touchable
   - index.tsx
   - Touchable.android.tsx
   - Touchable.ios.tsx
   - types.d.ts
   

在 index.tsx 上，代码将如下所示：

import React, { FunctionComponent, lazy, Suspense } from 'react';
import { Platform, View } from 'react-native';

import { TouchableProps } from './types.d';

const TouchableComponent = lazy(() =>
  Platform.OS === 'ios'
    ? import('./Touchable.ios')
    : import('./Touchable.android'),
);

const Touchable: FunctionComponent<TouchableProps> = (props) => {
  return (
    <Suspense fallback={<View />}>
      <TouchableComponent {...props} />
    </Suspense>
  );
};

export default Touchable;

因此，我想在我的应用程序的任何地方使用这个组件，我只需要这样做：

import Touchable from './path/to/Touchable';

[...]
<Touchable>
  <Text>Touchable text</Text>
</Touchable>
[...]

类型.d.ts：

export type TouchableSizeType = 'small' | 'regular' | 'big';
export type TouchableType = 'primary' | 'secondary' | 'success' | 'error' | 'warning';

export interface TouchableProps {
  disabled?: boolean;
  size?: TouchableSizeType;
  type?: TouchableType;
  onClick?: (event?: Event) => Promise<void>;
}

Answer 4

这一切都是有道理的，因为文件 at../component/component.tsx不存在。

没有尝试过，但这可以学习 TS 理解此类导入

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