首页 > 其他分享 >React Native 单位详细说明

React Native 单位详细说明

时间:2022-11-30 15:11:38浏览次数:54  
标签:PixelRatio 详细 get React 尺寸 密度 1dp 屏幕 Native

之前在
ReactNative笔记(二)
中总结了一点,

RN长宽单位默认对应DP:所谓与密度无关就是密度变化不引起物理尺寸的变化,这一点DP与RN官方说的一致.


现在想想,也就是说1DP在物理尺寸上不管屏幕的分辨率怎么变化,它的物理尺寸是固定不变的是核心

 

脑海里想象我的电脑是一个手机屏幕,我把分辨率调高了,也就是屏幕密度变大了,物理尺寸没有变,那么一个像素代表的物理尺寸也就小了,1DP要保持它的物理尺寸不变化,那么就要转化成更多的像素点

在React Native 中 PixelRatio.get() 是获取屏幕密度的.


80 dpi 上 PixelRatio.get()=0.5 1dp=0.5px
160 dpi 上 PixelRatio.get()=1 1dp=1px

 

320dpi 上PixelRatio.get()=2 1dp=2px

 

从上面的规律分析得出 react native 中 1px=1dp/屏幕密度 而屏幕密度=PixelRatio.get()

所以 1px=1dp/PixelRatio.get()


————————————————
版权声明:本文为CSDN博主「小源子2016」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/rnZuoZuo/article/details/53427456

标签:PixelRatio,详细,get,React,尺寸,密度,1dp,屏幕,Native
From: https://www.cnblogs.com/sexintercourse/p/16938525.html

相关文章

  • java 环境变量配置详细教程(2023 年全网最详细)
    前言:在上一篇文章中,壹哥给大家重点讲解了Java实现跨平台的原理,不知道你现在有没有弄清楚呢?如果你还有疑问,可以在评论区留言~之前的三篇文章,主要是理论性的内容,其实你暂......
  • SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模
    1、创建Maven项目2、填写项目基本信息、完成创建3、导入POM依赖打包方式设置为War包<packaging>war</packaging>依赖、可自行添加需要jar包依赖<dependencies>......
  • 从零启动一个JAVA SSM项目详细步骤目录
    详解大型互联网项目服务端架构演进历程JAVA环境配置​​1、Linux软件源配置操作​​​​2、Linux系统jdk安装实操​​​​3、Linux系统tomcat安装​​​​4、Linux下Maven......
  • react18使用useContext实现多级多级间传值与修改
     a、组件关系:依次嵌套Demo2->Demo2ComA->Demo2CompAA。。。b、实现可实现Demo2ComA与Demo2CompAA两组件间数据获取与修改(多层次嵌套时,也可实现,此处仅展示2......
  • Vulnhub之TenderFoot 1靶机详细测试过程
    Tender作者:jason_huawen靶机基本信息名称:TenderFoot:1地址:https://www.vulnhub.com/entry/tenderfoot-1,581/识别目标主机IP地址──(kali㉿kali)-[~/Vulnhub/Ten......
  • react常用hook中useMemo的使用
     作用:首先useMemo它使用来做缓存用的,只有当一个依赖项改变的时候才会发生变化,否则拿缓存的值,就不用在每次渲染的时候再做计算useMemo主要用来解决使用Reacthooks产生的......
  • react滑块验证码
     1.css.simple-verify{line-height:38px;width:250px;height:40px;border-radius:3px;border:1pxsolid#797979;display:flex......
  • 【面试题】 ES6知识点详细解析
    给大家推荐一个实用面试题库1、前端面试题库(面试必备)      推荐:★★★★★地址:前端面试题库 ......
  • 开闭原则详细介绍
    目录介绍00.问题思考分析01.前沿简单介绍02.如何理解开闭原则03.举一个原始的例子04.修改后的代码05.修改代码违背原则么06.如何做到开闭原则07.如何运用开闭原则08.总结一......
  • 【最详细易懂】C++和Lua交互总结
    一、Lua与C++的交互机制——Lua堆栈Lua和C++的交互机制的基础在于Lua提供了一个虚拟栈,C++和Lua之间的所有类型的数据交换都通过这个栈完成。无论何时C++想从Lua中调用一个......