与打字稿反应本机的平台特定导入组件

Question

我正在使用带有 typescript 的 react native。我有一个具有以下结构的组件

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

然后

import { file } from "../group/file";

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

• component.tsx
• component.android.tsx

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

Answer 2

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

- 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>
[...]

Types.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 3

假设您的组件名称是 ProgressBar，因此创建 index.d.ts 并在 index.d.ts 中调整您的代码

import {Component} from 'react';
import {Constructor, NativeMethodsMixin} from 'react-native';

export interface ProgressBarProps {
  progress: number;
}

declare class ProgressBarComponent extends Component<ProgressBarProps> {}

declare const ProgressBarBase: Constructor<NativeMethodsMixin> &
  typeof ProgressBarComponent;

export default class ProgressBar extends ProgressBarBase {}

所以你的组件文件夹应该是这样的

component/
 - index.android.tsx
 - index.ios.tsx
 - index.d.ts

Answer 4

这一切都说得通，因为../component/component.tsx 的文件不存在。

没试过，不过这个可以学习TS理解这样的导入

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