React Native 中的条件导入

Posted

技术标签:

【中文标题】React Native 中的条件导入【英文标题】:Conditional imports in React Native 【发布时间】:2018-10-24 17:41:21 【问题描述】:

我在让条件导入在 react native 中工作时遇到了一些麻烦。

我有一些文件用于 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/

【问题讨论】:

【参考方案1】:

我遇到了一个问题,我正在处理的项目使用 react-native-tvos 并且我尝试将 react-native-ad-manager 添加为依赖项,但它不支持 tvOS,因此我想动态导入非广告管理器依赖项tvOS 平台。我能够让它像这样工作:

import Platform from 'react-native';

const NullComponent = (props: any) => null;

const AdComponent = () => 
  const [Banner, setBanner] = React.useState(() => NullComponent);

  if (!Platform.isTV) 
    import('react-native-ad-manager')
      .then((Banner: AdBanner) => 
        setBanner(() => AdBanner);
      )
  

  return (
    <Banner />
  )

【讨论】:

【参考方案2】:

Platform specific imports 很好,但不会在网络上为您提供帮助。

package.json 中的react-native 部分是你的朋友:

"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 部分的工作方式相同。

【讨论】:

【参考方案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 会自动为每个特定的目标平台导入正确的变体。

【讨论】:

【参考方案4】:

经过一番搜索,结果发现动态导入可能有点麻烦。

这是我想出的解决方案,我在node上试过了。

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

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

【讨论】:

let module; if(true) module = require(MODULE); ?我们在项目中对开发工具模块进行了类似操作。 注意:如果你想要默认导出,你应该访问从require函数返回的'default'键:const MODULE_NAME = &lt;CONDITION&gt; ? require(MODULE_A).default : require(MODULE_B).default;【参考方案5】:

Platform specific imports;

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

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

【讨论】:

以上是关于React Native 中的条件导入的主要内容,如果未能解决你的问题,请参考以下文章

React Native 中的条件渲染问题

react-native & firebase:请求在映射页面中的条件

导入js中的React Native调用组件

React Native Redux App 中的条件渲染失败

在 React Native 中不能使用新导入的组件?

如何从带有条件的 React Native 中的 API 数组结果中获取记录?