Как полностью инициализировать приложение NativeScript программно (без XML)?

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. В своем коде вы создавали фрейм, но никогда не добавляли его в корневой элемент пользовательского интерфейса или не отмечали сам фрейм как корневой элемент
3. Рекомендуется использовать .content для добавления дочерних элементов для ContentView / Page, поскольку они изначально предназначены для хранения только одного дочернего элемента.
4. Используйте TextField / TextView для ввода текста, TextBase это просто базовый класс.

Answer 2

Мне кажется, что вы пытаетесь слишком усложнить. Вы можете заменить XML кодом, просто внедрив метод createPage - Создать страницу с помощью кода .

Я только что изменил значение по умолчанию NS + TypeScript Шаблон Playground для работы без XML - NS + Шаблон TypeScript без XML .

Answer 3

Я думаю, вы не можете оставить run пустым, так как он ожидает ввода для запуска приложения.С {NS} веб-сайта ,

Этот файл можно использовать для инициализации на уровне приложения, но основная цель этого файла - передать управление корневому модулю приложения.Для этого вам нужно вызвать метод application.run () и передать NavigationEntry с нужным moduleName в качестве пути к корневому модулю относительно вашей папки / app.

, если вы ищетеrun код в "tns-core-modules / application"

function run(entry) {
    createRootFrame.value = false;
    start(entry);
}
exports.run = run;

и

function start(entry) {
    if (started) {
        throw new Error("Application is already started.");
    }
    started = true;
    mainEntry = typeof entry === "string" ? { moduleName: entry } : entry;
    if (!androidApp.nativeApp) {
        var nativeApp = getNativeApplication();
        androidApp.init(nativeApp);
    }
}