React Native 如何获取不同屏幕的像素密度
更新时间：2017年01月08日 17:31:25 投稿：lqh
这篇文章主要介绍了 React Native 如何 获取不同屏幕的像素密度的相关资料,需要的朋友可以参考下
React Native 获取不同屏幕的像素密度
使用React Native开发 User Interface，初步了解之后，产生一个疑问，使用flexbox开发页面，width及height属性等输入大小或者说尺寸的地方，不能输入单位，如 height:80,通过JSX传化之后到都是按 px 像素单位处理的，因此在这个不同分配率的手机和不同密度的手机显示的效果不同，如何解决这个问题？
你猜我找到了什么？
React Native 提供的像素比获取神器PixelRatio
PixelRatio类提供给我们几个重用的方法，整理如下：
1、返回设备的像素密度
static get()
等同于在Android开发中通过代码
context.getResources().getDisplayMetrics().density;
获取到的手机设备密度。
返回结果如下图：（这是从官网上盗的图，^_^）
举个栗子
borderwidth : 1/PixelRatio.get()
返回的就是当前设备的最小线宽。
2、 返回字体大小的缩放因子
static getFontScale()
获取到的比率是用来计算文字的绝对大小，所以对计算的精度要求很高的元素，应该使用这个比率。
例如用户在通过 Setting > Display > Font Size 设置设备的字体显示大小，这个值就会改变，默认的情况下返回设备的像素比。
3、 单位 dp 转换成 px
static getPixelSizeForLayoutSize(layoutSize:number)
在UI开发的过程中最长使用到的方法。
结论
这个类的使用，以后再开发的过程中还会持续更新。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
- React-Native Android 与 IOS App使用一份代码实现方法
- IOS React Native FlexBox详解及实例
- Android React-Native通信数据模型分析
- ReactNative Alert详解及实例代码
- ReactNative (API)AsyncStorage存储详解及实例
- ReactNative-JS 调用原生方法实例代码
- React-Native TextInput组件详解及实例代码
- ReactNative页面跳转实例代码
- Android原生嵌入React Native详解
- React Native实现简单的登录功能(推荐)
- React Native搭建iOS开发环境
- PHP获取不了React Native Fecth参数的解决办法
- Windows下React Native的Android环境部署及布局示例
- 深入浅析react native es6语法
相关文章
这篇文章主要为大家介绍了React Hydrate原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
详解在create-react-app使用less与antd按需加载
这篇文章主要介绍了详解在create-react-app使用less与antd按需加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
近两年前端技术的发展如火如荼,大量的前端项目都在使用或转向 Vue 和 React 的阵营,由前端渲染页面的单页应用占比也越来越高,这篇文章主要给大家介绍了关于React全局状态管理的三种底层机制,需要的朋友可以参考下2021-09-09
记录React使用connect后,ref.current为null问题及解决
记录React使用connect后,ref.current为null问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
在使用reactjs库的时候,会遇到将一段html的字符串,然后要将它插入页面中以html的形式展现,本文主要介绍了react解析html字符串方法实现,感兴趣的可以了解一下2023-12-12
在Rust中,Trait是一个核心概念,它允许我们定义类型应该具有的行为,本文就来具体介绍一下Rust中Trait的使用,感兴趣的可以了解一下,感兴趣可以了解一下2024-03-03
react进阶教程之异常处理机制error Boundaries
在react中一旦出错,如果每个组件去处理出错情况则比较麻烦,下面这篇文章主要给大家介绍了关于react进阶教程之异常处理机制error Boundaries的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要给大家介绍了关于React Native自定义组件与输出方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
这篇文章主要介绍了自己动手封装一个React Native多级联动，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
reactjs学习解决unknown at rule @tailwind css
这篇文章主要介绍了reactjs学习解决unknown at rule @tailwind css问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
最新评论