React native 分辨率适配

React Native中使用的尺寸单位是pt，是一个绝对长度，而设计师使用的是px, 这两种尺寸如何换算呢？官方提供了PixelRatio:

http://www.jianshu.com/p/7836523b4d20?utm_source=tuicool&utm_medium=referral

import {PixelRatio} from 'react-native';
const pt2px = pt=>PixelRatio.getPixelSizeForLayoutSize(pt);
const px2pt = px=>PixelRatio.roundToNearestPixel(px);

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

<View style={{width:px2pt(100),height:px2pt(200),backgroundColor:"red"}}/>

这个时候，你或许会说，这也太麻烦了，每个有尺寸的地方我都得转么，能不能我直接用px写，当然可以，不过需要整体加个缩放系数：

import {PixelRatio,Dimensions}} from 'react-native';
const pt2px = pt=>PixelRatio.getPixelSizeForLayoutSize(pt);
const px2pt = px=>PixelRatio.roundToNearestPixel(px);

let pxRatio = PixelRatio.get();
let {win_width,win_height} = Dimensions.get("window");

let scale = 1/pxRatio;
let width = pt2px(win_width);
let height = pt2px(win_height);
const com = props=>(
                <View sytle={styles.container}>
                    <View style={{width:100,height:200,backgroundColor:"red"}}/>
                </View>)

const styles={
  container: {
        width:width,
        height:height,
        backgroundColor: 'transparent',
        transform:[{translateX:-width*.5},
                    {translateY:-height*.5},
                    {scale:scale},
                    {translateX:width*.5},
                    {translateY:height*.5}]
    },
}

这样处理后，在根节点内，你再也不用考虑pt的问题了，直接使用px即可。

不过此时还有另外一个问题，设计尺寸是死的，屏幕大小是活的，得考虑分辨率适配啊，那在不同的分辨率下如何正确的实现设计师的设计呢？

我们将使用一种游戏经常会用到得方案，fixedWidth/fixedHeight.

fixedWidth

fixedWidth 模式是保持原始宽高比缩放应用程序内容，缩放后应用程序内容在水平和垂直方向都填满播放器窗口，但只保持应用程序内容的原始宽度不变，高度可能会改变,简言之宽度固定，高度自适应。

fixedHeight

fixedHeight 模式是保持原始宽高比缩放应用程序内容，缩放后应用程序内容在水平和垂直方向都填满播放器窗口，但只保持应用程序内容的原始高度不变，宽度可能会改变,简言之高度固定，宽度自适应。

具体如何应用呢，别急，一步步来。
先来看看如何得到屏幕的像素宽高：

import {Dimensions,PixelRatio} from 'react-native';

let {width,height} = Dimensions.get("window");
let w =pt2px(width);
let h = pt2px(height);

假定我们的设计尺寸是

let designSize = {width:750,height:1336};

按照fixedWidth、fixedHeight的定义，我们计算下新的宽高：

//fixedWidth
let scale = designSize.width/w;
let winSize = {width:designSize.width,height:h*scale};

//fixedHeight
let scale = designSize.height/h;
let winSize = {width:designSize.width*scale,height:designSize.height};

这个winsize就是最终实际用来布局的屏幕尺寸,此时我们又会多了一个分辨率适配的缩放系数，还记得我们前一个我们添加的为了使用px的缩放系数么，我们在这里做一个整合：

import {PixelRatio,Dimensions}} from 'react-native';
const pt2px = pt=>PixelRatio.getPixelSizeForLayoutSize(pt);
const px2pt = px=>PixelRatio.roundToNearestPixel(px);

let designSize = {width:750,height:1336};

let pxRatio = PixelRatio.get();
let {win_width,win_height} = Dimensions.get("window");

let width = pt2px(win_width);
let height = pt2px(win_height);

let design_scale = designSize.width/width;
height = height*design_scale

let scale = 1/pxRatio/design_scale;

const com = props=>(
                <View sytle={styles.container}>
                    <View style={{width:100,height:200,backgroundColor:"red"}}/>
                </View>)

const styles={
  container: {
        width:width,
        height:height,
        backgroundColor: 'transparent',
        transform:[{translateX:-width*.5},
                    {translateY:-height*.5},
                    {scale:scale},
                    {translateX:width*.5},
                    {translateY:height*.5}]
    },
}

在后续的开发中将不必再关注适配的问题，只需要按照设计师给的尺寸实现布局即可。

最后再附上一个工具类 Resolution.js：

import {Dimensions,PixelRatio} from 'react-native';
let designSize = {width:750,height:1336};
export default class Resolution {
    static get(type){
        let pxRatio = PixelRatio.get();
        let {width,height} = Dimensions.get("window");
        let w = PixelRatio.getPixelSizeForLayoutSize(width);
        let h = PixelRatio.getPixelSizeForLayoutSize(height);

        let scale = designSize.width/w;
        let winSize = {width:designSize.width,height:h*scale};

        return {
            width:winSize.width,
            height:winSize.height,
            scale:(1/scale)/pxRatio
        }
    }
};