广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

分类信息小程序-React Native不同设备屏幕分辨率适

日期:2021-04-08 浏览:
--------

分类信息小程序

------- 懒人建网站、懒人一百

懒人建网站潜心于网页页面素材免费下载,出示网站模版、网页页面设计方案、凡科抠图素材、照片素材等,服务于【本人站长】【网页页面设计方案师】和【web开发设计从事者】的编码素材与设计方案素材网站。

懒人建网站出示网页页面素材免费下载、网站模版
专业知识 共享 互帮互助!
React Native不一样机器设备辨别率兼容和设计方案稿尺寸企业px的兼容,设计方案师给的稿子都是依照px像素企业设计方案的,这个情况下大家如何迅速复原设计方案稿那?下面编码完成React Native设计方案稿尺寸企业px与pt企业的全自动变换兼容。

React Native不一样机器设备辨别率兼容和设计方案稿尺寸企业px的兼容,设计方案师给的稿子都是依照px像素企业设计方案的,这个情况下大家如何迅速复原设计方案稿那?

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  >

假如每一个地区都这样写会很麻烦,因而大家就有了下面变换编码

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 ).height;
let width = dp2px(win_width);
let height = dp2px(win_height);
let design_scale = designSize.width/width;
height = height*design_scale
let scale = 1/pxRatio/design_scale;
具体应用:

要在最外层View上设定以下款式:

const styles = StyleSheet.create({
 container: {
 width: width,
 height: height,
 transform: [{translateX: -width * .5}, {translateY: -height * .5}, {scale: scale}, {translateX: width * .5}, {translateY: height * .5}]
 }
});

在后续的开发设计中将无须再关心兼容的难题,只需要依照设计方案师给的尺寸完成合理布局便可,例如设计方案稿中的照片尺寸是300px*300px,你的款式中就写 width: 300,height: 300,

这里就写设计方案稿上的300px 300px,无需带企业
image: {
 width:300,
 height:300
 }

原文:p/7836523b4d20  详尽叙述能够查询原文

↓ 查询全文
本文连接:React

React Native不一样机器设备辨别率兼容和设计方案稿尺寸企业px的兼容由懒人建网站搜集梳理,您能够随意散播,请积极带上本文连接

懒人建网站就是完全免费共享,觉得有效就多来适用一下,沒有能帮到您,懒人也只能表明遗憾,期待有一天能帮到您。

---------

分类信息小程序

------------


网站知识

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系