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');

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

Answer 4

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

Answer 5

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

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

您需要同时输入尺寸和像素比例的导入语句

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

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

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

来自React Native Dimension文档：

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

PixelRatio文档链接用于那些有好奇心的人，但在这里链接不多。

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

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>

Answer 7

只有两个简单的步骤。

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

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

Answer 8

刚刚发现了react-native-responsive-screen repo here。发现它非常方便。

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

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

Answer 9

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

您仍然可以获得：

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

和

使用和responsiveScreenHeight(100)

device-height

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

Answer 10

步骤1：-从“ react-native”导入“ Dimensions” api

import { Dimensions } from 'react-native';

步骤2：-获取尺寸（窗口的宽度/高度）

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

第3步：-使用width和height变量。

<View style={{width:width,height:height/20}>
<Text>test<Text/>               
</View>

Answer 11

首先从 react-native 获取 Dimensions

<?php

// Load the Google API PHP Client Library.
require_once __DIR__ . '/vendor/autoload.php';

// Start a session to persist credentials.
session_start();

// Create the client object and set the authorization configuration
// from the client_secrets.json you downloaded from the Developers Console.
$client = new Google_Client();
$client->setAuthConfig(__DIR__ . '/client_secrets.json');
$client->setRedirectUri('http://' . $_SERVER['HTTP_HOST'] . '/oauth2callback.php');
$client->addScope(Google_Service_YouTube::YOUTUBE_READONLY);

// Handle authorization flow from the server.
if (! isset($_GET['code'])) {
  $auth_url = $client->createAuthUrl();
  header('Location: ' . filter_var($auth_url, FILTER_SANITIZE_URL));
} else {
  $client->authenticate($_GET['code']);
  $_SESSION['access_token'] = $client->getAccessToken();
  $redirect_uri = 'http://' . $_SERVER['HTTP_HOST'] . '/';
  header('Location: ' . filter_var($redirect_uri, FILTER_SANITIZE_URL));
}
?>

然后

import { Dimensions } from 'react-native';

在 const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; 中，您将找到屏幕的宽度，而在 windowWidth 中，您将找到屏幕的高度。

Answer 12

2020 年的最新方法是使用 useWindowDimensions

我实现它的方式-

创建一个 global.js 文件并将窗口宽度和高度设置为全局变量

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

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

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

React Native中的屏幕宽度

12 个答案: