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

Question

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

Answer 1

您无法导入条件。

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

在folderA / index.js中导入模块并通过道具将其传递给您的应用程序。

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

剩下要做的唯一事情就是选择在启动打包机时纠正切入点。 根据您的版本，使用以下命令之一：

react-native start --root folderA

react-native start --projectRoot folderA

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