Question

例如，是否存在一个我可以挂接的事件，以检测屏幕尺寸的变化，以便我可以使自己的元素自动调整大小？

我已经走了一半，可以通过UserInterface API检索顶层元素的当前大小：

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

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

ReactXP对此是否有API？

Answer 1

好吧，找到了解决方案：订阅View component的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}

我想这与onLayout event of ReactNative's View component是一致的。

要使其正常工作，视图必须是React树的顶级元素。对于嵌套在其他视图中的视图将不起作用。

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

1 个答案: