如何在Nativescript中使用本机视图

Posted 2021-04-15

我正在使用带有Angular2和typescript的NativeScript。尝试以这种方式添加本机元素：

html：

<StackLayout #camview class="camView">
</StackLayout>

打字稿：

@ViewChild("camview") camview: ElementRef;


    constructor() 
    {


    }

    ngOnInit() 
    {
        alert("AA");
        var label = new UILabel(CGRectMake(0, 0, 200, 200));
        label.text = "Hello World again";
        label.textColor = UIColor.whiteColor();
        this.camview.nativeElement.addSubview(label);
        alert("BB");
    }

我不确定elementRef.nativeElement.addSubView是否可以工作，但结果屏幕上没有任何内容。更令人惊讶的是AA警报如何工作但不警告BB，就像代码解释在他们之间被中断一样

我没有任何错误或抱怨，应用程序继续运行，我能够离开并返回到此页面。

我试图通过将UILabel拼写错误到UILabeel来强制错误，但它不会产生我预期的错误..它只是相同的行为。

我应该告诉nativescript这些是原生元素/ mehods莫名其妙？

答案

几个小时后，我意识到该怎么做。

XML：

<StackLayout #stackLayout></StackLayout>

TS：

@ViewChild('stackLayout') stackLayout: ElementRef<StackLayout>;

addButton() {
   this.androidButton = new android.widget.Button(applicationModule.android.context);
   this.androidButton.setText("Some button text");
   this.stackLayout.nativeElement.nativeView.addView(this.androidButton);
}