nativescript - 如何在 nativescript 中从 js 注入(inject)自定义组件？

Question

假设我创建了一个小组件，它接受一个输入并设置一个标签来显示它。

应用程序/组件/testComponent/testComponent.xml:

<Label id="someLabel" loaded="onLoad"/>

应用程序/组件/testComponent/testComponent.js:

exports.onLoad = args => {
    const obj = args.object;

    const label = obj.getViewById('someLabel');
    label.text = obj.someString || 'no string given';
};

现在我可以在我的任何页面中使用这个组件

<Page xmlns="http://schemas.nativescript.org/tns.xsd"
      xmlns:testComponent="components/testComponent">
    <StackLayout>
        <testComponent:testComponent someString="hello {N}"/>
    </StackLayout>
</Page>

这似乎是官方的做法，并且有效。但是有没有办法只使用 javascript 在页面中注入(inject)这个组件？

Answer 1

是的，声明式 UI(即 xml)实际上是一个解析 xml 并生成 JS 的构建系统，因此您不必这样做。

因此，如果您想手动执行此操作，您可以单独保留组件代码，并将主屏幕代码更改为如下所示:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoad">
    <StackLayout id='sl'>

    </StackLayout>
</Page>

您会注意到的第一件事是我们给 Page 一个加载的事件，您必须在某个地方实际运行您的代码以将您的组件附加到可视化树。我们做的第二件事是向 StackLayout 添加一个 id；这在技术上实际上是不需要的——你可以浏览 NS 树并找到合适的 StackLayout；但为简单起见，添加 ID 会更容易。

因此，您页面中的 JS 代码将是:

var builder = require('ui/builder');
var fs = require('file-system');

exports.onLoad = function(args) {
  // Get our current Page that is being loaded
  var page = args.object;

  // Find our StackLayout
  var stackLayout = page.getViewById('sl');

  // Load our JS for the component
  var path = fs.knownFolders.currentApp().path;
  var componentJS = require(path + '/components/testComponent/testComponent.js');

  // Actually have the builder build the Component using the XML & JS.
  var component = builder.load(path + '/components/testComponent/testComponent.xml', componentJS);

  // And add our component to the visual tree
  stackLayout.addChild(component);
};

我相信，因为您在加载事件中添加了 child ，所以您的页面加载事件将在子组件中运行，但不要让我坚持那个。如果不是，那么您可以在添加它的同时手动运行它...