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中引入less并支持antd主题换肤方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
“Props” 是 React 中用于传递数据给组件的一种机制,通常作为组件的参数进行传递,在 React 中,props 是只读的,意味着一旦将数据传递给组件的 props,组件就不能直接修改这些 props 的值,这篇文章主要介绍了React的Props、生命周期,需要的朋友可以参考下2024-06-06
Modal(模态框)是 web 开发中十分常见的组件,即从页面中弹出的对话框,下面这篇文章主要给大家介绍了关于React项目中hook实现展示对话框功能的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了react使用echart绘制地图,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
ahooks useVirtualList 封装虚拟滚动列表
这篇文章主要为大家介绍了ahooks useVirtualList 封装虚拟滚动列表详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
React Router v6 的路由懒加载有2种实现方式,1是使用react-router自带的 route.lazy,2是使用React自带的 React.lazy,下面我们就来看看它们的具体实现方法吧2024-04-04
这篇文章主要介绍了react setState的相关资料，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下2021-04-04
这篇文章主要为大家介绍了React18之update流程从零实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了React Native集成支付宝支付的实现现,ativeModules是JS代码调用原生模块的桥梁。所以，我们只需要在原生工程中集成支付宝和微信支付的sdk，然后使用NativeModules调用即可，需要的朋友可以参考下2022-02-02
这篇文章主要介绍了React循环遍历渲染数组和对象元素方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论