React Native 中的屏幕宽度答案

【问题标题】：Screen width in React NativeReact Native 中的屏幕宽度
【发布时间】：2022-05-19 16:31:11
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

在包含图像、文本和其他组件的顶部变量中包含尺寸。

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

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

这样就可以得到设备的窗口和高度。

【讨论】：

如果我想让两个组件的宽度之和等于Dimensions.get('window').width，我该如何使用它？
只需全局保存这些值，然后在设备旋转时在任何不安全的地方使用它。我推荐在函数组件中使用react hooks

【解决方案2】：

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

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

也许很明显，但是，Dimensions 是一个 react-native 导入

import { Dimensions } from 'react-native'

没有它，尺寸将无法工作

【讨论】：

谢谢！堆栈溢出的人经常忽略他们的导入来自哪里。感谢您包含它，这正是我所需要的。它不在官方文档中。

【解决方案3】：

2020 年 4 月 10 日答案：

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

推荐的方法是在 React 中使用 useWindowDimensions 钩子； 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

【讨论】：

我不能在 expo-web 中使用它，但在移动设备上可以正常使用
useWindowDimensions 似乎只能从主函数调用，而不是在我设置所有东西尺寸的 StyleSheet 中。如何在 StyleSheet 中使用 useWindowDimensions 的结果？官方文档示例没有显示如何执行此操作。谢谢！
@rfii 您可以调用 useWindowDimensions 并保存宽度/高度值，然后将其传递给返回样式表对象的函数。 const myStyle = (deviceHeight, deviceWidth) => return Stylesheet.create({ max-width: deviceWidth, max-height: deviceHeight })

【解决方案4】：

如果你有一个样式组件，你可以从你的组件中请求，那么你可以在文件的顶部有这样的东西：

const Dimensions = require('Dimensions');

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

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

【讨论】：

【解决方案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 文档：

注意：尽管尺寸可以立即使用，但它们可能会发生变化（例如，由于 >设备旋转），因此任何依赖于这些常量的渲染逻辑或样式 >应该尝试在每次渲染时调用此函数，而不是缓存值 > （例如，使用内联样式而不是在 StyleSheet 中设置值）。

PixelRatio Docs 链接供那些好奇的人使用，但仅此而已。

要实际获取屏幕尺寸，请使用：

PixelRatio.getPixelSizeForLayoutSize(width);

或者如果您不希望宽度和高度成为全局变量，您可以在任何地方使用它

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案7】：

只有两个简单的步骤。

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

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

【讨论】：

不知道为什么您刚刚回复了相同的答案？这真正增加了什么？

【解决方案8】：

刚刚发现react-native-responsive-screenrepo here。发现它非常方便。

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

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

【讨论】：

【解决方案9】：

首先从 react-native 获取维度

import { Dimensions } from 'react-native';

然后

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

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

在windowWidth 中，您将找到屏幕的宽度，而在windowHeight 中，您将找到屏幕的高度。

【讨论】：

【解决方案10】：

2020 年的最新方法是使用 useWindowDimensions

我实现它的方式-

制作 global.js 文件并将窗口宽度和高度设置为全局变量

    const WindowDimensions= (()=>{
    global.windowWidth = useWindowDimensions().width;
    global.windowHeight = useWindowDimensions().height;
    return (<></>);
    })

在 App.js 文件中，导入窗口尺寸并将其添加到返回块
使用宽度和高度作为 global.windowHeight 和 global.windowWidth

使用全局变量不是一个好的设计模式。但这东西有效

【讨论】：

【解决方案11】：

我认为使用react-native-responsive-dimensions 可能会对您的案件有所帮助。

你仍然可以得到：

使用和responsiveScreenWidth(100)的设备宽度

和

使用和responsiveScreenHeight(100)的设备高度

您还可以通过将边距和位置值设置为超过 100% 的宽度和高度来更轻松地安排绝对组件的位置

【讨论】：

【解决方案12】：

您可以通过创建一个组件并通过将其导入您需要的文件来使用它来实现此目的。

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

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

const wp = (number) => {
    let givenWidth = typeof number === "number" ? number : parseFloat(number);
    return PixelRatio.roundToNearestPixel((width * givenWidth) / 100);
};

const hp = (number) => {
    let givenHeight = typeof number === "number" ? number : parseFloat(number);
    return PixelRatio.roundToNearestPixel((height * givenHeight) / 100);
};

export {wp, hp};

现在，你应该使用它。

import { hp, wp } from "../<YOUR PATH>";

  buttonContainer: {
    marginTop: hp("2%"),
    height: hp("7%"),
    justifyContent: "center",
    alignSelf: "center",
    width: wp("70%"),
    backgroundColor: "#1C6AFD",
    borderRadius: 5,
  },
  buttonText: {
    fontSize: wp("3.5%"),
    color: "#dddddd",
    textAlign: "center",
    fontFamily: "Spartan-Bold",
  }

这样，您的设计将具有响应性。我建议在头像图像等圆形事物的样式中使用简单的像素。

在其他情况下，上述代码根据屏幕的像素密度包装组件。

如果您有更好的解决方案，请发表评论。

【讨论】：

【解决方案13】：

首先，您必须从“react-native”导入维度

import { View, StyleSheet, Dimensions  } from "react-native";

之后，您可以在变量中保存宽度和高度：

const windowsWidth  = Dimensions.get('window').width

const windowsHeight = Dimensions.get('window').height

您可以根据需要同时使用它们，即在样式中：

 flexDirection: windowsWidth<400 ? 'column' : 'row',

记住这一点，你的对象样式在你的组件之外，所以 cariable 声明也必须在你的组件之外。但是如果你在你的组件中需要它，没问题，可以使用它：

<Text> Width: { windowsWidth  }</Text>

<Text> Height: { windowsHeight }</Text>

【讨论】：

【解决方案14】：

在 React Native 中可以通过以下代码获取设备的宽高：

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

文档：https://reactnative.dev/docs/dimensions

【讨论】：

【解决方案15】：

    import {useWindowDimensions, Dimensions} from 'react-native'


let width1= useWindowDimensions().width // Hook can be called only inside functional component, tthis is dynamic
let width2=Dimensions.get("screen").width

【讨论】：