nativescript - 如何完全以编程方式(不使用 XML)初始化 NativeScript 应用程序？

Question

这是我目前所拥有的。背景变为绿色(页面的颜色)，但我希望内部有一些文本的紫色 ContentView 也能填充页面。

还有什么我想念的吗？

import { on, run, launchEvent } from "tns-core-modules/application";
import { Frame } from "tns-core-modules/ui/frame/frame";
import { ContentView } from "tns-core-modules/ui/content-view/content-view";
import { TextBase } from "tns-core-modules/ui/text-base/text-base";
import { Page } from "tns-core-modules/ui/page/page";

on(launchEvent, (data) => {
    const frame = new Frame();
    const page = new Page();
    page.backgroundColor = "green";

    const contentView = new ContentView();
    const textBase = new TextBase();
    contentView.height = 100;
    contentView.width = 100;
    contentView.backgroundColor = "purple";
    textBase.text = "Hello, world!";
    contentView._addView(textBase);
    page.bindingContext = contentView;

    frame.navigate({ create: () => page });

    data.root = page; // Incidentally, should this be the frame or the page?
});

run();

Answer 1

您几乎步入正轨，只需对代码稍作修改即可。

import { on, run, launchEvent } from 'tns-core-modules/application';
import { Frame } from 'tns-core-modules/ui/frame/frame';
import { ContentView } from 'tns-core-modules/ui/content-view/content-view';
import { TextField } from 'tns-core-modules/ui/text-field';
import { Page } from 'tns-core-modules/ui/page/page';

run({
    create: () => {
        const frame = new Frame();
        frame.navigate({
            create: () => {
                const page = new Page();
                page.backgroundColor = "green";

                const contentView = new ContentView();

                const textField = new TextField();
                contentView.height = 100;
                contentView.width = 100;
                contentView.backgroundColor = "purple";
                textField.text = "Hello, world!";

                contentView.content = textField;
                page.content = contentView;

                return page;
            }
        });
        return frame;
    }
});

1. 您不必等待启动事件，您可以在 run 方法本身中设置根框架。
2. 在您的代码中，您创建了框架，但从未将其添加到根 UI 元素或将框架本身标记为根元素
3. 建议使用 .content 为 ContentView/Page 添加子元素，因为它们最初设计为仅包含一个子元素。
4. 使用TextField/TextView输入文本，TextBase只是一个基类。