React Native中的条件导入

Question

我在让条件导入在本机反应中工作时遇到了麻烦。

我有一些在React Web应用程序和React Native中使用的文件。

我想要的是：

if(process.env.REACT_PLATFORM === 'WEB') {
    import('some_file').then(({someFunc})=> someFunc())
}

因为'some_file'进口了react_router。

但是，此导入仍在进行，RN Metro捆绑器抛出

UnableToResolveError: Unable to resolve module 'react-router' from 'some_file'.

即使我将其替换为：

if(false) {
    import('some_file').then(({someFunc})=> someFunc())
}

它仍然尝试加载some_file。无论如何，是否只有在满足条件的情况下才导入/需要此文件？

干杯!

编辑：我尝试过的事情：

• 需要而不是导入。
• https://babeljs.io/docs/plugins/syntax-dynamic-import/

Answer 1

平台特定的进口；

您可以将导入放置在带有native.js扩展的组件中，它只会绑定到移动设备 (ios/android)。例如 MyComponent.native.js 然后你有一个同名但.js扩展名相同的 web 组件。例如我的 Component.js

当您从 './components/MyComponent' 导入 MyComponent 时，正确的一个将被导入而另一个被忽略。

Answer 2

经过一番搜索，结果发现动态导入可能有点痛苦。

这是我想出的解决方案，我已经在 node.js 中尝试过了。

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

或者，我想你可以做这样的事情；

const MODULE_TO_IMPORT = 'MODULE_IMPORT_STRING';
const MODULE_NAME = import(MODULE_TO_IMPORT).then(({someFunc}) => someFunc());

但问题是这些都需要以任何方式导入模块。