javascript - 如何在nativescript中动态加载自定义组件？

Question

我是 NativeScript 的新手，我试图在点击按钮时动态加载自定义组件，但我收到此错误:

Error: Module '/data/data/org.nativescript.DMMobileApp01/files/app/components' not found for element 'components:Test' com.tns.NativeScriptException: Failed to find module:
"/data/data/org.nativescript.DMMobileApp01/files/app/components", > relative to: app//

我搜索了很多，但与动态加载自定义组件相关的大多数问题和教程都是围绕 Angular 和 Webpack 的。

该函数负责动态加载自定义组件:

function toSettings(args){
    const page = args.object.page;
    const mainScene = page.getViewById('mainScene'); 
    let settingsCompo = builder.load({
        path: '~/components',
        name: 'test'
    });
}

这是 app/components/test.xml 文件

<StackLayout orientation="horizontal">
    <Label text="yaaaay!" textWrap="true" />
</StackLayout>

我希望这是一项简单的任务，但我不知道为什么会收到此错误!我缺失的部分在哪里？

Answer 1

NativeScript 6.0 使 Webpack 工作流程成为唯一可遵循的工作流程。因此，请检查您是否将组件包含在 bundle 中。由于 Webpack 使用静态分析来检测要包含的内容 - 它无法检测那里的 builder.load 调用。尝试使用动态导入来告诉 Webpack 包含您需要的文件。

另一方面，您似乎只是想显示“设置”页面？在这种情况下，您最好直接导航到它:

https://docs.nativescript.org/ui/ns-ui-widgets/frame#basic-navigation