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

Question

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

Answer 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 folderA

react-native start --projectRoot folderA

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