在React Native Expo中實現動態模組導入

Question

如果我的React Native Expo應用程式（在Expo Go應用程式中執行）目前執行一個import/from

import Foo, {Bar} 從 "foo";

如何轉換為動態導入，僅在滿足某個條件時導入，例如當hello === "world"時？

以下操作會導致應用程式崩潰並顯示錯誤non-std C exception。

if (hello === "world") {
    import Foo, {Bar} from "foo";
}

嘗試了以下替代方法，但仍然會導致崩潰並顯示non-std C exception：

if (hello === "world") {
    const Foo = import('foo')
    const Bar = Foo.Bar
}

Answer 1

您可以使用import()函數非同步載入模組。以下是一個範例：

let Foo;
let Bar;

if (hello === "world") {
  import("foo").then((module) => {
    Foo = module.default;
    Bar = module.Bar;
  });
}

在這段程式碼中，import()函數傳回一個解析為模組物件的promise。模組物件的default屬性被賦值給Foo變量，模組物件的Bar屬性被賦值給Bar變數。

需要注意的是，import()函數是非同步的，因此任何依賴導入模組的程式碼應該放在then()回調函數中。此外，您應確保任何依賴導入模組的程式碼只有在模組載入完成後才執行。