javascript - 在 React Native 中根据命名约定导入 typescript 文件

Question

所以我有三个 ts 文件，名称如下:

• MyModule.ios.ts
• MyModule.android.ts
• MyModule.ts(这是空的)

前两个文件有一个名为 setup() 的方法，需要基于平台运行 Metro bundler 也会做解析，它会在为 ios 和 .android 构建时尝试导入 .ios在为 Android 构建时..

我还有另一个文件，它像这样导入这个方法:

import { setup } from 'MyModule';

问题是，我不确定这是否会解决 .android 和 .ios 文件。进行这种代码拆分的正确方法是什么？

我在这里找到了这个解决方法，但我想知道是否有更好的方法:https://github.com/Microsoft/TypeScript/issues/8328#issuecomment-219583152

Answer 1

如果要为 iOS 和 Android 使用单独的文件，则需要将它们称为 MyModule.ios.ts 和 MyModule.android.ts 扩展名。不需要空的 MyModule.ts 文件。

然后像没有特定于平台的扩展一样导入它们。 React Native 将根据运行平台自动选择正确的文件。

import { setup } from './MyModule'; // Will automatically import either MyModule.ios.ts or MyModule.android.ts

请参阅相关文档:https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions

---

如果您不想使用单独的文件，您可以使用Platform 模块。这对于您希望特定于平台的小代码片段非常有用。

import { Platform } from 'react-native';

if(Platform.OS === 'ios') {
  // iOS specific code here
} else if(Platform.OS === 'android') {
  // Android specific code here
} else {
  // Other platform
}

参见:https://facebook.github.io/react-native/docs/platform-specific-code#platform-module