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 屏幕适配方案(按照设计稿像素大小写就行)的更多相关文章

  1. Flutter 移动端屏幕适配方案和制作

    flutter_screenutil插件 flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! 注意:此插件仍处于开发阶段,某些API可能尚未推出. 安装依赖: 安装之前请查 ...

  2. JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

    1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...

  3. Unity2D多分辨率屏幕适配方案(转载)

    一下内容转自:http://imgtec.eetrend.com/forum/3992 此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有 ...

  4. Cocos2d-JS的屏幕适配方案

    Cocos2d引擎为游戏开发者提供了屏幕适配策略(Resolution Policy)解决方案. 使用方式 1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolut ...

  5. cocos2dx屏幕适配方案

    我们在利用cocos2dx来开发游戏时,在开始时就不可避免的会遇到屏幕适配问题,来使我们的游戏适应移动终端的各种分辨率大小.目前,大家采用的屏幕适配方案不一,网上的资料也比较丰富,下面我也将自己使用的 ...

  6. [原创]一种Unity2D多分辨率屏幕适配方案

    此文将阐述一种简单有效的Unity2D多分辨率屏幕适配方案,该方案适用于基于原生开发的Unity2D游戏,即没有使用第三方2D插件,如Uni2D,2D toolkit等开发的游戏,NGUI插件不受这个 ...

  7. Android 屏幕适配方案

    转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/45460089: 本文出自:[张鸿洋的博客] 1.概述 大家在Android开发 ...

  8. 实用Android 屏幕适配方案分享

    转载地址:http://blog.csdn.net/gao_chun/article/details/45645051 真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android ...

  9. 给你一个全自动的屏幕适配方案(基于SW方案)!—— 解放你和UI的双手

    Calces系列相关文章:Calces自动实现Android组件化模块构建 前言 屏幕适配一直是移动端开发热议的问题,但是适配方案往往在实际开发的时候会和UI提供的设计稿冲突.本文主要是基于官方推荐的 ...

随机推荐

  1. E. Tree Painting(树形换根dp)

    http://codeforces.com/contest/1187/problem/E 分析:问得分最高,实际上就是问以哪个节点出发得到的分数最多,而呈现成代码形式就变成了换根,max其得分!!!而 ...

  2. Java设计模-过滤器模式

    过滤器模式 过滤器模式(Filter Pattern)或标准模式(Criteria Pattern)是一种设计模式,这种模式允许开发人员使用不同的标准来过滤一组对象,通过逻辑运算以解耦的方式把它们连接 ...

  3. C#常用到的命令及常用控件的属性

    Application.Exit()应用程序退退出 this.Close()当前窗口退出 int h = DateTime.Now.Hour;      //获取当前时间的小时部分 int m = D ...

  4. springboot学习笔记:4.logback日志配置

    springboot中日志组件推荐使用logback: 由于springboot内置了logback,所以可以直接在application.properties中配置:如果要功能丰富些,则配置下log ...

  5. 3dmax2013卸载/安装失败/如何彻底卸载清除干净3dmax2013注册表和文件的方法

    3dmax2013提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2013失败提示3dmax2013安装未完成,某些产品无法安装,也有时候想重新安装3 ...

  6. Mysql————基本sql语句

    mysql中的基本语法有四种: 1.DDL语句:(用CREAT和DROP操作的语句) 用于创建.修改.和删除数据库内的数据结构,如:1:创建和删除数据库(CREATE DATABASE || DROP ...

  7. Linux Ubuntu 默认root密码

    Ubuntu 默认root密码是随机的,每次开机都会有一个新的root密码 第一步: 输入命令:sudo passwd

  8. mysql索引的面试题

    相信很多人对于MySQL的索引都不陌生,索引(Index)是帮助MySQL高效获取数据的数据结构. 因为索引是MySQL中比较重点的知识,相信很多人都有一定的了解,尤其是在面试中出现的频率特别高.楼主 ...

  9. ./config\make\make install命令详解

    这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤 一.基本信息 1../configure 是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不 ...

  10. unittest(2)-加载用例的3种方式-输出测试报告

    # 导入测试类执行测试用例 import unittest from day_20191202.class_unittest import TestMathMethod, TestMulti # fr ...