react native with typescript中特定于平台的导入组件

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

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

现在我想导入组件。因此，我正在这样做：

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

但它说：

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

位置正确。我需要向tslint文件中添加一些内容以使其理解

我还试着做：

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

这并没有给出typescript错误。但它给出了一个运行时错误

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

有人碰到过这个问题吗？

---

谢谢。

这一切都有意义，因为

。/component/component.tsx

上的文件不存在

还没有尝试过，但这可以让TS了解这些导入

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

---

一种有点烦人的方法是创建一个同名的声明文件

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

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

• component.tsx
• component.android.tsx

---

Android将拾取特定的Android文件，iOS将默认为普通文件。

对于React的最新版本，您可以使用Suspend和lazy来避免过度打字等，例如，如果我想要一个组件可触摸的，带有iOS和Android的特定代码，我的结构将如下所示：

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

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

import { TouchableProps } from './types';

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;

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

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

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

import { TouchableProps } from './types';

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 React，{FunctionComponent，lazy，suspend}来自'React'；
从“react native”导入{Platform，View}；
从“./types”导入{TouchableProps}；
constTouchableComponent=惰性（（）=>
Platform.OS===“ios”
？导入（“./Touchable.ios”）
：导入（'./Touchable.android'），
);
常量可触摸：FunctionComponent=（道具）=>{
返回(
);
};
导出默认可触摸；

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

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

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

import Touchable from./path/to/Touchable'；
[...]
可触摸文本
[...]

假设您的组件名称是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<CheckBoxProps> {}

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

export default class ProgressBar extends ProgressBarBase {}

---

这对我不起作用。类型脚本3.3和VSCode 1.45