在React Native Expo中实现动态模块导入

Question

如果我的React Native Expo应用程序（在Expo Go应用程序中运行）当前执行一个import/from

import Foo, {Bar} from "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()回调函数中。此外，您应确保任何依赖于导入模块的代码只有在模块加载完成后才执行。