android - 使用 typescript 在 nativescript 中自定义 android View

Question

我想在我的 nativescript 应用程序中使用 typescript 显示原生 android UI 组件(如按钮或 Canvas )。例如，我想使用以下 typescript 代码扩展一个 android 按钮:

//custom.js
export class NativeComponent extends android.widget.Button{
  constructor(context){
      super(context);
      this.setText("test");
  }
}

然后我尝试在我的 xml View 中加载它:

Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
  <StackLayout>
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ tapAction }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
    <custom:NativeComponent />
  </StackLayout>  
</Page>

...但这总是会崩溃。这方面的文档很差/我还没有找到任何东西。

Answer 1

为了使用自定义控件，您必须添加 XML 命名空间，以便框架知道从何处加载文件。所以你的 XML 应该是这样的:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:custom="./path/to/custom.js" loaded="pageLoaded">
  <StackLayout>
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ tapAction }}" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
    <custom:NativeComponent />
  </StackLayout>  
</Page>

此外，JS 代码必须遵循一些特定的结构，例如您必须有一个公共(public)函数 _createUI() for android，您应该在其中放置 native 组件创建。对于 iOS，这是在构造函数中完成的。看看https://docs.nativescript.org/plugins/ui-plugin.html更多细节。