React Native不同设备分辨率适配和设计稿尺寸单位px的适配

本文介绍了在React Native中如何处理不同设备分辨率的适配问题,特别是将设计师提供的px尺寸转换为dp单位。通过使用PixelRatio进行转换,并提供了一段简化尺寸转换的代码,使得开发中可以按设计稿尺寸直接编写样式,无需考虑适配问题。参考了多个博客资源,详细阐述了实现设计稿还原的方法。
摘要由CSDN通过智能技术生成

React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位。在每英寸160点的显示器上,1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢?

官方提供了PixelRatio进行pt到px的转换

import {PixelRatio} from 'react-native';
const dp2px = dp=>PixelRatio.getPixelSizeForLayoutSize(dp);
const px2dp = px=>PixelRatio.roundToNearestPixel(px);

设计师给你一个尺寸,比如100px*200px的View,按照下面的方式可实现设计还原:

View style={ {width:px2dp(100),height:px2dp(200),backgroundColor:“red”}}
如果每个地方都这样写会很麻烦,于是我们就有了下面转换代码

import {PixelRatio,Dimensions}} from 'react-native';
const dp2px = dp=>PixelRatio.getPixelSizeForLayoutSize(dp);
const px2dp = px=>PixelRatio.roundToNearestPixel(px);
let designSize = {width:720,height:1280}; //假设设计尺寸为:720*1280
let pxRatio = PixelRatio.get();
let win_width = Dimensions.get("window").width;
let win_height = Dimensions.get("window").heig
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值