reactjs - 如何在 ReactXP 中检测屏幕尺寸变化/设备旋转？

Question

例如，是否有一个我可以连接的事件来检测屏幕尺寸的变化，以便我可以让我的元素响应地调整自己的大小？

我已经完成了一半，因为我可以通过UserInterface API检索我的顶级元素的当前大小：

  UserInterface.measureLayoutRelativeToWindow(that).then(dimensions => {
    // dimensions.width, dimensions.height
  });

但这只是一次性的电话。我现在想订阅一个处理程序，只要“窗口”调整大小，就会调用该处理程序。例如，桌面用户调整浏览器窗口的大小或移动用户将设备旋转 90°。

ReactXP 有这方面的 API 吗？

Answer 1

好的，找到了解决方案：订阅View 组件的 onLayout 事件会导致处理程序在窗口或屏幕大小发生变化（包括旋转）时触发。

代码：

onLayout() {
  UserInterface
    .measureLayoutRelativeToWindow(this)
    .then(screenSize =>
      console.log("event", event));
}

onLayout(event: ViewOnLayoutEvent) {
    console.log("event", event);
}

...
<View onLayout={this.onLayout}>
    ...
</View>

输出：

event {x: 0, y: 0, width: 840, height: 1639}

我猜这和 ReactNative 的 View 组件的 onLayout 事件是一致的。

为此，视图必须是 React 树的顶级元素。它不适用于嵌套在其他东西中的视图。