如何在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事件是一致的。

为了实现这一点，View必须是React树的顶级元素。它不适用于嵌套在其他内容中的视图。