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

【问题标题】：How to dynamically load a custom component in nativescript?如何在 nativescript 中动态加载自定义组件？
【发布时间】：2019-07-23 03:26:16
【问题描述】：

我是 nativescript 的新手，我试图在点击按钮时动态加载自定义组件，但我得到这个错误：

错误：模块 '/data/data/org.nativescript.DMMobileApp01/files/app/components' 不是找到元素“组件：测试”com.tns.NativeScriptException：找不到模块：
"/data/data/org.nativescript.DMMobileApp01/files/app/components", > 相对于：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>

我希望这是一项简单的任务，但我不知道为什么会出现此错误！我缺少的部分在哪里？

【问题讨论】：

标签： javascript android nativescript custom-component

【解决方案1】：

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

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

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

【讨论】：

如果你仍然喜欢使用构建器，那么要么调整你的 webpack 配置以捆绑 XML 文件，要么将 XML 字符串分配给一个变量并将其传递给构建器函数。
@Bundyo 实际上，我使用的是 nativescript 5.4.2 版本，我会升级它并尝试使用您的建议，然后再回来

【解决方案2】：

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

【讨论】：