React Native中的屏幕宽度

Question

如何在React原生中获得屏幕宽度？

(我需要它,因为我使用一些重叠的绝对组件,它们在屏幕上的位置随着不同的设备而变化)

Answer 1

在React-Native中,我们有一个名为Dimensions的选项

在顶部var中包含尺寸,包括图像,文本和其他组件.

然后在您的样式表中,您可以使用如下,

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

通过这种方式,您可以获得设备窗口和高度.

Answer 2

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

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

也许这很明显,但Dimensions是一个反应原生的导入

import { Dimensions } from 'react-native'

没有它,尺寸将不起作用

Answer 3

如果你有一个可以从你的组件中获得的Style组件,那么你可以在文件的顶部有这样的东西:

const Dimensions = require('Dimensions');

const window = Dimensions.get('window');

然后你可以fulscreen: {width: window.width, height: window.height},在你的Style组件中提供.希望这可以帮助

Answer 4

2020 年 4 月 10 日答案：

Dimensions现在不鼓励使用建议的答案。请参阅：https : //reactnative.dev/docs/dimensions

推荐的方法是useWindowDimensions在 React 中使用钩子；https://reactnative.dev/docs/usewindowdimensions使用基于钩子的 API，并且还会在屏幕值更改时更新您的值（例如屏幕旋转）：

import {useWindowDimensions} from 'react-native';

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

注意：useWindowDimensions仅适用于 React Native 0.61.0：https ://reactnative.dev/blog/2019/09/18/version-0.61

Answer 5

React Native Dimensions只是这个问题的部分答案,我来到这里寻找屏幕的实际像素大小,而Dimensions实际上给出了与密度无关的布局大小.

您可以使用React Native Pixel Ratio来获取屏幕的实际像素大小.

您需要Dimenions和PixelRatio的import语句

import { Dimensions, PixelRatio } from 'react-native';

你可以使用对象解构来创建宽度和高度全局变量,或者像其他人建议的那样将它放在样式表中,但要注意这不会在设备重定向上更新.

const { width, height } = Dimensions.get('window');

来自React Native Dimension Docs:

注意:虽然维度可以立即使用,但它们可能会更改(例如,由于>设备旋转),因此任何依赖于这些常量的渲染逻辑或样式都应该尝试在每个渲染上调用此函数,而不是缓存值>(例如,使用内联样式而不是在StyleSheet中设置值.

PixelRatio Docs链接适合那些好奇的人,但不是更多.

要实际获取屏幕尺寸,请使用:

PixelRatio.getPixelSizeForLayoutSize(width);

或者如果你不想宽度和高度是全局变量,你可以在任何地方使用它

PixelRatio.getPixelSizeForLayoutSize(Dimensions.get('window').width);

Answer 6

React Native带有“ Dimensions” api，我们需要从“ react-native”导入

import { Dimensions } from 'react-native';

然后，

<Image source={pic} style={{width: Dimensions.get('window').width, height: Dimensions.get('window').height}}></Image>