时间戳

首页 > 解决方案 > 相当于 react-native 中的 Dimension

reactjs - 相当于 react-native 中的 Dimension

问题描述

在 react js 中是否有与 react-native 中的 Dimension 库等效的用于查找屏幕空间的宽度？如果不是，我怎么能这样做？

我试图找到当前网页的宽度，以便我可以相应地缩放我的组件，并根据宽度显示/隐藏某些组件。我尝试使用的反应本机代码示例是：

{(Dimensions.get('window').width < filterBoxViewWidth) && <div> .. </div>}

或者：

(Dimensions.get('window').width >= filterBoxViewWidth) ? 200 : 0

如果没有我可以使用的等效软件包，请您指出正确的方向，否则如何执行此操作。

谢谢。

标签： reactjsreact-nativeweb-applications

解决方案

您可以使用window.innerWidth宽度和window.innerHeight高度。所有现代浏览器都支持它：

const { innerWidth: width, innerHeight: height } = window

应该相当于：

const ( width, height } = Dimension.get('window')

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight

推荐阅读