Ereignis, wenn die Ansicht auf NativeScript gerendert wird

Question

Wie kann ich eine Funktion starten, nachdem die Ansicht gerendert wurde? Ich muss zum Beispiel gemessene Breite einer Komponente erhalten, aber alles ist 0 oder NaN zumindest wenn auf die Ereignisse navigatedTo und loaded zugegriffen wird.

Answer 1

Sind Sie sicher, dass Sie "onNavigatedTo", nicht "onNavigatingTo" verwenden?

Dies sind alle page events.

Answer 2

Tun Sie zu dem Zeitpunkt, wenn Dinge gebaut und gezeichnet werden; die einzige Methode, die ich zuverlässig gefunden habe, zu arbeiten ist eigentlich so etwas wie:

exports.onNavigatingTo = function() { 
    setTimeout(codeAfterRender, 1); 
} 

function codeAfterRender() { 
/* do something cool */ 
} 

Der Grund, warum denn gerade wie eine normale Anwendung ist die UI ist immer noch nur ein einzelner Thread; also während JS läuft; Die Benutzeroberfläche kann nicht wirklich aktualisiert werden.

Der Trick besteht also darin, den Code so lange auszugeben, bis die JS-Engine wieder in den systemeigenen Code zurückkehrt. Der native Code rendert den Bildschirm und gibt die JS-Engine erneut ein.

Die einfachste Methode, Ihren Code zu verzögern, ist die Verwendung von setTimeout, da setTimeout in systemeigenem Code geplant ist. (Dies ist sehr ähnlich wie process.nextTick in Knoten verwenden.)

Ereignisschleife:

• JavaScript-Code
• JavaScript-Code -> Sie Schedule Timeout (die eigentlich in der india geplant ist)
• JavaScript-Code Beendet die Ausführung
• JavaScript-Laufzeit kehrt zurück zum systemeigenen Code
• Nativer Code Rendert und verarbeitet alle verbleibenden Nachrichten.
• systemeigenen Code Timer Feuer beginnt JS Motor Ihre SetTimeout Funktion
• JavaScript-Code vorbei startet Ihre SetTimeout Routine
• JavaScript-Code abgeschlossen ist, zu Nativeindia
• -Code tritt zurück macht und verarbeitet alle Nachrichten
• Rest Der systemeigene Code wird inaktiv.

Nur für etwas zusätzliche Klarheit; wie die Ereignisschleife funktioniert, ein echtes Beispiel; Eine Hilfsroutine, die ich für eine meiner Apps geschrieben habe, ist wie folgt:

Also würde ich diese Art von Code tun.

UpdateProgress("Processing 1/3") 
.then(function() { 
/* do some work, work freezes UI, so break it up */ 
    return UpdateProgress("Processing 2/3"); 
}) 
.then(function() { 
    /* do some more work, again work freezes UI */ 
    return UpdateProgress("Processing 3/3"); 
}) 
.then(function() { 
    /* do some more work, again work freezes UI */ 
    return ... 
}); 

Der Grund dafür ist, weil während NativeScript noch im JavaScript-Teil der Ereignisschleife die Anzeige nicht aktualisiert wird; Wenn Sie also viel zu tun haben und die Anzeige immer noch reaktionsschnell sein soll, müssen Sie den JavaScript-Teil der Ereignisschleife verlassen. Lassen Sie den nativen Teil alle ausstehenden Nachrichten behandeln, und fahren Sie dann im JS-Teil für den nächsten Teil der Verarbeitung fort. (Dies beseitigt auch ANRs auf Android) - Der Trick ist also, dass der Resolve Aufruf über ein setTimeout abgewickelt wird.

Ich habe auch einige Leute gesehen, die die On-Idle-Benachrichtigung verwenden; Es ist jedoch etwas komplizierter, die Ereignisse auf beiden Plattformen einzurichten. mit setTimeout ist einfacher und funktioniert genauso gut.