反应本机中的屏幕宽度

如何在本地反应屏幕宽度？ 我需要它，因为我使用一些绝对组件，重叠和他们的位置在屏幕上改变与不同的设备。

170223 次浏览
小开

如果你有一个样式组件，你可以从你的组件，然后你可以有这样的东西在文件的顶部:

const Dimensions = require('Dimensions');


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

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

小开
最佳答案

在反应本机中，我们有一个叫做维度的选项

在顶部变量中包含维度，其中包含 Image、 Text 和其他组件。

然后，您可以在样式表中使用,

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

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

小开

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

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

也许这是显而易见的，但是，维度是一个反应-本土导入

import { Dimensions } from 'react-native'

没有这个，维度就无法运作

小开

反应本机尺寸只是这个问题的一部分答案，我来这里寻找屏幕的实际像素大小，和尺寸实际上给你密度无关的布局大小。

您可以使用反应本机像素比率来获得屏幕的实际像素大小。

您需要导入语句的维度和像素比率

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

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

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

来自 React Native尺寸文档:

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

像素比率 文档链接给那些好奇的人，但是那里没有更多。

为了实际获得屏幕尺寸的使用:

PixelRatio.getPixelSizeForLayoutSize(width);

或者如果你不想宽度和高度是全局的，你可以在任何地方像这样使用它

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

刚刚发现 react-native-responsive-screen 这里是回收站。发现它非常方便。

条件反应-本机-响应-屏幕是一个小型库，提供了2个简单的方法，使条件反应本机开发人员可以编码他们的 UI 元素完全响应。不需要媒体查询。

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

小开

反应本机提供了“维度”api，我们需要从“反应本机”导入它

import { Dimensions } from 'react-native';

然后,

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

只有两个简单的步骤。

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

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

小开

2020年4月10日答案:

现在不推荐使用 Dimensions的建议答案

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

import {useWindowDimensions} from 'react-native';


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

注意: useWindowDimensions只能从 React Native0.61.0: https://reactnative.dev/blog/2019/09/18/version-0.61获得

小开

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

你仍然可以得到:

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

还有

设备使用高度和 responsiveScreenHeight(100)

您还可以通过设置边距和位置值，使其与宽度和高度的比例超过100% ，从而更容易地安排绝对组件的位置

小开

首先从本地反应获得维度

import { Dimensions } from 'react-native';

那么

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


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

在 windowWidth中你会找到屏幕的宽度，而在 windowHeight中你会找到屏幕的高度。

小开

2020年的最新方法是使用 UseWindows 维度

我实施的方式

  1. 创建一个 global.js 文件，并将窗口宽度和高度设置为全局变量
    const WindowDimensions= (()=>{
global.windowWidth = useWindowDimensions().width;
global.windowHeight = useWindowDimensions().height;
return (<></>);
})

  1. 在 App.js 文件中，导入窗口尺寸并将其添加到返回块中

  2. 到处使用 width 和 height 作为 Global.windowHeight和 < em > global.windowWidth

使用全局变量 并不是一个好的设计模式，但是这种方法可行

小开

您可以通过创建一个组件并将其导入到所需的文件中来使用它来实现这一点。

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",
}

这样，您将使您的设计具有响应性。我建议使用简单的像素来设计像头像这样的圆形图像。

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

如果你有更好的解决方案，请评论。

小开

首先，您必须从“反应原生”导入维度

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>
小开

通过以下代码，您可以在 React Native.com 中获得设备的宽度和高度:

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

文件: https://reactnative.dev/docs/dimensions

小开 

    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


提交答案