react native PixelRatio获取像素密度

最新推荐文章于 2022-03-21 21:10:37 发布
最新推荐文章于 2022-03-21 21:10:37 发布
阅读量903 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meng1128/article/details/71023711
版权

UI一般给出的设计稿单位都是px，那我们RN中的单位是dp，那么我们就需要将px转换为dp，这就需要使用像素密度了。

px = dp / PixelRatio.get() .


{PixelRatio.get()}; //当前的屏幕像素密度比例为
 
PixelRatio.get() === 1      mdpi Android 设备 (160 dpi) 

 
PixelRatio.get() === 1.5   hdpi Android 设备 (240 dpi) 

 
PixelRatio.get() === 2     iPhone 4, 4S    iPhone 5, 5c, 5s     iPhone 6      xhdpi Android 设备 (320 dpi) 

 
PixelRatio.get() === 3     iPhone 6 plus   xxhdpi Android 设备 (480 dpi) 

 
PixelRatio.get() === 3.5   Nexus 6 

 

 


 

                

        

        

    




    

      

        

            

              
                
                  meng1128
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

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

				
			

			

				

					Tiny的专栏
				

				

					03-30
					
					7734
					
				

			

		

		

			
				
React Native API 之 PixelRatio ，获取不同屏幕的像素比。

			
		

	



                

              
                



	

		

			

				
					
react-native系列(24)API篇：屏幕宽高和屏幕像素密度

				
			

			

				

					@黄小泽的个人博客
				

				

					03-15
					
					1071
					
				

			

		

		

			
				
Dimensions屏幕宽高

Dimensions库可以获取屏幕的宽高：


import { Dimensions } from 'react-native';

const {height, width} = Dimensions.get('window'); // 可用显示屏幕的宽高，不包括顶部的状态信息栏
const {height, width} = Dimensions.get('s...

			
		

	



                


  
              

                


	

		

			

				
					
android 获取图片像素密度,android 获取屏幕的密度和像素 点

				
			

			

				

					weixin_35671171的博客
				

				

					05-27
					
					649
					
				

			

		

		

			
				
经过测试发现屏幕的像素点 如果density =1 那么 1dp = 1pxdensity =2 那么 1dp = 2pxdensity =3 那么 1dp = 3px在字体设置的时候用dp比用px好，因为这样可以防止在不同的分辨率上显示的字体大小不同textView_bacMsg = (TextView) findViewById(R.id.textView_bacMsg);bacImg = (...

			
		

	





	

		

			

				
					
React Native－16.React Native 常用API及实践 PixelRatio

				
			

			

				

					王学森的专栏
				

				

					03-02
					
					3424
					
				

			

		

		

			
				
React-Native 中的 PixlRatio简介
PixlRatio 用来获取像素相关的数据。常用的静态方法： 
get(): 获取像素密度。如： 
  PixelRatio.get()===2 
  iPhone 4 ，4s 
  iPhone 5 ，5c ，5s 
  iPhone 6

			
		

	



		

			
		



	

		

			

				
					
react-native dpi转换

				
			

			

				

					recover517的博客
				

				

					09-13
					
					1002
					
				

			

		

		

			
				
在RN文档中提供了默认了一部分用来获取屏幕dpi密度比



PixelRatio

再一次封装安卓原生canvas的过程中，由于pad dpi原因导致canvas总是无法充满组件。

尝试使用该api发现，返回的总是1，并没有卵用，在翻阅rn文档时发现了一个相当有用的常量。

此常量存在与StyleSheet中，十分隐蔽

StyleSheet.hairlineWidth



在使用中如下

...

			
		

	





	

		

			

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

				
			

			

				

					01-04
				

			

		

		

			
				
React Native 获取不同屏幕的像素密度 使用React Native开发 User Interface，初步了解之后，产生一个疑问，使用flexbox开发页面，width及height属性等输入大小或者说尺寸的地方，不能输入单位，如 height:80,通过...

			
		

	





	

		

			

				
					
React Native中TouchableHighlight和TouchableOpacity无法获取焦点问题的解决

				
			

			

				

					06-15
				

			

		

		

			
				
解压后，将里面的文件整体覆盖到node_modules\react-native\Libraries\Components\Touchable文件夹下，但注意下次yarn add或yarn install的时候这些文件还会被恢复回去，所以每次yarn add或yarn install后都需要覆盖...

			
		

	





	

		

			

				
					
React Native 的 WiFi 连接管理器

				
			

			

				

					06-08
				

			

		

		

			
				
React Native 的 WiFi 管理器 (react-native-wifi-manager) 列出、连接并获取设备上 WiFi 连接的状态。 安装 首先需要安装 react-native-wifi-manager: npm install react-native-wifi-manager --save 在 android/...

			
		

	





	

		

			

				
					
React Native 计算器和计算器输入组件

				
			

			

				

					06-08
				

			

		

		

			
				
安装使用 npm: npm i -S react-native-calculator 或 yarn: yarn add react-native-calculator Demo Calculator Component Usage import React from 'react' import { View } from 'react-native' import { ...

			
		

	





	

		

			

				
					
react native 获取本地静态图片分辨率

				
			

			

				

					u011149565的博客
				

				

					09-07
					
					2635
					
				

			

		

		

			
				
在线图片的宽高获取直接用 Image.getSize(url, (_width, _height) => { });

这个就不细说了。

 

刚找到一个获取存在本地的静态图片宽高的方法


import {
  Image,
} from 'react-native';


const orderImage = Image.resolveAssetSource(require('./im...

			
		

	





	

		

			

				
					
native字体尺寸自适应 react_《react-native》RN文字及布局的机型适配

				
			

			

				

					weixin_39668965的博客
				

				

					12-20
					
					278
					
				

			

		

		

			
				
一、伸手党import { Dimensions, PixelRatio } from 'react-native'const defaultPixel = 2const wDp = Math.round(750 / defaultPixel)const hDp = Math.round(1334 / defaultPixel)const deviceWidthDp = Dimensions.ge...

			
		

	





	

		

			

				
					
设备像素比devicePixelRatio简单介绍

				
			

			

				

					寒风问雪的专栏
				

				

					12-13
					
					1384
					
				

			

		

		

			
				
by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2568

本文所说devicePixelRatio其实指的是window.devicePixelRatio,
 被所有WebKit浏览器以及Opera所支持，随着显示器的发展，这个属性也慢慢登上了前端技术的舞台。

			
		

	





	

		

			

				
					
ReactNative屏幕适配、获取屏幕分辨率

				
			

			

				

					骑驴找马追骆驼_so的博客
				

				

					01-04
					
					1705
					
				

			

		

		

			
				
获取当前屏幕的宽度、高度、分辨率

导入信息一般都用require 关键字 
格式：var XXXX = require('XXXX');

//首先要导入Dimensions包
var Diemnsions = require('Dimensions');


export default class App5 extends Component}> {
  render() {
    ret

			
		

	





	

		

			

				
					
《React-Native系列》12、 API模块之PixelRatio和Dimensions

				
			

			

				

					等待就是浪费青春
				

				

					08-13
					
					6892
					
				

			

		

		

			
				
PixelRatio和Dimensions 是ReactNative提供的API，这个在我们编写RN页面的时候必须要使用的。
PixelRatio
我们还是先看看官网怎么介绍的。
PixelRatio类提供了访问设备的像素密度的方法。

根据像素密度获取指定大小的图片
如果应用运行在一个高像素密度的设备上，显示的图片也应当分辨率更高。一个取得缩略图的好规则就是将显示尺寸乘以像素密度比：

			
		

	





	

		

			

				
					
react native学习笔记19——常用API（1）Dimensions、PixelRatio获取屏幕宽高及单位换算

				
			

			

				

					MrOnion的专栏
				

				

					12-11
					
					2951
					
				

			

		

		

			
				
Dimensions在React Native中通常使用Dimensions获取屏幕宽高。Dimensions的方法Dimensions的使用很简单，它只提供了两个方法：
static set(dims: {[key:string]: any}) 
该方法应该只能被原生代码进行调用。 
@param {object} dims 一个简单的字符串作为key的对象，包含了需要设置的屏幕宽高信息。
sta

			
		

	





	

		

			

				
					
PixelRatio使用

				
			

			

				

					weixin_30437481的博客
				

				

					12-28
					
					820
					
				

			

		

		

			
				
export default class PixelRatioView extends Component {


    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle}&gt...

			
		

	





	

		

			

				
					
React Native中获取屏幕的宽高、分辨率

				
			

			

				

					weixin_34252090的博客
				

				

					07-18
					
					772
					
				

			

		

		

			
				
开发App，避免不了要适配各个屏幕，为了精准的适配各个屏幕对应尺寸的设计，所以需要获取屏幕的宽高。有过iOS经验的小伙伴都知道在images.xcassets中会分为@2x和@3x图片，如下图所示：系统会根据手机类型，来选定图片的尺寸。但是在RN中，选定对应的图片设定在组件中后，如果不对组件设定宽高， 那么就会存在问题，RN中会根据图片的尺寸来生成对应大小的组件，故此处是一坑，需要处理。在RN中获...

			
		

	





	

		

			

				
					
React-Native跨平台多屏幕尺寸适配方案一览

					
热门推荐

				
			

			

				

					天外野草技术专栏
				

				

					02-23
					
					1万+
					
				

			

		

		

			
				
前言对于RN而言，跨平台已经是不二之选，那么对于不同平台的尺寸的适配又是一个亘古的难题，下面说一下我再项目中的一点实践心得，大神勿喷。方法getstatic静态方法，进行返回屏幕的像素密度。一些例子如下:PixelRatio.get()==1     mdpi  Android设备(160 dpi) 
PixelRatio.get()==1.5  hdpi  Android设备(240 dpi)

			
		

	





	

		

			

				
					
像素（Pixel）、DPI与PPI一看就明白

				
			

			

				

					weixin_47557271的博客
				

				

					03-21
					
					1万+
					
				

			

		

		

			
				
Pixel、DPI、PPI

			
		

	





	

		

			

				
					
React Native入门指南

				
			

			

				

					
				

			

		

		

			
				
"Learning React Native - 早期发布版"  本书《Learning React Native》由Bonnie Eisenman撰写，探讨了使用JavaScript构建移动应用的React Native框架。作者深入浅出地介绍了React Native的工作原理、优势以及与原生...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值