React Native中的屏幕宽度

Question

如何在 React 原生中获取屏幕宽度？我需要它，因为我使用了一些重叠的绝对组件，并且它们在屏幕上的位置会随着不同的设备而变化。

Answer 1

2020年4月10日 回答：

现在不建议使用Dimensions作为建议答案。请参见：https://reactnative.dev/docs/dimensions

推荐的方法是在React中使用< code>useWindowDimensions挂钩；https://reactnative.dev/docs/usewindowdimensions，它使用一个基于钩子的API，当屏幕值改变时也会更新你的值(例如屏幕旋转):

import {useWindowDimensions} from 'react-native';

const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

注意:< code>useWindowDimensions仅适用于React Native 0 . 61 . 0:https://reactnative.dev/blog/2019/09/18/version-0.61

Answer 2

只需声明此代码即可获得设备宽度

let deviceWidth = Dimensions.get('window').width

也许这很明显，但是，Dimensions是一个反应式的本地导入

import { Dimensions } from 'react-native'

没有这一点，维度将无法工作

Answer 3

在React-Native中，我们有一个名为维度的选项

Include Dimensions位于顶部变量，其中包含Image、Text和其他组件。

然后在你的样式表中你可以使用如下，

ex: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
}

通过这种方式，您可以获取设备窗口和高度。