NativeScript - 如何将xml布局转换为本机视图?

Question

我正在尝试使用自定义布局视图创建对话框，当我尝试这样做时：

import app = require('application'); 
import { GridLayout } from 'ui/layouts/grid-layout';
const dialog = new android.app.AlertDialog.Builder(app.android.currentContext);
const layout = new GridLayout();
dialog.setView(layout);

所以我得到以下错误：

Uncaught Error: Cannot convert object to Landroid/view/View;

我尝试更改为：

dialog.setView(layout.android);

和

dialog.setView(layout.nativeView);

对话框显示为空。

如何将 NativeScript UI 对象转换为原生安卓视图？

Answer 1

如果不将 nativescript 视图添加到 Visual UI 树nativeView或android属性，则无法访问该视图的属性。 当本机脚本视图添加到UI树时，它将获得android和nativeView的有效值。

所以你必须做这样的事情：

let container= <StackLayout>this.page.getViewById("stackContainer");
let layout = new GridLayout();
let label = new Label();
label.text = "Custom Alert working";
layout.addChild(label)
container.addChild(layout)

现在，您将拥有 GridLayout 的android和nativeView属性的值。

但在那之后，您将无法在setView中使用layout.android或layout.nativeView，因为它已经包含父级。 因此，解决方法是从容器的本机视图中删除此视图。

let nativeView=layout.nativeView;
container.nativeView().removeView(nativeView)
dialog.setView(nativeView).show();

另请注意，从容器中删除子项也会将孩子的 android 属性重置为 null。 这就是我们保存对nativeView变量的引用的原因。

这是工作游乐场演示是你需要帮助：https：//play.nativescript.org/？template=play-ng&id=4610ET