Question

我想使用typescript在我的nativescript应用程序中显示本机android UI组件（如按钮或画布）。作为一个例子，我想扩展一个带有以下打字稿代码的android按钮：

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

然后我尝试在我的xml视图中加载它：

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代码必须遵循一些特定的结构，例如，您必须具有用于android的公共函数_createUI()，您应该在其中放置本机组件。对于iOS，这是在构造函数中完成的。有关详细信息，请查看https://docs.nativescript.org/plugins/ui-plugin.html。

使用typescript在nativescript中自定义android视图

1 个答案: