RN 组件Dimensions 获取当前屏幕的宽高

最新推荐文章于 2026-01-12 15:54:02 发布
原创 最新推荐文章于 2026-01-12 15:54:02 发布 · 4.7k 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#Dimensions
本文介绍了一种确保图片在不同设备屏幕上显示效果一致的方法。通过计算设计稿图片与实际屏幕宽度的比例，调整图片的高度和宽度，使得图片在各种分辨率下都能保持良好的视觉效果。

Dimensions （英译：尺寸）

$获取当前屏幕的宽高
const { deviceWidth, deviceHeight } = Dimensions.get('window');
@ 用途：图片的显示

1、设计稿的图片width/设计稿的width = a; 图片自身的比例 b = 图片的width/图片的height;
2、实际的代码中 width = deviceWidth * a;
3、实际的代码中 height = 代码中width / b;
这样就会在各个屏幕中显示的图片差异较小

react native 获取当前屏幕的宽度,高度,当前运行的机型
周家大小姐
03-01 3675
当前屏幕的宽度:Dimensions.get('window').width 当前屏幕的高度:Dimensions.get('window').height 当前屏幕的分辨率:Dimensions.get('window').scale 当前运行的平台:Platform.OS import React from 'react'; import { SafeAreaView, ...
完全征服React Native
08-22
React Native是Facebook于2015年推出的跨平台开发工具，可用于开发Android和iOS App，并且同时具有混合开发的优点（热更新，跨平台）以及本地App的性能。本课程采用新的ES6开发，主要内容包括ReactNative的基础知识，ReactNative的布局，组件，API，封装本地API和组件，发布ReactNative App，本地与ReactNative深度结合
RN-解决Dimensions.get('window').height不准的问题，适应全面屏
u014012083的专栏
11-06 5363
产生的原因 andorid全面屏幕中 Dimensions.get('window').height 计算屏幕高度时会自动减少StatusBar 的高度 解决方案 根据高宽比w/h 判断是否为全面屏幕 手机， 如果是全面屏: 实际屏幕高度= Dimensions.get('window').height + StatusBar 的高度 不是全面屏 实际屏幕高度= Dimensions.ge...
react-native的Dimensions.get(‘screen‘)和Dimensions.get(‘window‘)有什么不同
Sixology的博客
07-15 2399
React-native中的获取屏幕高度Dimensions.get(‘screen’)和Dimensions.get(‘window’)有什么不同 react-native获取屏幕高度 import { Dimensions, } from 'react-native'; const windowHeight=Dimensions.get('window').height; const screenHeight=Dimensions.get('screen').height; 通过控制台打印这两个
RN获取屏幕高宽、自适应(rem)设置
weixin_39065287的博客
04-01 2685
RN获取屏幕高宽、自适应(rem)设置 1、引入Dimensions 2、通过Dimensions.get(“window”).width/height; 获取屏幕高宽 pxToDp自适应js文件： import {Dimensions} from 'react-native'; // 获取竖屏模式的宽度 const deviceWidthDp = Dimensions.get('window').width; // UI 默认给图是750 const uiWidthPx = 750; //传入设计稿宽度
RN：获取屏幕宽高
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
09-18 1025
获取屏幕宽高 对于 React 函数组件，我们更推荐使用useWindowDimensions这个 Hook API。和 Dimensions 不同，它会在屏幕尺寸变化时自动更新。 Dimensions import { useWindowDimensions } from 'react-native'; const windowWidth = useWindowDimensions().width; const windowHeight = useWindowDimensions().height; u
React Native 鸿蒙跨平台开发：Dimensions 屏幕尺寸获取
最新发布
qq_61024956的博客
01-12 1183
基于 RN 内置的 Dimensions API，无需引入任何第三方库，即可实现一些实用的进阶功能，贴合真实开发需求，所有技巧均在 OpenHarmony6.0 真机实测通过，帮助你吃透 Dimensions 的全部用法，举一反三，应对所有复杂的尺寸适配场景！本示例是 Dimensions API 的最核心用法，代码最简、逻辑最清晰，无任何冗余代码，包含「尺寸获取、数据解构、页面展示、基础计算」所有核心功能，OpenHarmony6.0 真机实测 100% 可用，是零基础入门的最佳版本。
React Native获取手机屏幕宽高（Dimensions）
徐同保的专栏
08-04 1951
React Native获取手机屏幕宽高（Dimensions）
react-native系列(24)API篇：屏幕宽高和屏幕像素密度
@黄小泽的个人博客
03-15 1332
Dimensions屏幕宽高 Dimensions库可以获取屏幕的宽高： import { Dimensions } from 'react-native'; const {height, width} = Dimensions.get('window'); // 可用显示屏幕的宽高，不包括顶部的状态信息栏 const {height, width} = Dimensions.get('s...
聊聊React Native屏幕适配那些事儿
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
04-24 3195
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群作者：张子君原文：https://segmentfault.com/a/1190000039805723写在前面在我...
ReactNative 学习总结 个人梳理
qq_50909707的博客
11-14 9431
ReactNative官方文档：React Native 中文网 · 使用React来编写原生应用的框架ReactNative适用于APP的一套多开，适合大型项目的开发，安装环境时注意版本对应。 2、ReactNative的布局默认为flex布局，View标签不能直接写入文字，样式不会被继承, 单位不能加px,vh,vw等可以是百分比。 3、快速获取屏幕尺寸，Dimensions flex布局见我的博客：Flex布局总结_Dragon Wu的博客-CSDN博客_flex布局总结案例代码：同样使用Re
【iOS开发】(三)react Native核心组件十个20240418
qq_53433382的博客
04-19 1814
RN 中的核心组件，是对原生组件的封装原生组件: Android或ios内的组件核心组件:RN中最常用的，来在 react-native 的组件开发 React Native 应用程序时，通常会使用以下核心组件：View（视图）：View 是 React Native 中最基本的组件之一，用于创建布局结构。它类似于 web 开发中的元素，用于包裹和组织其他组件。Text（文本）：Text 组件用于显示文本内容，类似于 HTML 中的或元素。
React-Native 通过Dimensions调用全面屏手机高度异常的问题
森白的博客
03-04 1801
在实际开发中，React-Native通过调用Dimensions.get('window')去获取全面屏手机（MI 10）的高度时，发现获取到的高度要比实际手机高度来的短一些，针对此种情况对全面屏手机做适配。 首先通过获取屏幕的纵横比来判断当前手机是否为全面屏，常规纵横比为大于1.8 (16:9)。（这里只做了简单判断，当然也有很多更为准确的方案） 查阅相关资料后发现是因为全面屏的statusBar高度问题。 导包： import { Dimen...
React-native学习-12-屏幕宽高和分辨率
Green
08-29 326
//屏幕宽高和分辨率 importReact,{useState,Component}from'react'; import{View,Text,StyleSheet,Dimensions}from'react-native'; classWidthDemoextendsComponent{ render(){ return( <Viewstyle={styles.container}> ...
react native获取设备屏幕高度、顶部状态栏高度
坚强的泡沫的博客
03-29 2465
react native获取设备屏幕高度、顶部状态栏高度
ReactNative系列之四十八屏幕宽高
yeputi_WK的博客
07-17 1108
有几种方式可以获取屏幕，依次来对比下 1.view-->onLayout/ measure， 如果view是flex:1 则获取的为屏幕真正的可显示宽高（即全面屏含刘海高度，安全区模式不含刘海高度） 2.Dimens 监听change,在didChange的回调中 例如：{"window":{"width":755.6666666666666,"height":360,"scale":3,"fontScale":1},"screen":{"width":780,"height":360,"sca
react native 中获取屏幕宽度方法
hehe0705的专栏
04-04 3932
//获取屏幕宽度 var Dimensions = require('Dimensions'); var width = Dimensions.get('window').width; console.log(width);
获取屏幕的宽高度and横屏显示
kep moving
05-04 587
WindowManager manage = getWindowManager(); Display display = manage.getDefaultDisplay(); int screenHeight = display.getHeight(); int screenWidth = display.getWidth(); //设置横屏 setRequestedOrientati
react如何实时获取屏幕（浏览器视口）的宽度
m0_63788547的博客
01-02 700
react如何实时获取屏幕（浏览器视口）的宽度
ReactNative使用useWindowDimensions多屏幕适配
weixin_43553991的博客
11-29 552
【代码】Rn使用useWindowDimensions多屏幕适配。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值