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

Posted

技术标签:

【中文标题】React-Native 应用程序的平台特定 ios/android 打字稿文件的相对导入【英文标题】:Relative import of platform specific ios/android typescript files for React-Native app 【发布时间】:2017-12-04 17:04:28 【问题描述】:

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

虽然当我将组件导入MyView.tsx 时,它会报错。

MyView.tsx(5,38):错误 TS2307:找不到模块“./MyComponent”。

我已尝试将我的tsconfig 文件路径修改为以下内容:

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

虽然我还是有同样的问题。

你们中有人知道如何解决这个问题吗?

谢谢

【问题讨论】:

你是如何导入MyComponent的?是不是像下面import MyComponent from '../MyComponent'; Platform specific import component in react native with typescript的可能重复 【参考方案1】:

由于一个原因,这种方法基本上行不通,一旦你的 ts 文件被转译,相对路径就不再存在,编译器添加“.ios”或“.android”并停止抱怨,所以输出将阅读纯 JS 时不适用于 react-native 方面。

我通过在同一个文件夹中创建一个类型 (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';

【讨论】:

你是如何导入这个的?当我们导入 import component from './MyComponent' 时,它会失败并显示“找不到模块:错误无法解析 MyComponent”。 对不起,我是在一年前写的,我不记得确切的语法是什么,但听起来你的代码中可能存在一些命名冲突,请确保 ./MyComponent 正在导出 MyComponent命名类等 这里要补充一点:declare var _test: typeof ios;declare var _test: typeof android; 行是在 androidios 发散时使 TypeScript 编译器抱怨的技巧。然而,编译器只有在 skipLibCheck: false in tsconfig.json(默认)时才会抱怨。 谢谢,用这个答案(有点),它的工作原理!它的例子是 FontFamilies.d.ts github.com/quincycs/react-native-q-starter/commit/… _test 技巧是否也适用于组件?我有一个具有相同道具定义的组件,但仍然出现Subsequent variable declarations must have the same type 错误...

以上是关于React-Native 应用程序的平台特定 ios/android 打字稿文件的相对导入的主要内容,如果未能解决你的问题,请参考以下文章

React-native 无法打开 ios 模拟器调试菜单

React-Native 更改 iOS 和 Android 文件夹的默认位置

React Native 取消链接 Ios 库

React-native 中的生命周期管理

使用react-native做一个简单的应用-03欢迎界面

关闭键盘 React-Native