Question

如何在渲染视图后启动一个函数？我需要获得一些组件的测量宽度，但至少从navigatedTo和loaded事件访问时，所有内容都是0或NaN。

Answer 1

确定建造和绘制物品的时间;我发现可靠工作的唯一方法实际上是使用类似的东西：

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

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

原因是因为就像普通的应用程序一样，UI仍然只是一个单独的线程;所以当JS运行时;用户界面无法实际更新。

所以诀窍是推迟你的代码，直到JS引擎退出到本机代码之后;本机代码呈现屏幕，然后重新进入JS引擎。

因此，延迟代码的最简单方法是使用setTimeout，因为setTimeout是在本机代码中调度的。（这非常类似于在Node中使用process.nextTick。）

事件循环：

JavaScript代码
JavaScript代码 - ＆gt;您安排超时（实际上以本机安排）
JavaScript代码完成所有执行
JavaScript运行时返回到本机代码
本机代码呈现并处理剩余的所有消息。
本机代码计时器触发，启动JS引擎向上传递setTimeout函数
JavaScript代码启动您的setTimeout例程
JavaScript代码完成，退出到NativeCode
本地代码呈现并处理剩余的所有消息
本地代码闲置。

只是为了一些额外的清晰度;关于事件循环如何工作，一个真实的例子;我为我的一个应用程序编写的一个帮助例程是这样的：

function updateProgress(msg) {
        return new Promise((resolve) => {
            statusLabel.text = msg;
            setTimeout(resolve, 0);
        });
}

所以我会做这种类型的代码。

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

原因是因为当NativeScript仍然在eventloop的JavaScript部分时，显示不会更新;因此，如果您有大量工作要做，并且您仍希望显示响应，则需要退出事件循环的JavaScript部分;让Native部分处理任何待处理的消息，然后在JS部分中继续返回以进行下一部分处理。（这也消除了Android上的ANR） - 所以诀窍是通过setTimeout处理Resolve调用。

我也看到有些人使用on idle通知;但是在两个平台上为它设置事件要复杂一些;使用setTimeout更简单，同样有效。

Answer 2

你确定你正在使用＆＃34; onNavigatedTo＆＃34;而不是＆＃34; onNavigatingTo＆＃34; ？

这些都是page events。

在NativeScript上呈现视图时的事件

2 个答案: