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

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

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

Answer 2

只需从 nativescript 版本 5 升级到版本 6，即可使用相同的代码解决此问题

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

How to dynamically load a custom component in nativescript?

javascript

android

custom-component

nativescript