2
votes

Comment initialiser une application NativeScript entièrement par programmation (sans XML)?

Voici ce que j'ai jusqu'à présent. L'arrière-plan devient vert (la couleur de la page), mais je m'attendrais à ce qu'un ContentView violet avec du texte à l'intérieur remplisse également la page.

Y a-t-il autre chose qui me manque?

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();


0 commentaires

3 Réponses :


0
votes

Je pense que vous ne pouvez pas laisser run aussi vide car il attend une entrée pour démarrer l'application. Depuis le {NS} site Web ,

Vous pouvez utiliser ce fichier pour effectuer des initialisations au niveau de l'application, mais le L'objectif principal du fichier est de passer le contrôle à la racine de l'application module. Pour ce faire, vous devez appeler la méthode application.run () et passez un NavigationEntry avec le moduleName souhaité comme chemin vers le module racine relatif à votre dossier / app.

si vous recherchez du code run dans "tns-core-modules / application"

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);
    }
}

et

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


0 commentaires

3
votes

Vous êtes presque sur la bonne voie, il vous suffit de modifier légèrement votre code.

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. Vous n'avez pas à attendre l'événement de lancement, vous pouvez définir le cadre racine dans la méthode run elle-même.
  2. Dans votre code, vous créiez le cadre, mais vous ne l'ajoutiez jamais à l'élément d'interface utilisateur racine ni ne marquiez le cadre lui-même comme élément racine
  3. Il est recommandé d'utiliser .content pour ajouter un enfant à une ContentView / Page car ils sont initialement conçus pour contenir un seul élément enfant.
  4. Utilisez TextField / TextView pour le texte d'entrée, TextBase n'est qu'une classe de base.


0 commentaires

1
votes

Il me semble que vous essayez de trop compliquer. Vous pouvez remplacer XML par du code simplement en implémentant la méthode createPage - Créez une page via le code .

Je viens de modifier le modèle par défaut de NS + TypeScript Playground pour fonctionner sans XML - Modèle NS + TypeScript sans XML .


0 commentaires