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

Question

我目前正在努力在我的本机应用程序中添加对Sentry.io的支持。我使用react-native-sentry软件包，并且有一个要求：例如，仅当某些常数设置为true时，才应导入该软件包SHOULD_USE_SENTRY。所有岗哨配置存储在一个单独的文件，该文件还公开2点的方法：setupSentry和captureException其在该应用程序的根用在componentDidMount和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} />);
}

然后在您的应用程序组件中，您现在可以有一个条件

应用程序.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 文件。如果你想为你的项目进行不同的配置，你可以使用这个技巧。