如何在 react-native 中动态加载模块？

Posted 2023-02-22

【中文标题】如何在 react-native 中动态加载模块？

【英文标题】：How to dynamically load module in react-native?

【发布时间】：2019-02-26 04:45:27

【问题描述】：

我目前正致力于在我的 react-native 应用程序中添加对 Sentry.io 的支持。我使用react-native-sentry 包，并且有一个要求：只有在某些常量设置为真时才应该导入包，例如SHOULD_USE_SENTRY。所有哨兵配置都存储在一个单独的文件中，该文件还公开了 2 个方法：setupSentry 和 captureException，它们分别在应用程序的根目录中使用 componentDidMount 和 componentDidCatch。如何在根组件中动态加载这些方法，以便当SHOULD_USE_SENTRY 的值为false 时，调用我的方法后不会出现错误？我希望我已经足够清楚地描述了我的问题。

【参考方案1】：

有条件不能导入。

但是您可以通过创建 2 个入口点来做类似的事情： folderA/index.js 和 folderB/index.js

folderA/index.js 在那里你导入你的模块 并通过 props 传递给你的应用。

import someModule from 'someModule';
render()
    return(<App module=someModule />);

folderB/index.js 你不导入模块，而是传递 null （或任何其他你想要的值)

render()
    return(<App module=null />);

那么在你的应用组件中你现在可以有一个条件

App.js

if(this.props.module != null)
    this.props.module.someFunction(); 

剩下要做的就是在启动打包程序时选择正确的入口点。根据您的 rn 版本使用以下命令之一：

react-native start --root 文件夹A

react-native start --projectRoot 文件夹A

通过指定 --root 或 --projectRoot 您告诉打包程序在您想要的文件夹中查找 index.js 文件。如果你想为你的项目设置不同的配置，你可以使用这个技巧。