react-native app 屏幕适配方案(按照设计稿像素大小写就行)
import React, { Component,PropTypes } from 'react';
import { Dimensions,PixelRatio,Platform,StatusBar,View } from 'react-native';
let props = {};
export default class Resolution {
static get(useFixWidth = true) {
return useFixWidth ? {
...props.fw
} : {
...props.fh
}
}
static setDesignSize(dwidth = 750, dheight = 1336, dim = "window") {
let designSize = {
width: dwidth,
height: dheight
};
let navHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 0;
let pxRatio = PixelRatio.get(dim);
let {
width,
height
} = Dimensions.get(dim);
if (dim != "screen") height -= navHeight;
let w = PixelRatio.getPixelSizeForLayoutSize(width);
let h = PixelRatio.getPixelSizeForLayoutSize(height);
let fw_design_scale = designSize.width / w;
fw_width = designSize.width;
fw_height = h * fw_design_scale;
fw_scale = 1 / pxRatio / fw_design_scale;
let fh_design_scale = designSize.height / h;
fh_width = w * fh_design_scale;
fh_height = designSize.height;
fh_scale = 1 / pxRatio / fh_design_scale;
props.fw = {
width: fw_width,
height: fw_height,
scale: fw_scale,
navHeight
};
props.fh = {
width: fh_width,
height: fh_height,
scale: fh_scale,
navHeight
};
console.log("winSize", JSON.stringify({
width,
height
}))
console.log("winPixelSize", JSON.stringify({
width: w,
height: h
}))
console.log("pxRatio", pxRatio)
console.log("fixWidth", JSON.stringify(props.fw))
console.log("fixHeight", JSON.stringify(props.fh))
}
static FixWidthView = (p) => {
let {
width,
height,
scale,
navHeight
} = props.fw;
return ( <
View {
...p
}
style = {
[p.style, {
marginTop: navHeight,
width: width,
height: height,
transform: [{
translateX: -width * .5
},
{
translateY: -height * .5
},
{
scale: scale
},
{
translateX: width * .5
},
{
translateY: height * .5
}
]
}]
}
/>
);
};
static FixHeightView = (p) => {
let {
width,
height,
scale,
navHeight
} = props.fh;
return ( <
View {
...p
}
style = {
[p.style, {
marginTop: navHeight,
width: width,
height: height,
transform: [{
translateX: -width * .5
},
{
translateY: -height * .5
},
{
scale: scale
},
{
translateX: width * .5
},
{
translateY: height * .5
}
]
}]
}
/>
);
};
};
//init
Resolution.setDesignSize();
react-native app 屏幕适配方案(按照设计稿像素大小写就行)的更多相关文章
- Flutter 移动端屏幕适配方案和制作
flutter_screenutil插件 flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! 注意:此插件仍处于开发阶段,某些API可能尚未推出. 安装依赖: 安装之前请查 ...
- JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...
- Unity2D多分辨率屏幕适配方案(转载)
一下内容转自:http://imgtec.eetrend.com/forum/3992 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有 ...
- Cocos2d-JS的屏幕适配方案
Cocos2d引擎为游戏开发者提供了屏幕适配策略(Resolution Policy)解决方案. 使用方式 1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolut ...
- cocos2dx屏幕适配方案
我们在利用cocos2dx来开发游戏时,在开始时就不可避免的会遇到屏幕适配问题,来使我们的游戏适应移动终端的各种分辨率大小.目前,大家采用的屏幕适配方案不一,网上的资料也比较丰富,下面我也将自己使用的 ...
- [原创]一种Unity2D多分辨率屏幕适配方案
此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个 ...
- Android 屏幕适配方案
转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45460089: 本文出自:[张鸿洋的博客] 1.概述 大家在Android开发 ...
- 实用Android 屏幕适配方案分享
转载地址:http://blog.csdn.net/gao_chun/article/details/45645051 真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android ...
- 给你一个全自动的屏幕适配方案(基于SW方案)!—— 解放你和UI的双手
Calces系列相关文章:Calces自动实现Android组件化模块构建 前言 屏幕适配一直是移动端开发热议的问题,但是适配方案往往在实际开发的时候会和UI提供的设计稿冲突.本文主要是基于官方推荐的 ...
随机推荐
- 使用Cron表达式创建定时任务
CronTriggerCronTrigger功能非常强大,是基于日历的作业调度,而SimpleTrigger是精准指定间隔,所以相比SimpleTrigger,CroTrigger更加常用.CroTr ...
- 网页中常见返回HTTP状态码含义
在日常网页浏览的过程中大家经常会碰到400,403,404,500,502等HTTP状态码,这些状态码对于一般用户来说出现什么都是一样的,反正就是页面打不开了,但是作为网站开发人员或者从事相关工作者认 ...
- Skipping MapperFactoryBean with name 'sysUserMapper' and 'com.buding.system.mapper.SysUserMapper' mapperInterface. Bean already defined with the same name!
前几天整体看了一下SpringBoot的简介,觉得看不如自己动手做,于是动手做一个简单的用户管理.启动的时候遇到了Skipping MapperFactoryBean with name 'sysUs ...
- 如何升级gcc
https://blog.csdn.net/zhaomax/article/details/87807711 1.环境:arm架构的centos6.5系统服务器 2.查看当前的gcc版本:gcc - ...
- python djangjo完整的实现添加的实例
实现:点击添加实现模态对话框,添加数据并显示. urls.py from django.conf.urls import url from django.contrib import admin fr ...
- 仿射密码Python实现
算法分析 仿射密码结合了移位密码和乘数密码的特点,是移位密码和乘数密码的组合. 仿射密码的加密算法就是一个线性变化,即对明文字符x,对应的密文字符为y=ax+b(mod26)其中,a, b属于Z26且 ...
- MyBatis学习总结之一对一映射
知识点:JavaType和ofType都是用来指定对象类型的,但是JavaType是用来指定pojo中属性的类型,而ofType指定的是映射到list集合属性中pojo的类型. 本次mybatis的练 ...
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- 在dataframe添加1行(首行,或者尾部),且不覆盖
如果直接用下面的代码添加第1行,则会覆盖掉原来的第1行. #指定位置增加一行: df.loc[0]={'a':1,'b':2} 正确方法: 新建一个同样的 dataframe, 然后合并两个dataf ...
- Linux命令alias - 设置命令的别名
用途说明设置命令的别名.在linux系统中如果命令太长又不符合用户的习惯,那么我们可以为它指定一个别名.虽然可以为命令建立“链接”解决长文件名的问题,但对于带命令行参数的命令,链接就无能为力了.而指定 ...