Question

我在使用react native进行条件导入时遇到了一些麻烦。

我有一些文件用于反应网络应用程序和反应原生。

我想要的是什么：

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

因为＆＃39; some_file＆＃39;导入react_router。

然而，这种导入仍在进行，RN地铁捆绑器抛出

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

Platform specific imports;

您可以将导入放置在扩展名为native.js的组件中，并且该导入将仅捆绑在移动设备（ios / android）上。例如MyComponent.native.js然后，您将拥有一个具有相同名称但扩展名为.js的Web组件。例如我的Component.js

从“ ./components/MyComponent”导入MyComponent时，将导入正确的一个，而忽略另一个。

Answer 2

经过一番搜索，结果表明动态导入可能只是一种痛苦。

这是我提出的解决方案，我已经在节点中尝试过了。

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());

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

Answer 3

对于 React-navive-web，我们可以使用特定于平台的管理代码，这些代码也将在移动应用程序和 Web 中进行管理

<块引用>

Web-specific code # 细微的平台差异可以使用Platform 模块。

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  height: (Platform.OS === 'web') ? 200 : 100,
});

<块引用>

例如，在您的项目中使用以下文件：

MyComponent.android.js
MyComponent.ios.js
MyComponent.web.js
And the following import:

从'./MyComponent'导入MyComponent； React Native 会自动为每个特定的目标平台导入正确的变体。

Answer 4

Platform specific imports 很好，但不会在网络上帮助您。

react-native 中的

package.json 部分是您的朋友：

"react-native": {
  "module1": false,
  "module2": "module3"
}

使用此设置

// module1
export const x = 1

// module2
export const x = 2

// module3
export const x = 3

// will result in
import {x} from 'module1'
console.log( x === undefined ) // in the react-native environment
console.log( x === 1 ) // in the browser

import {x} from 'module2'
console.log( x === 3 ) // in the react-native environment
console.log( x === 2 ) // in the browser

import {x} from 'module3'
console.log( x === 3 ) // in the react-native environment
console.log( x === 3 ) // in the browser

文档可以在 here 中找到。它用于 browser 部分，但 react-native 部分的工作方式相同。

React Native中的条件导入

4 个答案: