如何在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文件。 如果您想為項目配置不同的配置，可以使用此技巧。