RN：获取屏幕宽高

最新推荐文章于 2024-11-29 16:39:29 发布

Lvan的前端笔记

最新推荐文章于 2024-11-29 16:39:29 发布

阅读量776

点赞数

分类专栏： # app & react native 文章标签： react.js javascript

本文链接：https://blog.csdn.net/weixin_43972437/article/details/120371329

版权

app & react native 专栏收录该内容

55 篇文章

订阅专栏

获取屏幕宽高

对于 React 函数组件，我们更推荐使用useWindowDimensions这个 Hook API。和 Dimensions 不同，它会在屏幕尺寸变化时自动更新。

Dimensions

import { useWindowDimensions } from 'react-native';
const windowWidth = useWindowDimensions().width;
const windowHeight = useWindowDimensions().height;

useWindowDimensions

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

注意：尽管尺寸信息立即就可用，但它可能会在将来被修改（譬如设备的方向改变），所以基于这些常量的渲染逻辑和样式应当每次 render 之后都调用此函数，而不是将对应的值保存下来。（举例来说，你可能需要使用内联的样式而不是在StyleSheet中保存相应的尺寸）。

参考资料

官方文档

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lvan的前端笔记

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

【HarmonyOS NEXT应用开发】案例140：基于RN框架实现高性能瀑布流页面

xzs51job的专栏

09-08

828

本案例针对瀑布流页面场景，基于@react-native-oh-tpl/flash-list、axios等框架，实现了一个高性能的瀑布流页面，该案例提供了关键的开发步骤，旨在帮助开发者高效开发出高性能的瀑布流页面。详情请查看。名称版本号0.72.270.0.26rnoh5.0.0.302及以上5.0.0.302及以上页面：页面渲染最大数≤300页面组件嵌套层数≤30。

RN屏幕、文字大小适配

weixin_42369566的博客

08-11

971

react-native项目屏幕适配、字体大小适配

参与评论您还未登录，请先登录后发表或查看评论

RN获取屏幕高宽、自适应(rem)设置

weixin_39065287的博客

04-01

2543

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; //传入设计稿宽度

React Native获取手机屏幕宽高（Dimensions）

徐同保的专栏

08-04

1825

React Native获取手机屏幕宽高（Dimensions）

react native获取屏幕的宽高及分辨率

zoepriselife316的博客

09-27

2549

React Native 获取屏幕的宽高及分辨率 var Dimensions = require ('Dimensions') ; //首先引入,然后使用即可 export default class Rule extends Component { constructor(props) { super(props); this.state = { ...

React Native 获取屏幕宽高

xingxingxingge的博客

05-12

1150

import {Dimensions} from 'react-native' Dimensions.get("window").width Dimensions.get("window").height

Flutter 获取设备的宽高

iOSTianNan的博客

08-10

2188

参看 — Flutter 中获取屏幕以及 Widget 的宽高在移植原RN项目的过程中, 我倾向于在一开始就设置好一个全局变量来读取设备的宽高, 这在RN中很常用, 主要是为了开发方便… 在Flutter中 , 如果想用MediaQuery 媒体查询, 就势必需要依赖 WidgetsApp or MaterialApp, 也挺麻烦, 如果说仅仅需要随时随地读取一下屏幕的宽高 (iOS pt / android px), 那么用window对象也是不错的办法 /// ----------------

React Native 如何获取不同屏幕的像素密度

08-31

例如，如果你有一个1px宽的边框，可以设置为`borderWidth: 1 / PixelRatio.get()`，这样在任何设备上，边框都将是1物理像素宽。 2. **`PixelRatio.getFontScale()`**：此方法返回字体大小的缩放因子，这个值会根据...

react native 获取当前屏幕的宽度,高度,当前运行的机型

周家大小姐

03-01

3434

当前屏幕的宽度:Dimensions.get('window').width 当前屏幕的高度:Dimensions.get('window').height 当前屏幕的分辨率:Dimensions.get('window').scale 当前运行的平台:Platform.OS import React from 'react'; import { SafeAreaView, ...

获取全面屏手机宽度和高度（小米可用）

song53536的博客

06-03

2122

react-native-use-dimensions:React挂钩的集合，用于使用屏幕，窗口或两者的尺寸

05-02

描述这个Node.js包是React挂钩的集合，用于使用屏幕，窗口或两者的尺寸。安装安装了，只需运行以下命令即可将该包添加到您的项目中。 npm install react-native-use-dimensions 用法查看以下示例或。该包装带有三个挂钩： useScreenDimensions-屏幕尺寸 useWindowDimensions-窗口尺寸，可以 useDimensions-屏幕和窗口尺寸 import React from "react" ; import { Text } from "react-native" ; import useDimensions , { useScreenDimensions , useWindowDimensions } from "react-native-use-dimensions" ; const Scre

react-native 获取组件的宽度和高度

weixin_30246221的博客

09-03

1428

react-native 获取组件的尺寸有两种方式，第一种方式使用元素自身的onLayout属性去获取，但是这种方式有一个局限性，就是只有在初次渲染的时候才会触发这个函数，而且此种方法获取的是组件相对于父组件的位置坐标。如果我们需要随时都可以去获取组件的尺寸或者相对于屏幕的位置坐标时，这种方式并不适合。那么这里我们就来看下第二种方式，使用react-native中的findNodeHandle...

react-native自定义控件怎么实现屏幕宽度的80%

QTFYING的博客

11-10

3345

原来我们讲过在定义PixelRatio后可以获取屏幕的宽度，代码如下： var width = Dimensions.get(‘window’).width; 然后在类CSS样式中采用:width:width*0.8然后就可以了

在 RN 中构建自适应 UI

前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改

10-21

1251

如果你要在 React Native 中构建自适应用户界面，你需要对可用的工具和技术有深刻的理解。例如通过利用Dimensions API、useWindowDimensions、SafeAreaView 组件和平台特定的编码策略，可以创建响应性和自适应的 ui，从而在不同的设备和平台上提供最佳的用户体验。希望这篇文章能帮助你梳理这些方法！

ReactNative系列之四十八屏幕宽高

yeputi_WK的博客

07-17

1031

有几种方式可以获取屏幕，依次来对比下 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

获取浏览器高度和宽度

红叶岭谷的博客

04-04

696

IE中：document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度FireFox中：document.body.cl

ReactNative使用useWindowDimensions多屏幕适配

weixin_43553991的博客

11-29

359

【代码】Rn使用useWindowDimensions多屏幕适配。

RN-解决Dimensions.get('window').height不准的问题，适应全面屏

u014012083的专栏

11-06

5230

产生的原因 andorid全面屏幕中 Dimensions.get('window').height 计算屏幕高度时会自动减少StatusBar 的高度解决方案根据高宽比w/h 判断是否为全面屏幕手机，如果是全面屏: 实际屏幕高度= Dimensions.get('window').height + StatusBar 的高度不是全面屏实际屏幕高度= Dimensions.ge...

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

刘荣丹的日志

05-30

4606

Dimensions （英译：尺寸） $获取当前屏幕的宽高 const { deviceWidth, deviceHeight } = Dimensions.get('window'); @ 用途：屏幕尺寸的适配

&spi2 { pinctrl-names = "default"; pinctrl-0 = <&spi2_pins>; status = "okay"; cs-gpios = <&pio 29 GPIO_ACTIVE_LOW>; // 指定CS引脚（示例用GPIO8） st7789v@0 { // 子设备节点名建议包含芯片型号 compatible = "sitronix,st7789v"; // 必须与驱动匹配 reg = <0>; // CS编号必须对应cs-gpios的顺序 spi-max-frequency = <10000000>; // ST7789V最高支持26MHz（实际需降频使用） spi-cpol; // CPOL=1 spi-cpha; // CPHA=1 → 组合为SPI Mode 3 width = <240>; // 分辨率参数 height = <240>; reset-gpios = <&pio 8 GPIO_ACTIVE_LOW>; // 硬件复位引脚 dc-gpios = <&pio 11 GPIO_ACTIVE_HIGH>; // 数据/命令切换引脚 fps = <60>; // 帧率限制 buswidth = <9>; // 数据位宽（ST7789支持9bit但通常用8bit） debug = <7>; // 调试模式开关 }; }; 这样配置后，想在串口上调试，修改图像