React Native中的屏幕宽度

我如何在React native中获得屏幕宽度？

（我需要它，因为我使用了一些重叠的绝对组件，并且它们在屏幕上的位置随不同设备而改变）

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

在顶部var处包含尺寸，其中包含图像，文本和其他组件。

然后，您可以在样式表中使用以下内容，

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

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

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

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

也许很明显，但是Dimensions是本机导入

import { Dimensions } from 'react-native'

否则，尺寸将无法工作

如果您有一个“样式”组件，可以从“组件”中获取，则在文件顶部可以有类似以下内容：

const Dimensions = require('Dimensions');

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

然后，您可以fulscreen: {width: window.width, height: window.height},在样式组件中提供。希望这可以帮助

React Native Dimensions仅是该问题的部分答案，我来这里是为了寻找屏幕的实际像素大小，而Dimensions实际上为您提供了密度独立的布局大小。

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

您需要维度和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);

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>

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

仅两个简单步骤。

1. import { Dimensions } from 'react-native' 在文件顶部。
2. const { height } = Dimensions.get('window');

现在，窗口屏幕的高度存储在height变量中。

刚刚react-native-responsive-screen 在这里发现回购。发现它非常方便。

react-native-response-screen是一个小型库，提供2个简单方法，以便React Native开发人员可以对UI元素进行完全响应式编码。无需媒体查询。

它还提供了可选的第三种方法，用于屏幕方向检测和根据新尺寸自动重绘。

我认为使用 react-native-responsive-dimensions可能会帮助您更好地解决问题。

您仍然可以获得：

通过使用和来确定设备宽度 responsiveScreenWidth(100)

和

通过使用和来设置设备高度 responsiveScreenHeight(100)

您还可以通过设置边距和位置值（在宽度和高度的100％上成比例）来更轻松地排列绝对组件的位置