Question

情况：我正在为同一应用程序开发一个具有不同版本的React Native项目。为此，我使用了适用于Android的应用程序版本和针对iOS的iOS构建目标（至少在将来）。我已经制作了一个本地android模块，可以返回正在使用的android build风格。我的目标是能够导入不同的React组件以针对每种口味显示。

问题：我的最初想法是有条件地导入React本机组件以针对每种口味显示，但是我已经了解到条件导入在JavaScript中不是问题，它们必须在顶级范围内。有没有一种方法可以解决此问题，而无需为每个构建导入每个文件？（我想避免通过导入仅在应用程序其他版本中使用的组件来扩大二进制文件的大小。）

我想做什么：

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;

Answer 1

您可以尝试使用require

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

export default Component;

Answer 2

您可以使用Conditional imports in React Native

中的解决方案

const MODULE_NAME = <CONDITION> ? require(MODULE_A) : require(MODULE_B);

您能否有条件地导入文件以响应本机？

2 个答案: