你能在React Native中有条件地导入文件吗？

Question

情况：我正在使用React Native开发一个具有不同版本的应用程序。为此，我在Android上使用应用程序flavor，在iOS上使用构建目标。我已经制作了一个可以返回正在使用的Android构建flavor的本地Android模块。我的目标是能够导入不同的React组件以显示每个flavor。

问题：我的最初想法是有条件地导入React Native组件以显示每个flavor，但我现在明白，在JavaScript中没有条件导入，它们必须在顶层范围内定义。有没有办法解决这个问题而不导入每个构建的每个文件？（我想避免通过导入仅在应用程序的其他flavor中使用的组件来使二进制文件变得更大）。

我想做的：

import { NativeModules } from 'react-native';

var appFlavor;

NativeModules.RNVariantsLib.getBuildFlavor((err ,flavor) => {
  console.log('flavor ' + flavor);
  appFlavor = flavor;
});

if(appFlavor == 'flavorA'){
  import Component from './a';
}
if(appFlavor == 'flavorB'){
  import Component from './b';
}

export default Component;

- user3512797

---

如果您的问题得到解决，选择其中一个答案会很好。 - Rafael Cavalcante

@RafaelCavalcante https://dev59.com/MlUL5IYBdhLWcg3wb3tz#68509272 - x00

Answer 1

你可以尝试使用 require。

let Component = null;
if(appFlavor == 'flavorA'){
  Component = require('./a');
}
if(appFlavor == 'flavorB'){
  Component = require('./b');
}

export default Component;

- Tuan Luong

Answer 2

你可以使用React Native中的条件导入解决方案。 const MODULE_NAME = <CONDITION> ? require(MODULE_A) : require(MODULE_B);

- limco