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在页面中注入此组件？

Answer 1

是的，Declarative 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);
};

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

Answer 2

其中filepath是一个脚本 - 甚至是一个类，回调函数可以创建一个实例。这就好像它在页面加载时加载并显示在大多数开发人员工具控制台中。

        var uuid='xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
             var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
             return v.toString(16);
        });
             var url = filepath + "?" + uuid;//prevent caching - does not work with ajax setup
             try {
                    $.getScript(url, "callbackfunctionname('" + filepath + "')");//getScript callback seems broken so use own
             }
             catch (e) {
                    //error handle
             }

如何从nativescript中的js注入自定义组件？

2 个答案: