时间戳

首页 > 解决方案 > 如何在 react-native 中动态加载模块？

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

问题描述

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

标签： javascriptreactjsreact-nativeecmascript-6es6-modules

解决方案

您不能有条件地导入。

但是您可以通过创建 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} />);
}

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

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

推荐阅读